/* CAV Pharmacology — Antiplatelet Drugs topic page. Section 1: hero + orientation. */

/* ============================================================
   Topic content wrapper grid — matches the spacing rhythm used
   by other built CAV topic content blocks (e.g. cavMicrocirculation,
   cavEdema), where each <article class="topic-section-card"> sits
   in a column with consistent gap.
   ============================================================ */
#cavAntiplateletsTopicContent {
    display: grid;
    gap: 34px;
}

#cavAntiplateletsTopicContent .cav-antiplt-orientation {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
}

#cavAntiplateletsTopicContent .cav-antiplt-orientation strong {
    color: var(--text);
    font-weight: 800;
}

#cavAntiplateletsTopicContent .cav-antiplt-orientation--muted {
    color: var(--muted-strong);
    font-size: 14.5px;
    margin-top: 18px;
}

/* ============================================================
   REUSABLE — Four-arena framing block
   Prefix: .cav-pharm-arena-*  (reused by Anticoagulants and
   Fibrinolytics pages in later sections).
   Layout: 4 tiles on desktop (≥900px), 2x2 on tablet, stacked
   on mobile. The .is-active tile is the "you are here" state.
   ============================================================ */
.cav-pharm-arena-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.cav-pharm-arena-tile {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    padding: 20px 18px 22px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cav-pharm-arena-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
}

.cav-pharm-arena-tile.is-active {
    border-color: rgba(10, 132, 255, 0.55);
    background: linear-gradient(180deg, rgba(240,247,255,0.98), rgba(232,244,255,0.94));
    box-shadow:
        0 18px 36px rgba(10, 132, 255, 0.18),
        0 0 0 1px rgba(10, 132, 255, 0.25) inset;
}

.cav-pharm-arena-label {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cav-pharm-arena-tile.is-active .cav-pharm-arena-label {
    color: var(--accent-strong);
}

.cav-pharm-arena-target {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--muted-strong);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.cav-pharm-arena-tile.is-active .cav-pharm-arena-target {
    background: rgba(255,255,255,0.92);
    border-color: rgba(10, 132, 255, 0.22);
    color: var(--accent-strong);
}

.cav-pharm-arena-desc {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

.cav-pharm-arena-tile.is-active .cav-pharm-arena-desc {
    color: var(--text);
}

.cav-pharm-arena-here {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

@media (max-width: 1023px) {
    .cav-pharm-arena-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .cav-pharm-arena-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECTION 2 — The platelet activation cascade
   Drug-class color tokens are SCOPED to .cav-antiplt-scope to
   avoid polluting the global token namespace. Apply the scope
   on the outer cascade article so tokens cascade to all
   descendants (legend swatches, SVG drug markers, button accents).
   ============================================================ */
.cav-antiplt-scope {
    --cav-pharm-aspirin: #e5484d;        /* red — COX inhibitors */
    --cav-pharm-aspirin-soft: rgba(229, 72, 77, 0.10);
    --cav-pharm-p2y12: #0a84ff;          /* blue — P2Y12 blockers */
    --cav-pharm-p2y12-soft: rgba(10, 132, 255, 0.10);
    --cav-pharm-gp23: #8e4ec6;           /* purple — GpIIb/IIIa inhibitors */
    --cav-pharm-gp23-soft: rgba(142, 78, 198, 0.10);
    --cav-pharm-pde3: #14a098;           /* teal — PDE3 inhibitors */
    --cav-pharm-pde3-soft: rgba(20, 160, 152, 0.10);
    --cav-pharm-par1: #f5a524;           /* amber — PAR-1 (vorapaxar) */
    --cav-pharm-par1-soft: rgba(245, 165, 36, 0.10);
}

/* SVG wrapper — sits on a clean surface card.
   The viewBox is always 0 0 1200 920 so the detail panels remain
   in SVG coordinate space, but the wrapper clips below the main
   cascade row by default. When .is-detail-mode is set (any zoomable
   step is hovered/focused/tapped), the wrapper expands smoothly to
   reveal the detail zone. No empty whitespace below the main row
   unless a detail is actually being shown. */
.cav-antiplt-cascade-svg-wrap {
    position: relative;
    margin: 22px auto 0;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    max-height: 540px;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cav-antiplt-cascade-svg-wrap.is-detail-mode {
    max-height: 960px;
}

@media (max-width: 900px) {
    .cav-antiplt-cascade-svg-wrap {
        max-height: 400px;
    }
    .cav-antiplt-cascade-svg-wrap.is-detail-mode {
        max-height: 720px;
    }
}

@media (max-width: 599px) {
    .cav-antiplt-cascade-svg-wrap {
        max-height: 320px;
    }
    .cav-antiplt-cascade-svg-wrap.is-detail-mode {
        max-height: 560px;
    }
}

.cav-antiplt-cascade-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1100px;
    margin: 0 auto;
}

/* Step groups inside the SVG. Default is "all visible" — once a
   step button is clicked, JS adds .is-active to one and .is-dim
   to the rest. Smooth opacity for deliberate isolation feel. */
.cav-antiplt-cascade-step {
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.cav-antiplt-cascade-step.is-dim {
    opacity: 0.18;
}

.cav-antiplt-cascade-step.is-active {
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(10, 132, 255, 0.22));
}

/* Drug-class action-site markers live inside the SVG. Hidden
   until the wrap has .is-overlay-on. Each marker is a small
   circle + adjacent text label, styled per drug class. */
.cav-pharm-class-marker {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cav-antiplt-cascade-svg-wrap.is-overlay-on .cav-pharm-class-marker {
    opacity: 1;
}

.cav-pharm-class-marker .cav-pharm-class-marker-dot {
    stroke: #ffffff;
    stroke-width: 2;
}

.cav-pharm-class-marker .cav-pharm-class-marker-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cav-pharm-class-marker.is-aspirin .cav-pharm-class-marker-dot { fill: var(--cav-pharm-aspirin); }
.cav-pharm-class-marker.is-aspirin .cav-pharm-class-marker-label { fill: var(--cav-pharm-aspirin); }
.cav-pharm-class-marker.is-p2y12 .cav-pharm-class-marker-dot { fill: var(--cav-pharm-p2y12); }
.cav-pharm-class-marker.is-p2y12 .cav-pharm-class-marker-label { fill: var(--cav-pharm-p2y12); }
.cav-pharm-class-marker.is-gp23 .cav-pharm-class-marker-dot { fill: var(--cav-pharm-gp23); }
.cav-pharm-class-marker.is-gp23 .cav-pharm-class-marker-label { fill: var(--cav-pharm-gp23); }
.cav-pharm-class-marker.is-pde3 .cav-pharm-class-marker-dot { fill: var(--cav-pharm-pde3); }
.cav-pharm-class-marker.is-pde3 .cav-pharm-class-marker-label { fill: var(--cav-pharm-pde3); }
.cav-pharm-class-marker.is-par1 .cav-pharm-class-marker-dot { fill: var(--cav-pharm-par1); }
.cav-pharm-class-marker.is-par1 .cav-pharm-class-marker-label { fill: var(--cav-pharm-par1); }

/* Step buttons — pill grid matching .cav-pathology-pills pattern. */
.cav-antiplt-cascade-controls {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.cav-antiplt-cascade-step-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid rgba(15, 23, 42, 0.10);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    font: inherit;
}

.cav-antiplt-cascade-step-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(10, 132, 255, 0.30);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.cav-antiplt-cascade-step-btn:focus-visible {
    outline: 3px solid rgba(10, 132, 255, 0.45);
    outline-offset: 2px;
}

.cav-antiplt-cascade-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.10);
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
}

.cav-antiplt-cascade-step-name {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.cav-antiplt-cascade-step-btn.is-active {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    border-color: var(--accent-strong);
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.32);
    transform: translateY(-2px);
}

.cav-antiplt-cascade-step-btn.is-active .cav-antiplt-cascade-step-num {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.cav-antiplt-cascade-step-btn.is-active .cav-antiplt-cascade-step-name {
    color: #ffffff;
}

/* Show-all variant — emerald-tinted base hint that this is the
   overview / no-dim view mode. */
.cav-antiplt-cascade-step-btn.is-show-all .cav-antiplt-cascade-step-num {
    background: rgba(52, 199, 89, 0.14);
    color: #0f7a39;
}

.cav-antiplt-cascade-step-btn.is-show-all.is-active {
    background: linear-gradient(180deg, #34c759, #0f7a39);
    border-color: #0f7a39;
    box-shadow: 0 14px 30px rgba(52, 199, 89, 0.32);
}

.cav-antiplt-cascade-step-btn.is-show-all.is-active .cav-antiplt-cascade-step-num {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Thrombin variant — amber-tinted base hint of vorapaxar. */
.cav-antiplt-cascade-step-btn.is-thrombin .cav-antiplt-cascade-step-num {
    background: var(--cav-pharm-par1-soft);
    color: var(--cav-pharm-par1);
}

.cav-antiplt-cascade-step-btn.is-thrombin.is-active {
    background: linear-gradient(180deg, var(--cav-pharm-par1), #c87f0a);
    border-color: #c87f0a;
    box-shadow: 0 14px 30px rgba(245, 165, 36, 0.32);
}

.cav-antiplt-cascade-step-btn.is-thrombin.is-active .cav-antiplt-cascade-step-num {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Explanation panel below the buttons. */
.cav-antiplt-cascade-explanation {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.94), rgba(232, 244, 255, 0.86));
    border: 1px solid rgba(10, 132, 255, 0.14);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.cav-antiplt-cascade-explanation.is-thrombin {
    background: linear-gradient(180deg, rgba(255, 243, 220, 0.94), rgba(254, 232, 195, 0.86));
    border-color: rgba(245, 165, 36, 0.28);
}

.cav-antiplt-cascade-explanation h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cav-antiplt-cascade-explanation p {
    margin: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
}

.cav-antiplt-cascade-explanation p strong {
    font-weight: 800;
}

/* Overlay toggle row. */
.cav-antiplt-cascade-overlay-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 22px;
}

.cav-antiplt-cascade-overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid rgba(15, 23, 42, 0.10);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cav-antiplt-cascade-overlay-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 132, 255, 0.30);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.cav-antiplt-cascade-overlay-toggle:focus-visible {
    outline: 3px solid rgba(10, 132, 255, 0.45);
    outline-offset: 2px;
}

.cav-antiplt-cascade-toggle-dot {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
    transition: background 0.18s ease;
}

.cav-antiplt-cascade-toggle-dot::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s ease;
}

.cav-antiplt-cascade-overlay-toggle.is-on {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    border-color: var(--accent-strong);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.32);
}

.cav-antiplt-cascade-overlay-toggle.is-on .cav-antiplt-cascade-toggle-dot {
    background: rgba(255, 255, 255, 0.36);
}

.cav-antiplt-cascade-overlay-toggle.is-on .cav-antiplt-cascade-toggle-dot::after {
    transform: translateX(16px);
}

.cav-antiplt-cascade-overlay-hint {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.5;
}

/* Legend — appears only when overlay is ON. */
.cav-antiplt-cascade-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.cav-antiplt-cascade-legend[hidden] {
    display: none;
}

.cav-antiplt-cascade-legend-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.cav-antiplt-cascade-legend-item strong {
    font-weight: 800;
}

.cav-antiplt-cascade-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* Responsive — wrap controls and tighten paddings on narrow viewports. */
@media (max-width: 900px) {
    .cav-antiplt-cascade-controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .cav-antiplt-cascade-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cav-antiplt-cascade-svg-wrap {
        padding: 14px;
    }

    .cav-antiplt-cascade-step-btn {
        padding: 10px 12px;
    }

    .cav-antiplt-cascade-step-num {
        width: 24px;
        height: 24px;
        font-size: 12.5px;
    }

    .cav-antiplt-cascade-step-name {
        font-size: 12.5px;
    }
}

/* ============================================================
   SECTION 2 REFINEMENT — Deep-detail inline-expansion zone
   Detail panels live below the main cascade scene in dedicated
   SVG real estate. One panel is revealed at a time when its
   matching step group is hovered, focused, or tapped.
   ============================================================ */
.cav-antiplt-cascade-detail {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cav-antiplt-cascade-detail.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* When ANY detail panel is active, dim the non-focused steps. */
.cav-antiplt-cascade-svg-wrap.is-detail-mode .cav-antiplt-cascade-step:not(.is-hover-source) {
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

/* The hover-source step stays bright even if .is-dim was applied
   by the step-switching path. Specificity wins via the ancestor +
   compound selector. */
.cav-antiplt-cascade-svg-wrap.is-detail-mode .cav-antiplt-cascade-step.is-hover-source {
    opacity: 1;
}

/* Accent glow on the focused platelet body. */
.cav-antiplt-cascade-step.is-hover-source .cav-antiplt-cascade-platelet-body {
    filter: drop-shadow(0 0 6px var(--accent));
    transition: filter 0.25s ease;
}

/* Zoomable platelets cue interactivity. */
.cav-antiplt-cascade-step[data-zoomable="true"] {
    cursor: zoom-in;
}

.cav-antiplt-cascade-step[data-zoomable="true"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Drug-action markers INSIDE detail panels — show only when the
   global overlay is ON AND the panel itself is active. */
.cav-antiplt-cascade-detail .cav-pharm-class-marker {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cav-antiplt-cascade-svg-wrap.is-overlay-on .cav-antiplt-cascade-detail.is-active .cav-pharm-class-marker {
    opacity: 1;
}

/* Small discoverability hint placed below each zoomable step. */
.cav-antiplt-cascade-zoom-hint {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    fill: var(--muted-strong);
    opacity: 0.6;
}

/* ============================================================
   SECTION 2 REFINEMENT v2 — Drug "block-mark" indicators
   Replaces the small colored-dot markers with bold X marks
   cutting downstream output arrows. Visually emphatic: "this
   is what's stopped" rather than "this is the binding site."
   ============================================================ */
.cav-pharm-block-mark {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cav-antiplt-cascade-svg-wrap.is-overlay-on .cav-pharm-block-mark {
    opacity: 1;
}

.cav-pharm-block-mark .cav-pharm-block-x line {
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
}

.cav-pharm-block-mark.is-aspirin .cav-pharm-block-x line { stroke: var(--cav-pharm-aspirin); }
.cav-pharm-block-mark.is-p2y12   .cav-pharm-block-x line { stroke: var(--cav-pharm-p2y12); }
.cav-pharm-block-mark.is-gp23    .cav-pharm-block-x line { stroke: var(--cav-pharm-gp23); }
.cav-pharm-block-mark.is-pde3    .cav-pharm-block-x line { stroke: var(--cav-pharm-pde3); }
.cav-pharm-block-mark.is-par1    .cav-pharm-block-x line { stroke: var(--cav-pharm-par1); }

.cav-pharm-block-label {
    font-size: 13px;
    font-weight: 800;
    fill: var(--text);
}

.cav-pharm-block-label tspan.is-sub {
    font-size: 11px;
    font-weight: 600;
    fill: var(--muted-strong);
}

.cav-pharm-block-label.is-small {
    font-size: 11.5px;
    font-weight: 800;
}

.cav-pharm-block-label.is-small tspan.is-sub {
    font-size: 10px;
    font-weight: 600;
}

/* Colored callout box pattern — sits next to the X mark, drug-class
   color border with white fill so the message reads at the inhibition
   site rather than as tiny grey margin text. */
.cav-pharm-block-callout-box {
    fill: #ffffff;
    stroke-width: 2;
}

.cav-pharm-block-mark.is-aspirin .cav-pharm-block-callout-box { stroke: var(--cav-pharm-aspirin); }
.cav-pharm-block-mark.is-p2y12   .cav-pharm-block-callout-box { stroke: var(--cav-pharm-p2y12); }
.cav-pharm-block-mark.is-gp23    .cav-pharm-block-callout-box { stroke: var(--cav-pharm-gp23); }
.cav-pharm-block-mark.is-pde3    .cav-pharm-block-callout-box { stroke: var(--cav-pharm-pde3); }
.cav-pharm-block-mark.is-par1    .cav-pharm-block-callout-box { stroke: var(--cav-pharm-par1); }

.cav-pharm-block-callout-title {
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.cav-pharm-block-callout-sub {
    font-size: 11px;
    font-weight: 600;
    fill: var(--muted-strong);
}

.cav-pharm-block-mark.is-aspirin .cav-pharm-block-callout-title { fill: var(--cav-pharm-aspirin); }
.cav-pharm-block-mark.is-p2y12   .cav-pharm-block-callout-title { fill: var(--cav-pharm-p2y12); }
.cav-pharm-block-mark.is-gp23    .cav-pharm-block-callout-title { fill: var(--cav-pharm-gp23); }
.cav-pharm-block-mark.is-pde3    .cav-pharm-block-callout-title { fill: var(--cav-pharm-pde3); }
.cav-pharm-block-mark.is-par1    .cav-pharm-block-callout-title { fill: var(--cav-pharm-par1); }

.cav-pharm-block-callout-leader {
    stroke-width: 1.5;
    fill: none;
}

.cav-pharm-block-mark.is-aspirin .cav-pharm-block-callout-leader { stroke: var(--cav-pharm-aspirin); }
.cav-pharm-block-mark.is-p2y12   .cav-pharm-block-callout-leader { stroke: var(--cav-pharm-p2y12); }
.cav-pharm-block-mark.is-gp23    .cav-pharm-block-callout-leader { stroke: var(--cav-pharm-gp23); }
.cav-pharm-block-mark.is-pde3    .cav-pharm-block-callout-leader { stroke: var(--cav-pharm-pde3); }
.cav-pharm-block-mark.is-par1    .cav-pharm-block-callout-leader { stroke: var(--cav-pharm-par1); }

/* Label hierarchy inside detail panels. */
.cav-antiplt-cascade-detail-label {
    font-size: 14px;
    font-weight: 800;
    fill: var(--text);
}

.cav-antiplt-cascade-detail-sublabel {
    font-size: 12px;
    font-weight: 600;
    fill: var(--muted-strong);
}

.cav-antiplt-cascade-detail-caption {
    font-size: 13px;
    font-weight: 600;
    fill: var(--muted-strong);
    font-style: italic;
}

.cav-antiplt-cascade-detail-leader {
    stroke: rgba(15, 23, 42, 0.22);
    stroke-width: 1.2;
    fill: none;
}

/* ============================================================
   SECTION 2 REFINEMENT v3 — Reusable "Mechanism details" disclosure.
   Sits below the SVG wrap inside the cascade article. Hidden by
   default; shown when a specific step's detail panel is active
   (data-mechanism-for matches the active step). The body inside
   is collapsible via the toggle button. Built generically so
   future drug-class topic sections can reuse the same component.
   ============================================================ */
.cav-pharm-mechanism-detail {
    margin-top: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cav-pharm-mechanism-detail[hidden] {
    display: none;
}

.cav-pharm-mechanism-detail:hover {
    background: var(--surface-strong);
    border-color: rgba(10, 132, 255, 0.22);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.cav-pharm-mechanism-detail__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 14px 18px;
    text-align: left;
    font-family: inherit;
}

.cav-pharm-mechanism-detail__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.cav-pharm-mechanism-detail__chevron {
    display: inline-block;
    transition: transform 0.18s ease;
    color: var(--accent-strong);
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.cav-pharm-mechanism-detail__toggle[aria-expanded="true"] .cav-pharm-mechanism-detail__chevron {
    transform: rotate(90deg);
}

.cav-pharm-mechanism-detail__body {
    padding: 0 18px 16px;
    color: var(--text);
    line-height: 1.55;
}

.cav-pharm-mechanism-detail__body[hidden] {
    display: none;
}

.cav-pharm-mechanism-detail__body p {
    margin: 0 0 12px 0;
    font-size: 14px;
}

.cav-pharm-mechanism-detail__body p:last-child {
    margin-bottom: 0;
}

.cav-pharm-mechanism-detail__punchline {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
}

/* ============================================================
   SECTION 3 — Drug Class Map.
   Reusable card pattern for future pharm topic pages
   (anticoagulants, fibrinolytics, etc.). Color tokens come from
   .cav-antiplt-scope; data-class attribute drives stripe + tint
   so the component itself stays drug-class-agnostic.
   ============================================================ */
.cav-antiplt-classmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 20px 0 16px;
}

.cav-pharm-class-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-strong, #ffffff);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.cav-pharm-class-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Color stripe — driven by data-class attribute. */
.cav-pharm-class-card__stripe {
    height: 6px;
    width: 100%;
}

.cav-pharm-class-card[data-class="aspirin"] .cav-pharm-class-card__stripe { background: var(--cav-pharm-aspirin); }
.cav-pharm-class-card[data-class="p2y12"]   .cav-pharm-class-card__stripe { background: var(--cav-pharm-p2y12); }
.cav-pharm-class-card[data-class="pde3"]    .cav-pharm-class-card__stripe { background: var(--cav-pharm-pde3); }
.cav-pharm-class-card[data-class="gp23"]    .cav-pharm-class-card__stripe { background: var(--cav-pharm-gp23); }
.cav-pharm-class-card[data-class="par1"]    .cav-pharm-class-card__stripe { background: var(--cav-pharm-par1); }

.cav-pharm-class-card__head {
    padding: 16px 18px 12px;
}

.cav-pharm-class-card__target {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
    margin-bottom: 8px;
}

/* Tint the target eyebrow with the class color. */
.cav-pharm-class-card[data-class="aspirin"] .cav-pharm-class-card__target { color: var(--cav-pharm-aspirin); }
.cav-pharm-class-card[data-class="p2y12"]   .cav-pharm-class-card__target { color: var(--cav-pharm-p2y12); }
.cav-pharm-class-card[data-class="pde3"]    .cav-pharm-class-card__target { color: var(--cav-pharm-pde3); }
.cav-pharm-class-card[data-class="gp23"]    .cav-pharm-class-card__target { color: var(--cav-pharm-gp23); }
.cav-pharm-class-card[data-class="par1"]    .cav-pharm-class-card__target { color: var(--cav-pharm-par1); }

.cav-pharm-class-card__title {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.cav-pharm-class-card__mechanism {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.cav-pharm-class-card__drugs {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--line);
    flex: 1;
}

.cav-pharm-class-card__drugs-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
    margin-bottom: 8px;
}

.cav-pharm-class-card__drug-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cav-pharm-class-card__drug-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--line);
}

.cav-pharm-class-card__drug-list li:last-child {
    border-bottom: none;
}

.cav-pharm-class-card__drug-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.cav-pharm-class-card__rev-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cav-pharm-class-card__rev-tag.is-irreversible {
    background: rgba(229, 72, 77, 0.10);
    color: #b8323a;
    border: 1px solid rgba(229, 72, 77, 0.25);
}

.cav-pharm-class-card__rev-tag.is-reversible {
    background: rgba(20, 160, 152, 0.10);
    color: #0a7a73;
    border: 1px solid rgba(20, 160, 152, 0.25);
}

.cav-pharm-class-card__note {
    margin: 10px 0 0 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
    color: var(--muted-strong);
}

.cav-pharm-class-card__deepdive {
    display: block;
    padding: 10px 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: var(--surface);
    transition: background 0.18s ease;
}

.cav-pharm-class-card__deepdive:hover {
    background: var(--surface-strong);
}

/* Placeholder anchor — wired in Sections 4-8. Render visually disabled. */
.cav-pharm-class-card__deepdive[data-placeholder="true"] {
    color: var(--muted-strong);
    cursor: default;
    pointer-events: none;
    opacity: 0.6;
}

/* Responsive: cards collapse to single column at narrow viewports. */
@media (max-width: 720px) {
    .cav-antiplt-classmap-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ============================================================
   SECTION 4 — Drug class deep-dive accordions.
   Reusable across all 5 antiplatelet drug classes and future
   pharm topic pages.
   ============================================================ */
.cav-pharm-class-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.cav-pharm-class-accordion {
    background: var(--surface-strong, #ffffff);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}

.cav-pharm-class-accordion:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.cav-pharm-class-accordion__header {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-family: inherit;
}

.cav-pharm-class-accordion__header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.cav-pharm-class-accordion__stripe {
    width: 6px;
    flex-shrink: 0;
}

.cav-pharm-class-accordion[data-class="aspirin"] .cav-pharm-class-accordion__stripe { background: var(--cav-pharm-aspirin); }
.cav-pharm-class-accordion[data-class="p2y12"]   .cav-pharm-class-accordion__stripe { background: var(--cav-pharm-p2y12); }
.cav-pharm-class-accordion[data-class="pde3"]    .cav-pharm-class-accordion__stripe { background: var(--cav-pharm-pde3); }
.cav-pharm-class-accordion[data-class="gp23"]    .cav-pharm-class-accordion__stripe { background: var(--cav-pharm-gp23); }
.cav-pharm-class-accordion[data-class="par1"]    .cav-pharm-class-accordion__stripe { background: var(--cav-pharm-par1); }

.cav-pharm-class-accordion__head-content {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cav-pharm-class-accordion__class-target {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
}

.cav-pharm-class-accordion[data-class="aspirin"] .cav-pharm-class-accordion__class-target { color: var(--cav-pharm-aspirin); }
.cav-pharm-class-accordion[data-class="p2y12"]   .cav-pharm-class-accordion__class-target { color: var(--cav-pharm-p2y12); }
.cav-pharm-class-accordion[data-class="pde3"]    .cav-pharm-class-accordion__class-target { color: var(--cav-pharm-pde3); }
.cav-pharm-class-accordion[data-class="gp23"]    .cav-pharm-class-accordion__class-target { color: var(--cav-pharm-gp23); }
.cav-pharm-class-accordion[data-class="par1"]    .cav-pharm-class-accordion__class-target { color: var(--cav-pharm-par1); }

.cav-pharm-class-accordion__class-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.cav-pharm-class-accordion__class-mechanism {
    font-size: 13px;
    color: var(--muted-strong);
    line-height: 1.45;
}

.cav-pharm-class-accordion__chevron {
    display: flex;
    align-items: center;
    padding-right: 20px;
    font-size: 18px;
    color: var(--muted-strong);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.cav-pharm-class-accordion__header[aria-expanded="true"] .cav-pharm-class-accordion__chevron {
    transform: rotate(180deg);
}

.cav-pharm-class-accordion__body {
    padding: 0 24px 24px 30px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.cav-pharm-class-accordion__body[hidden] {
    display: none;
}

/* Deep-dive 5-block chrome inside each accordion body. */
.cav-pharm-deepdive-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}

.cav-pharm-deepdive-block:first-child {
    border-top: none;
    margin-top: 18px;
    padding-top: 0;
}

.cav-pharm-deepdive-block__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-strong);
    margin-bottom: 6px;
}

.cav-pharm-deepdive-block__title {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cav-pharm-deepdive-block p {
    margin: 0 0 12px 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
}

.cav-pharm-deepdive-block p:last-child {
    margin-bottom: 0;
}

.cav-pharm-deepdive-placeholder {
    padding: 20px 0;
    color: var(--muted-strong);
    font-style: italic;
}

/* ============================================================
   .cav-pharm-scenario-card — "Patient Walks In" indication cards.
   Reusable across drug class deep dives and clinical synthesis.
   ============================================================ */
.cav-pharm-scenario-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.cav-pharm-scenario-card {
    padding: 16px 18px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cav-pharm-scenario-card__tier-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
    margin-bottom: 4px;
}

.cav-pharm-scenario-card[data-scenario-tier="acute"]      .cav-pharm-scenario-card__tier-tag { color: #c1391a; }
.cav-pharm-scenario-card[data-scenario-tier="secondary"]  .cav-pharm-scenario-card__tier-tag { color: var(--accent); }
.cav-pharm-scenario-card[data-scenario-tier="primary"]    .cav-pharm-scenario-card__tier-tag { color: #0a7a73; }
.cav-pharm-scenario-card[data-scenario-tier="dapt"]       .cav-pharm-scenario-card__tier-tag { color: #8e4ec6; }

.cav-pharm-scenario-card__patient {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}

.cav-pharm-scenario-card__action {
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--accent-soft, rgba(10, 132, 255, 0.08));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm, 6px);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.cav-pharm-scenario-card__why {
    margin: 6px 0 0 0;
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
    color: var(--muted-strong);
}

/* ============================================================
   Aspirin-specific visuals: acetylation SVG + dose comparison.
   ============================================================ */
.cav-antiplt-asa-acetylation-wrap {
    margin: 16px 0 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cav-antiplt-asa-acetylation {
    width: 100%;
    height: auto;
    max-width: 900px;
    display: block;
    margin: 0 auto;
}

.cav-antiplt-asa-acetylation-caption {
    margin: 14px 0 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    font-style: italic;
}

.cav-antiplt-asa-dose-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0;
}

@media (max-width: 720px) {
    .cav-antiplt-asa-dose-compare {
        grid-template-columns: 1fr;
    }
}

.cav-antiplt-asa-dose-card {
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

.cav-antiplt-asa-dose-card[data-dose="low"] {
    background: rgba(10, 132, 255, 0.04);
    border-color: rgba(10, 132, 255, 0.20);
}

.cav-antiplt-asa-dose-card[data-dose="high"] {
    background: rgba(229, 72, 77, 0.04);
    border-color: rgba(229, 72, 77, 0.20);
}

.cav-antiplt-asa-dose-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
    margin-bottom: 4px;
}

.cav-antiplt-asa-dose-card__amount {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 10px;
}

.cav-antiplt-asa-dose-card ul {
    margin: 0 0 12px 0;
    padding-left: 18px;
}

.cav-antiplt-asa-dose-card li {
    margin-bottom: 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
}

.cav-antiplt-asa-dose-card__use {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-style: italic;
    color: var(--muted-strong);
}

/* ============================================================
   Contraindication + pearl bulleted lists (reusable).
   ============================================================ */
.cav-pharm-contraindication-list,
.cav-pharm-pearl-list {
    margin: 12px 0 0 0;
    padding-left: 20px;
}

.cav-pharm-contraindication-list li,
.cav-pharm-pearl-list li {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

.cav-pharm-contraindication-list li:last-child,
.cav-pharm-pearl-list li:last-child {
    margin-bottom: 0;
}

/* ============================================================
   NBME-trap variant of the existing .high-yield-callout pattern.
   Uses the [data-trap] attribute to switch the chrome to a
   yellow/amber accent (matching the .nbme-trap-card visual
   language already in styles.css). The new BEM sub-classes
   (__label / __title / __body) are also defined here so the
   prompt's markup renders cleanly.
   ============================================================ */
.high-yield-callout[data-trap] {
    background: linear-gradient(135deg, #fff8d8, #fff0a8);
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    margin-top: 14px;
}

.high-yield-callout[data-trap]:first-of-type {
    margin-top: 18px;
}

.high-yield-callout__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: 6px;
}

.high-yield-callout__title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 8px;
}

.high-yield-callout__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
    font-weight: 500;
}

.high-yield-callout__body strong {
    color: #0f172a;
    font-weight: 800;
}

/* ============================================================
   Section 4 refinement — Telegraphic NBME trap callout body.
   Each callout has a one-line summary, a short arrow-style list,
   and a collapsible "Show mechanism" deeper explanation.
   ============================================================ */
.cav-pharm-trap-summary {
    margin: 0 0 10px 0;
    font-size: 15.5px;
    line-height: 1.5;
}

.cav-pharm-trap-arrowlist {
    margin: 0 0 12px 0;
    padding-left: 20px;
    list-style: none;
}

.cav-pharm-trap-arrowlist li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 6px;
    font-size: 14.5px;
    line-height: 1.55;
}

.cav-pharm-trap-arrowlist li::before {
    content: "→";
    position: absolute;
    left: -4px;
    color: var(--muted-strong);
    font-weight: 700;
}

.cav-pharm-trap-arrowlist li:last-child {
    margin-bottom: 0;
}

.cav-pharm-trap-mechtoggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 6px 0;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-strong);
    cursor: pointer;
    font-family: inherit;
}

.cav-pharm-trap-mechtoggle:hover {
    color: var(--text);
}

.cav-pharm-trap-mechtoggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.cav-pharm-trap-mechtoggle__chevron {
    display: inline-block;
    transition: transform 0.18s ease;
}

.cav-pharm-trap-mechtoggle[aria-expanded="true"] .cav-pharm-trap-mechtoggle__chevron {
    transform: rotate(90deg);
}

.cav-pharm-trap-mechbody {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.025);
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    border-radius: 0 6px 6px 0;
}

.cav-pharm-trap-mechbody p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-strong);
}

.cav-pharm-trap-mechbody[hidden] {
    display: none;
}

/* ============================================================
   SECTION 4 REFINEMENT R2 — Widget cards for AE / Contras / Pearls
   and restructured NBME Trap card with pill stack + filled pill btn.
   ============================================================ */

/* ----- Adverse Effects widget cards ----- */
.cav-pharm-ae-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}

.cav-pharm-ae-card {
    padding: 14px 16px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cav-pharm-ae-card[data-severity="common"]   { border-left-color: var(--cav-pharm-aspirin); }
.cav-pharm-ae-card[data-severity="watch"]    { border-left-color: #f5a524; }
.cav-pharm-ae-card[data-severity="toxicity"] { border-left-color: #c1391a; }

.cav-pharm-ae-card__severity-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
}

.cav-pharm-ae-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cav-pharm-ae-card__bullets {
    margin: 4px 0 0 0;
    padding-left: 16px;
}

.cav-pharm-ae-card__bullets li {
    margin-bottom: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.cav-pharm-ae-card__bullets li:last-child {
    margin-bottom: 0;
}

/* ----- Restructured NBME Trap card (additive to .high-yield-callout) ----- */
.cav-pharm-trap-card {
    /* Tighten the existing high-yield-callout padding for the new
       compact pill-stack layout. !important is intentional — the
       existing .high-yield-callout rule is also unscoped. */
    padding: 14px 18px !important;
    margin-bottom: 14px;
}

.cav-pharm-trap-card__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.cav-pharm-trap-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cav-pharm-trap-card .cav-pharm-trap-summary {
    margin: 0 0 10px 0;
    font-size: 15px;
}

.cav-pharm-trap-pillstack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.cav-pharm-trap-pill {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--cav-pharm-aspirin);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.cav-pharm-trap-pillbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cav-pharm-aspirin);
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, transform 0.18s ease;
}

.cav-pharm-trap-pillbtn:hover {
    background: #c1391a;
    transform: translateY(-1px);
}

.cav-pharm-trap-pillbtn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cav-pharm-trap-pillbtn__chevron {
    display: inline-block;
    transition: transform 0.18s ease;
    font-size: 11px;
}

.cav-pharm-trap-pillbtn[aria-expanded="true"] .cav-pharm-trap-pillbtn__chevron {
    transform: rotate(90deg);
}

/* Override the older trap-mechbody surface treatment so it matches
   the new tighter card chrome. */
.cav-pharm-trap-card .cav-pharm-trap-mechbody {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid rgba(0, 0, 0, 0.18);
    border-radius: 0 8px 8px 0;
}

.cav-pharm-trap-card .cav-pharm-trap-mechbody p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-strong);
}

/* Retire the prior arrow-list + text-only toggle visuals — they're no
   longer used in any trap card (kept for safety in case any other page
   references them). */
.cav-pharm-trap-arrowlist { display: none; }
.cav-pharm-trap-mechtoggle { display: none; }

/* ----- Contraindications widget cards ----- */
.cav-pharm-contra-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

.cav-pharm-contra-card {
    padding: 12px 14px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cav-pharm-contra-card__condition {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cav-pharm-contra-card__reason {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-strong);
}

/* The old <ul> rule is retired now that we use card grids. */
.cav-pharm-contraindication-list { display: none; }

/* ----- High-Yield Pearls widget cards ----- */
.cav-pharm-pearl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

.cav-pharm-pearl-card {
    padding: 12px 14px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cav-pharm-pearl-card__headline {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cav-pharm-pearl-card__body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-strong);
}

/* The old <ul> rule is retired now that we use card grids. */
.cav-pharm-pearl-list { display: none; }

/* Responsive: collapse all three new grids to single column on narrow viewports. */
@media (max-width: 600px) {
    .cav-pharm-ae-card-grid,
    .cav-pharm-contra-card-grid,
    .cav-pharm-pearl-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECTION 5 — P2Y12 deep dive.
   New reusable components:
     .cav-pharm-drug-card  — single-drug comparison card (reused
                             by every multi-drug pharm section)
     .cav-pharm-auc-flag   — "AUC high-yield" red pill marker
                             (reused across all module sections)
   Plus P2Y12-scoped mechanism SVG wrapper.
   ============================================================ */

/* ----- Drug comparison cards ----- */
.cav-pharm-drug-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 14px 0 4px;
}

.cav-pharm-drug-card {
    padding: 14px 16px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-left-color: var(--cav-pharm-p2y12);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cav-pharm-drug-card__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cav-pharm-drug-card__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cav-pharm-drug-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cav-pharm-drug-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.cav-pharm-drug-tag.is-irreversible {
    background: rgba(229, 72, 77, 0.10);
    color: #b8323a;
    border: 1px solid rgba(229, 72, 77, 0.25);
}

.cav-pharm-drug-tag.is-reversible {
    background: rgba(20, 160, 152, 0.10);
    color: #0a7a73;
    border: 1px solid rgba(20, 160, 152, 0.25);
}

.cav-pharm-drug-tag.is-prodrug {
    background: rgba(245, 165, 36, 0.10);
    color: #a36d12;
    border: 1px solid rgba(245, 165, 36, 0.30);
}

.cav-pharm-drug-tag.is-direct {
    background: rgba(20, 160, 152, 0.06);
    color: #0a7a73;
    border: 1px solid rgba(20, 160, 152, 0.20);
}

.cav-pharm-drug-tag.is-route-po {
    background: rgba(10, 132, 255, 0.06);
    color: #0a5fb8;
    border: 1px solid rgba(10, 132, 255, 0.20);
}

.cav-pharm-drug-tag.is-route-iv {
    background: rgba(142, 78, 198, 0.06);
    color: #6b3a96;
    border: 1px solid rgba(142, 78, 198, 0.20);
}

.cav-pharm-drug-tag.is-historical {
    background: rgba(100, 100, 100, 0.08);
    color: #555555;
    border: 1px solid rgba(100, 100, 100, 0.20);
}

/* Heart-failure drug-name bubbles: a touch larger, text vertically centered,
   and no dotted underline on the drug name (the underline pushed the text low
   in the pill). Scoped to the HF pages so other pages' route chips are unchanged. */
#cavRaasArniTopicContent .cav-pharm-drug-tag,
#cavBetaBlockersHfTopicContent .cav-pharm-drug-tag,
#cavDiureticsSglt2TopicContent .cav-pharm-drug-tag,
#cavVasoNatriureticTopicContent .cav-pharm-drug-tag,
#cavInotropesTopicContent .cav-pharm-drug-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 4px 11px;
    line-height: 1;
}
#cavRaasArniTopicContent .cav-pharm-drug-tag .cav-term,
#cavBetaBlockersHfTopicContent .cav-pharm-drug-tag .cav-term,
#cavDiureticsSglt2TopicContent .cav-pharm-drug-tag .cav-term,
#cavVasoNatriureticTopicContent .cav-pharm-drug-tag .cav-term,
#cavInotropesTopicContent .cav-pharm-drug-tag .cav-term {
    border-bottom: none;
}

.cav-pharm-drug-card__bullets {
    margin: 0;
    padding-left: 16px;
}

.cav-pharm-drug-card__bullets li {
    margin-bottom: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.cav-pharm-drug-card__bullets li:last-child {
    margin-bottom: 0;
}

.cav-pharm-drug-card__warn {
    margin-top: 4px;
    padding: 7px 10px;
    background: rgba(229, 72, 77, 0.06);
    border-left: 3px solid var(--cav-pharm-aspirin);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}

/* ----- AUC high-yield marker ----- */
.cav-pharm-auc-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--cav-pharm-aspirin);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 999px;
    cursor: help;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}

.cav-pharm-auc-flag:hover,
.cav-pharm-auc-flag:focus {
    background: #c1391a;
    outline: none;
}

/* ----- P2Y12 mechanism SVG wrapper ----- */
.cav-antiplt-p2y12-mech-wrap {
    margin: 16px 0 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cav-antiplt-p2y12-mech-svg {
    width: 100%;
    height: auto;
    max-width: 800px;
    display: block;
    margin: 0 auto;
}

.cav-antiplt-p2y12-mech-caption {
    margin: 14px 0 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    font-style: italic;
}

/* Drug card grid collapses on narrow viewports. */
@media (max-width: 720px) {
    .cav-pharm-drug-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Tooltip overflow fix — let .cav-term hover-pearl tooltips escape
   the rounded accordion / class-card / mechanism-detail containers
   that previously clipped them via overflow: hidden. We restore the
   rounded-corner aesthetic by rounding the child elements (stripes,
   bodies, deep-dive links) that the parent's overflow used to clip.
   ============================================================ */
.cav-pharm-class-accordion,
.cav-pharm-class-card,
.cav-pharm-mechanism-detail {
    overflow: visible;
}

/* Accordion stripe sits at the section's left edge — round its left
   corners so it follows the section's rounded shape instead of
   poking past it. */
.cav-pharm-class-accordion__stripe {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

/* Accordion body has its own background — round its bottom corners
   so it lines up with the section's rounded bottom edge when the
   accordion is expanded. */
.cav-pharm-class-accordion__body {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Section 3 class card: top stripe + bottom deep-dive link were
   clipped by the parent's overflow:hidden. Match the card's rounded
   corners on each so the visual shape stays clean. */
.cav-pharm-class-card__stripe {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.cav-pharm-class-card__deepdive {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Float tooltips above sibling widgets after escape. The existing
   .cav-term::after rule sets z-index: 25 — bump it for the now-
   overflowing case so the tooltip always paints on top of adjacent
   cards/widgets. */
.cav-term::after {
    z-index: 200;
}

/* =========================================================================
   SECTION 6 — PDE3 deep dive
   ========================================================================= */

/* PDE3 mechanism SVG wrap (mirrors P2Y12 mechanism wrap pattern) */
.cav-antiplt-pde3-mech-wrap {
    margin: 16px 0 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cav-antiplt-pde3-mech-svg {
    width: 100%;
    height: auto;
    max-width: 1040px;
    display: block;
    margin: 0 auto;
}

.cav-antiplt-pde3-mech-caption {
    margin: 14px 0 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    font-style: italic;
}

/* "Give instead" note inside a trap callout — reusable pattern */
.cav-pharm-trap-giveinstead {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(20,160,152,0.08);
    border-left: 3px solid var(--cav-pharm-pde3);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}

.cav-pharm-trap-giveinstead strong {
    color: #0a7a73;
}

/* =========================================================================
   SECTION 7 — GpIIb/IIIa deep dive
   ========================================================================= */

/* GpIIb/IIIa mechanism SVG wrap (single-image, not dual-pathway) */
.cav-antiplt-gp23-mech-wrap {
    margin: 16px 0 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cav-antiplt-gp23-mech-svg {
    width: 100%;
    height: auto;
    max-width: 1040px;
    display: block;
    margin: 0 auto;
}

.cav-antiplt-gp23-mech-caption {
    margin: 14px 0 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    font-style: italic;
}

/* Drug-card variant: purple left border for GpIIb/IIIa class */
.cav-pharm-drug-card[data-drug="abciximab"],
.cav-pharm-drug-card[data-drug="eptifibatide"],
.cav-pharm-drug-card[data-drug="tirofiban"] {
    border-left-color: var(--cav-pharm-gp23);
}

/* Monoclonal antibody badge — reusable for any mAb drug across pharm */
.cav-pharm-mab-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(142,78,198,0.10), rgba(142,78,198,0.04));
    border: 1px solid rgba(142,78,198,0.30);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #6b3a96;
    cursor: help;
    position: relative;
}

.cav-pharm-mab-badge__icon {
    font-size: 14px;
    line-height: 1;
}

.cav-pharm-mab-badge__text {
    letter-spacing: 0.02em;
}

/* Tooltip on the mAb badge — uses the existing cav-term tooltip pattern */
.cav-pharm-mab-badge[data-tooltip]:hover::after,
.cav-pharm-mab-badge[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
}


/* =========================================================================
   SECTION 8 — PAR-1 / Vorapaxar deep dive
   ========================================================================= */

/* PAR-1 mechanism SVG wrap */
.cav-antiplt-par1-mech-wrap {
    margin: 16px 0 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cav-antiplt-par1-mech-svg {
    width: 100%;
    height: auto;
    max-width: 1040px;
    display: block;
    margin: 0 auto;
}

.cav-antiplt-par1-mech-caption {
    margin: 14px 0 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    font-style: italic;
}

/* Drug-card variant: amber left border for PAR-1 class */
.cav-pharm-drug-card[data-drug="vorapaxar"] {
    border-left-color: var(--cav-pharm-par1);
}

/* Single drug card centered in the grid (for sections with only one drug) */
.cav-pharm-drug-card-grid:has(> .cav-pharm-drug-card:only-child) {
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
}

/* Low-yield notice — reusable across modules for intentionally light sections */
.cav-pharm-lowyield-notice {
    margin: 0 0 18px 0;
    padding: 12px 16px;
    background: rgba(229,72,77,0.06);
    border: 1px solid rgba(229,72,77,0.30);
    border-left: 4px solid var(--cav-pharm-aspirin);
    border-radius: var(--radius-md);
}

.cav-pharm-lowyield-notice__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b8323a;
    margin-bottom: 4px;
}

.cav-pharm-lowyield-notice__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}

.cav-pharm-lowyield-notice__body strong {
    color: var(--text);
}

/* =========================================================================
   SECTION 9 — Practice & Retrieval (mode-shift)
   9.1 Indication Map + placeholder chrome for 9.2 / 9.3
   ========================================================================= */

.cav-antiplt-s9 {
    --cav-pharm-practice: #0a7a73;
    --cav-pharm-practice-soft: rgba(20, 160, 152, 0.08);

    /* Subtle gradient background to mark mode-shift */
    /* Article wrapper is now a plain grid item — no mode-shift box. The
       toggle button itself carries the Practice & Retrieval styling.
       Matches the visual shape of the drug-class accordions above. */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* Legacy header rule — header element was replaced by the toggle button.
   Kept as a no-op selector for any stragglers. */
.cav-antiplt-s9__header {
    margin: 0;
    padding: 0;
}

.cav-antiplt-s9__mode-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--cav-pharm-practice);
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.cav-antiplt-s9__mode-icon {
    font-size: 16px;
}

.cav-antiplt-s9__mode-label {
    text-transform: uppercase;
}

.cav-antiplt-s9__mode-list {
    margin: 18px 0 0 0;
    padding: 16px 20px;
    background: var(--cav-pharm-practice-soft);
    border-left: 4px solid var(--cav-pharm-practice);
    border-radius: 0 8px 8px 0;
    list-style: none;
}

.cav-antiplt-s9__mode-list li {
    margin-bottom: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
}

.cav-antiplt-s9__mode-list li:last-child {
    margin-bottom: 0;
}

/* Sub-section chrome */
.cav-antiplt-s9__subsection {
    margin: 0 0 32px 0;
    padding: 0;
}

.cav-antiplt-s9__subsection-header {
    margin-bottom: 18px;
}

.cav-antiplt-s9__subsection-title {
    margin: 6px 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.cav-antiplt-s9__subsection-intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    max-width: 800px;
}

.cav-antiplt-s9__subsection--placeholder {
    opacity: 0.85;
}

.cav-antiplt-s9__placeholder-card {
    padding: 28px 24px;
    background: var(--surface-strong);
    border: 1px dashed rgba(20, 160, 152, 0.40);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cav-antiplt-s9__placeholder-icon {
    font-size: 28px;
    line-height: 1;
}

.cav-antiplt-s9__placeholder-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-strong);
    max-width: 480px;
    font-style: italic;
}

/* Indication map matrix */
.cav-antiplt-indication-map {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(140px, 1fr));
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.cav-antiplt-indication-map__row {
    display: contents;
}

.cav-antiplt-indication-map__cell {
    padding: 12px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
    font-size: 12.5px;
    line-height: 1.4;
}

.cav-antiplt-indication-map__row > .cav-antiplt-indication-map__cell:last-child {
    border-right: none;
}

.cav-antiplt-indication-map__row--header .cav-antiplt-indication-map__cell {
    background: rgba(20, 160, 152, 0.06);
    font-weight: 700;
    min-height: 70px;
    justify-content: center;
    align-items: flex-start;
}

.cav-antiplt-indication-map__cell--corner {
    background: var(--cav-pharm-practice) !important;
    color: #ffffff !important;
    justify-content: center !important;
    text-align: left;
}

.cav-antiplt-indication-map__corner-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.cav-antiplt-indication-map__corner-sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

.cav-antiplt-indication-map__cell--class-header {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    padding-top: 14px;
}

.cav-antiplt-indication-map__class-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-bottom: 4px;
}

.cav-antiplt-indication-map__class-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.cav-antiplt-indication-map__class-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted-strong);
    text-transform: none;
    letter-spacing: 0;
}

/* Scenario (row header) cells */
.cav-antiplt-indication-map__cell--scenario {
    background: rgba(0, 0, 0, 0.02);
    border-right: 2px solid var(--line);
}

.cav-antiplt-indication-map__scenario-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.cav-antiplt-indication-map__scenario-sub {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted-strong);
    font-style: italic;
}

/* Filled cells */
.cav-antiplt-indication-map__cell--filled {
    background: #ffffff;
}

.cav-antiplt-indication-map__cell--filled.cav-antiplt-indication-map__cell--primary {
    background: rgba(20, 160, 152, 0.06);
    border-top: 2px solid var(--cav-pharm-practice);
}

.cav-antiplt-indication-map__cell-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cav-antiplt-indication-map__cell-drug {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.cav-antiplt-indication-map__cell-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted-strong);
}

/* Empty cells */
.cav-antiplt-indication-map__cell--empty {
    background: rgba(0, 0, 0, 0.015);
    min-height: 80px;
}

/* Contraindicated cells */
.cav-antiplt-indication-map__cell--contraindicated {
    background: rgba(229, 72, 77, 0.06);
    border-top: 2px solid var(--cav-pharm-aspirin);
}

.cav-antiplt-indication-map__cell-x {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cav-pharm-aspirin);
}

.cav-antiplt-indication-map__cell--contraindicated .cav-antiplt-indication-map__cell-drug {
    color: var(--cav-pharm-aspirin);
}

/* Legend */
.cav-antiplt-indication-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    background: var(--surface-strong);
    border-radius: var(--radius-md);
    margin-top: 12px;
}

.cav-antiplt-indication-map__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
}

.cav-antiplt-indication-map__legend-marker {
    display: inline-block;
    width: 18px;
    height: 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
}

.cav-antiplt-indication-map__legend-marker--primary {
    background: rgba(20, 160, 152, 0.06);
    border-top: 2px solid var(--cav-pharm-practice);
}

.cav-antiplt-indication-map__legend-marker--filled {
    background: #ffffff;
}

.cav-antiplt-indication-map__legend-marker--contra {
    background: rgba(229, 72, 77, 0.06);
    border-top: 2px solid var(--cav-pharm-aspirin);
}

.cav-antiplt-indication-map__legend-marker--empty {
    background: rgba(0, 0, 0, 0.015);
}

/* Responsive: collapse matrix to stacked cards on mobile */
@media (max-width: 880px) {
    .cav-antiplt-indication-map {
        display: block;
        background: transparent;
        border: none;
        overflow: visible;
    }

    .cav-antiplt-indication-map__row {
        display: flex;
        flex-direction: column;
        margin-bottom: 14px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .cav-antiplt-indication-map__row--header {
        display: none;
    }

    .cav-antiplt-indication-map__cell {
        border-right: none;
        border-bottom: 1px solid var(--line);
        min-height: auto;
    }

    .cav-antiplt-indication-map__cell:last-child {
        border-bottom: none;
    }

    .cav-antiplt-indication-map__cell--scenario {
        background: var(--cav-pharm-practice);
        color: #ffffff;
    }

    .cav-antiplt-indication-map__scenario-label {
        color: #ffffff;
        font-size: 14px;
    }

    .cav-antiplt-indication-map__scenario-sub {
        color: rgba(255, 255, 255, 0.85);
    }

    .cav-antiplt-indication-map__cell--empty {
        display: none;
    }

    .cav-antiplt-indication-map__cell[data-class]::before {
        content: attr(data-class);
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted-strong);
        margin-bottom: 6px;
    }

    .cav-antiplt-indication-map__cell[data-class="aspirin"]::before { content: "Aspirin · COX inhibitors"; color: var(--cav-pharm-aspirin); }
    .cav-antiplt-indication-map__cell[data-class="p2y12"]::before { content: "P2Y12 · ADP receptor blockers"; color: var(--cav-pharm-p2y12); }
    .cav-antiplt-indication-map__cell[data-class="pde3"]::before { content: "PDE3 · cAMP-raising"; color: var(--cav-pharm-pde3); }
    .cav-antiplt-indication-map__cell[data-class="gp23"]::before { content: "GpIIb/IIIa · Fibrinogen bridge"; color: var(--cav-pharm-gp23); }
    .cav-antiplt-indication-map__cell[data-class="par1"]::before { content: "PAR-1 · Thrombin receptor"; color: var(--cav-pharm-par1); }
}

/* =========================================================================
   SECTION 9.2 — .cav-pharm-game (reusable game engine chrome)
   Used by Round 1 (this prompt), Round 2, and Section 10
   ========================================================================= */

.cav-pharm-game {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.cav-pharm-game__screen[hidden] {
    display: none !important;
}

/* START SCREEN */
.cav-pharm-game__screen--start {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    gap: 14px;
}

.cav-pharm-game__start-icon {
    font-size: 56px;
    line-height: 1;
}

.cav-pharm-game__start-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.cav-pharm-game__start-blurb {
    max-width: 560px;
    margin: 0 0 12px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted-strong);
}

/* PRIMARY / SECONDARY BUTTONS */
.cav-pharm-game__primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cav-pharm-practice, #0a7a73);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(20, 160, 152, 0.20);
}

.cav-pharm-game__primary-btn:hover {
    background: #086560;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 160, 152, 0.28);
}

.cav-pharm-game__primary-btn:active {
    transform: translateY(0);
}

.cav-pharm-game__secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--cav-pharm-practice, #0a7a73);
    border: 1.5px solid var(--cav-pharm-practice, #0a7a73);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease;
}

.cav-pharm-game__secondary-btn:hover {
    background: rgba(20, 160, 152, 0.08);
}

/* HUD */
.cav-pharm-game__hud {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-strong);
    border-radius: 12px;
    margin-bottom: 22px;
}

.cav-pharm-game__hud-progress,
.cav-pharm-game__hud-score,
.cav-pharm-game__hud-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cav-pharm-game__hud-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
}

.cav-pharm-game__hud-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.cav-pharm-game__hud-flame {
    display: inline-block;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: 2px;
}

.cav-pharm-game__hud-flame.is-visible {
    opacity: 1;
}

.cav-pharm-game__hud-flame.is-pulsing {
    animation: cav-pharm-flame-pulse 0.55s ease;
}

@keyframes cav-pharm-flame-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.55); }
    100% { transform: scale(1); }
}

.cav-pharm-game__hud-value.is-counting {
    animation: cav-pharm-score-tick 0.35s ease;
}

@keyframes cav-pharm-score-tick {
    0% { transform: scale(1); color: var(--text); }
    50% { transform: scale(1.25); color: var(--cav-pharm-practice, #0a7a73); }
    100% { transform: scale(1); color: var(--text); }
}

/* CARD STAGE */
.cav-pharm-game__card-stage {
    position: relative;
    min-height: 160px;
    margin-bottom: 22px;
    perspective: 1000px;
}

.cav-pharm-game__card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--cav-pharm-practice, #0a7a73);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cav-pharm-game__card.is-entering {
    animation: cav-pharm-card-slide-in 0.4s ease;
}

@keyframes cav-pharm-card-slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.cav-pharm-game__card-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cav-pharm-practice, #0a7a73);
    margin-bottom: 10px;
}

.cav-pharm-game__card-vignette {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}

/* ANSWER BUTTONS */
.cav-pharm-game__answers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cav-pharm-game__answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: #ffffff;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
    min-height: 84px;
}

.cav-pharm-game__answer:hover:not(:disabled) {
    border-color: var(--cav-pharm-practice, #0a7a73);
    background: var(--surface);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.cav-pharm-game__answer:disabled {
    cursor: default;
    opacity: 0.5;
}

.cav-pharm-game__answer-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.cav-pharm-game__answer-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.cav-pharm-game__answer-sub {
    font-size: 10.5px;
    color: var(--muted-strong);
    text-align: center;
    line-height: 1.3;
}

.cav-pharm-game__answer.is-correct {
    background: rgba(20, 160, 152, 0.12) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
    animation: cav-pharm-answer-correct 0.5s ease;
}

@keyframes cav-pharm-answer-correct {
    0% { transform: scale(1); }
    35% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.cav-pharm-game__answer.is-wrong {
    background: rgba(229, 72, 77, 0.10) !important;
    border-color: var(--cav-pharm-aspirin) !important;
    animation: cav-pharm-answer-wrong 0.5s ease;
}

@keyframes cav-pharm-answer-wrong {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.cav-pharm-game__answer.is-correct-reveal {
    background: rgba(20, 160, 152, 0.08) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
}

/* FEEDBACK STRIP */
.cav-pharm-game__feedback {
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 6px;
    animation: cav-pharm-feedback-in 0.25s ease;
}

@keyframes cav-pharm-feedback-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cav-pharm-game__feedback.is-correct {
    background: rgba(20, 160, 152, 0.10);
    border-left: 3px solid var(--cav-pharm-practice, #0a7a73);
    color: var(--text);
}

.cav-pharm-game__feedback.is-wrong {
    background: rgba(229, 72, 77, 0.08);
    border-left: 3px solid var(--cav-pharm-aspirin);
    color: var(--text);
}

.cav-pharm-game__feedback-icon {
    font-size: 18px;
    line-height: 1;
}

.cav-pharm-game__feedback-text {
    flex: 1;
}

/* SUMMARY SCREEN */
.cav-pharm-game__screen--summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
    animation: cav-pharm-card-slide-in 0.4s ease;
}

.cav-pharm-game__summary-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cav-pharm-game__summary-icon {
    font-size: 48px;
    line-height: 1;
    animation: cav-pharm-summary-sparkle 0.7s ease;
}

@keyframes cav-pharm-summary-sparkle {
    0% { transform: scale(0) rotate(0); }
    60% { transform: scale(1.2) rotate(15deg); }
    100% { transform: scale(1) rotate(0); }
}

.cav-pharm-game__summary-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.cav-pharm-game__summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 540px;
}

.cav-pharm-game__summary-stat {
    padding: 16px 12px;
    background: var(--surface-strong);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cav-pharm-game__summary-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-strong);
}

.cav-pharm-game__summary-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.cav-pharm-game__summary-stat-value--small {
    font-size: 14px;
    text-align: center;
}

.cav-pharm-game__summary-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* REVIEW SCREEN */
.cav-pharm-game__screen--review {
    padding: 24px;
    animation: cav-pharm-card-slide-in 0.4s ease;
}

.cav-pharm-game__review-header {
    text-align: center;
    margin-bottom: 22px;
}

.cav-pharm-game__review-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 6px;
}

.cav-pharm-game__review-title {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.cav-pharm-game__review-blurb {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted-strong);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.cav-pharm-game__review-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.cav-pharm-game__review-item {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--cav-pharm-aspirin);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cav-pharm-game__review-item.is-marked {
    border-left-color: var(--cav-pharm-practice, #0a7a73);
    opacity: 0.7;
}

.cav-pharm-game__review-item-vignette {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
}

.cav-pharm-game__review-item-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    font-size: 13px;
}

.cav-pharm-game__review-item-answer-label {
    font-weight: 700;
    color: var(--muted-strong);
}

.cav-pharm-game__review-item-answer-class {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    color: #ffffff;
}

.cav-pharm-game__review-item-explanation {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-strong);
}

.cav-pharm-game__review-item-gotit {
    align-self: flex-start;
    background: transparent;
    color: var(--cav-pharm-practice, #0a7a73);
    border: 1.5px solid var(--cav-pharm-practice, #0a7a73);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    margin-top: 4px;
}

.cav-pharm-game__review-item-gotit:hover {
    background: var(--cav-pharm-practice, #0a7a73);
    color: #ffffff;
}

.cav-pharm-game__review-item.is-marked .cav-pharm-game__review-item-gotit {
    background: var(--cav-pharm-practice, #0a7a73);
    color: #ffffff;
}

.cav-pharm-game__review-footer {
    display: flex;
    justify-content: center;
}

/* Responsive (< 720px) */
@media (max-width: 720px) {
    .cav-pharm-game {
        padding: 18px;
    }

    .cav-pharm-game__answers {
        grid-template-columns: repeat(2, 1fr);
    }

    .cav-pharm-game__answer:last-child {
        grid-column: 1 / -1;
    }

    .cav-pharm-game__hud-value {
        font-size: 18px;
    }

    .cav-pharm-game__summary-stats {
        grid-template-columns: 1fr;
    }

    .cav-pharm-game__card-vignette {
        font-size: 14.5px;
    }
}

/* =========================================================================
   SECTION 9.3 — Round 2 chrome (builds on Round 1's .cav-pharm-game__*)
   Red-themed signaling for higher stakes; three card-type interaction flows
   ========================================================================= */

.cav-pharm-game--round2 {
    border-top: 4px solid var(--cav-pharm-aspirin);
}

.cav-pharm-game__primary-btn--round2 {
    background: var(--cav-pharm-aspirin);
    box-shadow: 0 2px 8px rgba(229, 72, 77, 0.20);
}

.cav-pharm-game__primary-btn--round2:hover {
    background: #c1391a;
    box-shadow: 0 4px 12px rgba(229, 72, 77, 0.28);
}

.cav-pharm-game__card--round2 {
    border-left-color: var(--cav-pharm-aspirin);
}

/* Amber flame variant (Round 2) — same emoji, slot for future tint tweaks */
.cav-pharm-game__hud-flame--amber {
    /* visual differentiation handled by the existing pulse animation */
}

/* Card-type indicator (eyebrow label) */
.cav-pharm-game__card-typetag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted-strong);
    text-transform: none;
}

.cav-pharm-game__card-typetag[data-type="trap"] {
    background: rgba(229, 72, 77, 0.10);
    color: #b8323a;
}

.cav-pharm-game__card-typetag[data-type="mechanism"] {
    background: rgba(10, 132, 255, 0.10);
    color: #0a5fb8;
}

.cav-pharm-game__card-typetag[data-type="safe"] {
    background: rgba(20, 160, 152, 0.10);
    color: #0a7a73;
}

/* Proposed drug badge */
.cav-pharm-game__card-proposed {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--surface-strong);
    border-left: 3px solid var(--text);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.45;
}

.cav-pharm-game__card-proposed strong {
    font-weight: 700;
}

/* SAFETY layout (Safe / Contraindicated) */
.cav-pharm-game__safety {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.cav-pharm-game__safety-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    transition: all 0.18s ease;
    min-height: 60px;
}

.cav-pharm-game__safety-btn--safe {
    border-left: 5px solid var(--cav-pharm-practice, #0a7a73);
}

.cav-pharm-game__safety-btn--safe:hover:not(:disabled) {
    background: rgba(20, 160, 152, 0.08);
    border-color: var(--cav-pharm-practice, #0a7a73);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 160, 152, 0.15);
}

.cav-pharm-game__safety-btn--contra {
    border-left: 5px solid var(--cav-pharm-aspirin);
}

.cav-pharm-game__safety-btn--contra:hover:not(:disabled) {
    background: rgba(229, 72, 77, 0.08);
    border-color: var(--cav-pharm-aspirin);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(229, 72, 77, 0.15);
}

.cav-pharm-game__safety-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.cav-pharm-game__safety-icon {
    font-size: 22px;
    line-height: 1;
}

.cav-pharm-game__safety-btn.is-correct {
    background: rgba(20, 160, 152, 0.14) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
    animation: cav-pharm-answer-correct 0.5s ease;
}

.cav-pharm-game__safety-btn.is-wrong {
    background: rgba(229, 72, 77, 0.12) !important;
    border-color: var(--cav-pharm-aspirin) !important;
    animation: cav-pharm-answer-wrong 0.5s ease;
}

.cav-pharm-game__safety-btn.is-correct-reveal {
    background: rgba(20, 160, 152, 0.10) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
}

/* REASONS layout */
.cav-pharm-game__reasons {
    margin-bottom: 14px;
    padding: 14px;
    background: rgba(229, 72, 77, 0.04);
    border: 1px solid rgba(229, 72, 77, 0.20);
    border-radius: 12px;
    animation: cav-pharm-feedback-in 0.3s ease;
}

.cav-pharm-game__reasons-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b8323a;
    margin-bottom: 10px;
}

.cav-pharm-game__reasons-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cav-pharm-game__reason-btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
    text-align: left;
    transition: all 0.18s ease;
}

.cav-pharm-game__reason-btn:hover:not(:disabled) {
    border-color: var(--cav-pharm-aspirin);
    background: rgba(229, 72, 77, 0.04);
}

.cav-pharm-game__reason-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.cav-pharm-game__reason-btn.is-correct {
    background: rgba(20, 160, 152, 0.10) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
    color: #0a7a73;
    animation: cav-pharm-answer-correct 0.5s ease;
}

.cav-pharm-game__reason-btn.is-wrong {
    background: rgba(229, 72, 77, 0.10) !important;
    border-color: var(--cav-pharm-aspirin) !important;
    animation: cav-pharm-answer-wrong 0.5s ease;
}

.cav-pharm-game__reason-btn.is-correct-reveal {
    background: rgba(20, 160, 152, 0.06) !important;
    border-color: var(--cav-pharm-practice, #0a7a73) !important;
}

/* Round 2 mechanism (5-button) layout reuses Round 1's .cav-pharm-game__answers grid */
.cav-pharm-game__answers--round2 {
    /* no overrides — inherits 5-column grid */
}

/* Feedback strip — extended with consequence line */
.cav-pharm-game__feedback-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cav-pharm-game__feedback-consequence {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted-strong);
    font-style: italic;
}

.cav-pharm-game__feedback-consequence:empty {
    display: none;
}

/* Round 2 summary icon — target pop animation */
.cav-pharm-game--round2 .cav-pharm-game__summary-icon {
    animation: cav-pharm-summary-target 0.7s ease;
}

@keyframes cav-pharm-summary-target {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Responsive overrides for Round 2 */
@media (max-width: 720px) {
    .cav-pharm-game__safety {
        grid-template-columns: 1fr;
    }

    .cav-pharm-game__safety-btn {
        padding: 14px 16px;
    }

    .cav-pharm-game__answers--round2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cav-pharm-game__answers--round2 .cav-pharm-game__answer:last-child {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   SECTION 9.3 — Round 2 engine FIXES (s9p3a-fix)
   ========================================================================= */

/* FIX 4 — Layout exclusivity. The browser's [hidden] attribute is overridden
   by any explicit `display: grid/flex` rule. Force display:none when any of
   the three Round 2 interaction layouts is marked hidden. */
.cav-pharm-game__safety[hidden],
.cav-pharm-game__reasons[hidden],
.cav-pharm-game__answers--round2[hidden],
.cav-pharm-game__card-typetag[hidden] {
    display: none !important;
}

/* FIX 2 — Hide drug-class sub-labels on mechanism cards while question is
   active. Revealed once the layout gets .is-revealed in handleMechanismAnswer. */
.cav-pharm-game--round2 .cav-pharm-game__answers--round2 .cav-pharm-game__answer-sub {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cav-pharm-game--round2 .cav-pharm-game__answers--round2.is-revealed .cav-pharm-game__answer-sub {
    visibility: visible;
    opacity: 1;
}

/* FIX 5 — Round 2 primary button visibility. Existing rule wasn't winning
   over the base .cav-pharm-game__primary-btn background (same specificity,
   later rule loses to source order in some browsers when var() resolution
   defers). Force the red background + white text with literal hex + !important. */
.cav-pharm-game__primary-btn--round2 {
    background: #e5484d !important;
    background-color: #e5484d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(229, 72, 77, 0.30);
}

.cav-pharm-game__primary-btn--round2:hover {
    background: #c1391a !important;
    background-color: #c1391a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(229, 72, 77, 0.40);
}

/* FIX 6 — "You picked" line in review-missed cards */
.cav-pharm-game__review-item-picked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    font-size: 13px;
}

/* =========================================================================
   SECTION 9 — Practice & Retrieval dropdown widget
   Converts the entire Practice & Retrieval section into a collapsible
   accordion. Header stays visible always; body (intro + 3 sub-sections)
   collapses behind a single clickable toggle.
   ========================================================================= */

.cav-antiplt-s9__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 22px 26px;
    background: rgba(20, 160, 152, 0.06);
    border: 1px solid rgba(20, 160, 152, 0.30);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--text);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cav-antiplt-s9__toggle:hover {
    background: rgba(20, 160, 152, 0.10);
    border-color: rgba(20, 160, 152, 0.50);
    box-shadow: 0 4px 14px rgba(20, 160, 152, 0.12);
}

.cav-antiplt-s9__toggle:focus-visible {
    outline: 2px solid var(--cav-pharm-practice, #0a7a73);
    outline-offset: 2px;
}

.cav-antiplt-s9__toggle-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* The mode banner inside the toggle keeps its pill look but sized for a header */
.cav-antiplt-s9__toggle .cav-antiplt-s9__mode-banner {
    align-self: flex-start;
    margin-bottom: 4px;
}

.cav-antiplt-s9__toggle-title {
    margin: 2px 0 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

.cav-antiplt-s9__toggle-chevron {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    color: var(--cav-pharm-practice, #0a7a73);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.cav-antiplt-s9__toggle[aria-expanded="true"] .cav-antiplt-s9__toggle-chevron {
    transform: rotate(180deg);
}

/* Body — collapsible. The browser's hidden attribute needs reinforcement
   here because the body uses no display rule of its own, but enforce
   explicitly to match the layout-exclusivity pattern used elsewhere. */
.cav-antiplt-s9__body[hidden] {
    display: none !important;
}

.cav-antiplt-s9__body {
    margin-top: 22px;
    animation: cav-antiplt-s9-body-in 0.32s ease;
}

@keyframes cav-antiplt-s9-body-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Intro block (orientation + mode-list) — sits inside the expanded body */
.cav-antiplt-s9__intro {
    margin: 0 0 28px 0;
    padding: 0 4px;
}

@media (max-width: 720px) {
    .cav-antiplt-s9__toggle {
        padding: 18px 20px;
        gap: 12px;
    }
    .cav-antiplt-s9__toggle-title {
        font-size: 19px;
    }
}

/* ============================================================
   CAV Pharmacology · Action Potential Engine (Antiarrhythmics)
   Reusable styles — also load on individual class topic pages
   that embed a single trace via APEngine.createTrace().
   ============================================================ */
#cavAntiarrhythmicsTopicContent {
    display: grid;
    gap: 34px;
}

/* --- Engine shell --- */
.ap-engine {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.ap-engine__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.ap-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.24);
    transition: background 0.18s ease, transform 0.1s ease;
}
.ap-play:hover { background: var(--accent-strong); }
.ap-play:active { transform: translateY(1px); }
.ap-play.is-playing {
    background: #e5484d;
    box-shadow: 0 8px 20px rgba(229, 72, 77, 0.26);
}
.ap-play__icon { font-size: 12px; line-height: 1; }

.ap-class-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ap-class-btn {
    min-width: 48px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.ap-class-btn:hover { border-color: rgba(10, 132, 255, 0.4); color: var(--text); }
.ap-class-btn.is-active {
    background: #111318;
    border-color: #111318;
    color: #fff;
}
.ap-class-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Panels (two traces side by side) --- */
.ap-engine__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ap-trace {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    padding: 14px 14px 8px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ap-trace.is-affected {
    border-color: rgba(239, 108, 0, 0.5);
    box-shadow: 0 16px 36px rgba(239, 108, 0, 0.12);
}

.ap-trace__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.ap-trace__title {
    font-size: 14.5px;
    font-weight: 850;
    color: var(--text);
}
.ap-trace__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
}
.ap-trace__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.1);
    color: var(--accent-strong);
    letter-spacing: 0.02em;
}
.ap-trace__rmp { color: var(--muted); }
.ap-trace.is-affected .ap-trace__tag {
    background: rgba(239, 108, 0, 0.14);
    color: #c2570a;
}

.ap-trace__svg { width: 100%; height: auto; display: block; }

/* --- SVG waveform elements --- */
.ap-wave { stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Normal wave behind a morph: solid + clearly visible (was faint dashed). */
.ap-wave--ghost { stroke-width: 2.4; opacity: 1; }
.ap-wave--main.is-mod { stroke-width: 3; }
.ap-wave__hit { cursor: help; }
.ap-grid__line { stroke: rgba(15, 23, 42, 0.08); stroke-width: 1; }
.ap-grid__line.is-zero { stroke: rgba(15, 23, 42, 0.16); stroke-dasharray: 2 4; }
.ap-grid__lab { fill: var(--muted); font-size: 9px; font-weight: 700; }
.ap-grid__unit { fill: var(--muted); font-size: 9px; font-weight: 700; }

/* Phase ribbon strip + numbered badges (replaces the old blue channel text) */
.ap-phase__name { fill: var(--text); font-size: 10px; font-weight: 800; }
.ap-ribbon { transition: opacity 0.15s ease; }
.ap-ribbon__num { fill: #fff; font-size: 10px; font-weight: 850; pointer-events: none; }

/* Hover hit-areas: invisible, but brighten their phase ribbon on hover/focus */
.ap-hit { cursor: help; outline: none; }
.ap-hit:hover, .ap-hit:focus-visible { fill: rgba(15, 23, 42, 0.04); }

/* Drug-action pill icon under a phase the active class acts on */
.ap-drug-icon { filter: drop-shadow(0 1px 2px rgba(239, 108, 0, 0.35)); }
.ap-drug-icon__hit { cursor: help; outline: none; }

.ap-sweep-dot {
    filter: drop-shadow(0 0 5px rgba(239, 108, 0, 0.6));
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* --- Shared tooltip (body-anchored, never clipped) --- */
.ap-tip {
    position: fixed;
    left: 0; top: 0;
    z-index: 9999;
    max-width: min(300px, 86vw);
    padding: 10px 13px;
    border-radius: 8px;
    background: #111318;
    color: #f4f6fb;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.ap-tip.is-on { opacity: 1; }
.ap-tip strong { color: #fff; font-weight: 800; }
.ap-tip .ap-tip__tag {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7fb4ff;
}
.ap-tip .ap-tip__ch {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    color: #c4cedd;
}
.ap-tip .ap-tip__effect {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffce9e;
}

/* --- Caption under the engine --- */
.ap-engine__caption {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
    padding: 13px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted-strong);
}
.ap-engine__caption strong { color: var(--text); font-weight: 800; }
.ap-engine__caption.is-active {
    border-color: rgba(239, 108, 0, 0.3);
    background: rgba(239, 108, 0, 0.06);
    color: var(--text);
}
.ap-engine__caption-tag {
    display: inline-block;
    font-weight: 850;
    color: #c2570a;
    margin-right: 4px;
}

/* --- Engine card legend + inline keys --- */
.cav-antiarr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}
.cav-antiarr-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-strong);
}
.cav-antiarr-legend__swatch {
    width: 22px; height: 4px; border-radius: 999px; flex: none;
}
.cav-antiarr-legend__swatch--normal { background: #51607a; }
.cav-antiarr-legend__swatch--ghost { background: #8995a6; }
.cav-antiarr-legend__swatch--mod { background: #ef6c00; }

.cav-antiarr-ghost-key { color: #8a95a5; font-weight: 800; }
.cav-antiarr-mod-key { color: #c2570a; font-weight: 800; }

/* --- Class-by-class overview grid --- */
.cav-antiarr-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.cav-antiarr-class-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    /* thick coloured left-border marks the class category */
    border-left: 6px solid #cbd5e1;
    background: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-antiarr-class-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
/* Class-category left-border colours */
.cav-antiarr-class-card--c1 { border-left-color: #e5484d; }
.cav-antiarr-class-card--c2 { border-left-color: #10b981; }
.cav-antiarr-class-card--c3 { border-left-color: #7c3aed; }
.cav-antiarr-class-card--c4 { border-left-color: #0a84ff; }
.cav-antiarr-class-card--cmisc { border-left-color: #52607a; }
.cav-antiarr-class-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* Class title — big, bold, black plain text (no pill). The category
   colour is carried by the tile's thick left-border. */
.cav-antiarr-class-badge {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
}
.cav-antiarr-class-badge--1,
.cav-antiarr-class-badge--2,
.cav-antiarr-class-badge--3,
.cav-antiarr-class-badge--4,
.cav-antiarr-class-badge--misc { background: none; }

/* Target indicator badge (top-right): high-contrast, never grey */
.cav-antiarr-target {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}
.cav-antiarr-target::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}
.cav-antiarr-target--ventricular { background: #4338ca; }
.cav-antiarr-target--nodal { background: #0d9488; }

.cav-antiarr-class-mech {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}
.cav-antiarr-class-mech strong { color: var(--text); font-weight: 800; }
.cav-antiarr-drugs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cav-antiarr-drug {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f8;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cav-antiarr-drug:hover {
    transform: scale(1.05);
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}
.cav-antiarr-class-go {
    align-self: flex-start;
    margin-top: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(10, 132, 255, 0.3);
    background: rgba(10, 132, 255, 0.06);
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.cav-antiarr-class-go:hover {
    background: rgba(10, 132, 255, 0.12);
    border-color: var(--accent);
}

/* --- Responsive: stack panels and class cards on narrow screens --- */
@media (max-width: 860px) {
    .ap-engine__panels { grid-template-columns: 1fr; }
    .cav-antiarr-class-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Subtle AUC high-yield marker — Antiarrhythmics page ONLY.
   A small, translucent-red star superscript at the top-right of a
   word (trademark-style) instead of the bold red "★ AUC" pill, so a
   drug list with many high-yield agents doesn't get overloaded.
   Scoped to #cavAntiarrhythmicsTopicContent — pathology AUC stars
   are intentionally left unchanged.
   ============================================================ */
#cavAntianginalsTopicContent .cav-auc-mark,
#cavHeartFailureTopicContent .cav-auc-mark,
#cavAntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass1aAntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass1bAntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass1cAntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass2AntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass3AntiarrhythmicsTopicContent .cav-auc-mark,
#cavClass4AntiarrhythmicsTopicContent .cav-auc-mark,
#cavMiscAntiarrhythmicsTopicContent .cav-auc-mark,
#cavNitratesTopicContent .cav-auc-mark,
#cavCCBAnginaTopicContent .cav-auc-mark,
#cavBetaBlockersAnginaTopicContent .cav-auc-mark,
#cavRanolazineTopicContent .cav-auc-mark,
#cavSpecialSituationsTopicContent .cav-auc-mark,
#cavRaasArniTopicContent .cav-auc-mark,
#cavBetaBlockersHfTopicContent .cav-auc-mark,
#cavDiureticsSglt2TopicContent .cav-auc-mark,
#cavVasoNatriureticTopicContent .cav-auc-mark,
#cavInotropesTopicContent .cav-auc-mark {
    font-size: 0.66em;
    line-height: 0;
    vertical-align: super;
    margin-left: 1px;
    color: rgba(229, 72, 77, 0.72);
    font-weight: 700;
    cursor: help;
    transition: color 0.15s ease;
}
#cavAntianginalsTopicContent .cav-auc-mark:hover,
#cavAntianginalsTopicContent .cav-auc-mark:focus-visible,
#cavHeartFailureTopicContent .cav-auc-mark:hover,
#cavHeartFailureTopicContent .cav-auc-mark:focus-visible,
#cavAntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavAntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass1aAntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass1aAntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass1bAntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass1bAntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass1cAntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass1cAntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass2AntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass2AntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass3AntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass3AntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavClass4AntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavClass4AntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavMiscAntiarrhythmicsTopicContent .cav-auc-mark:hover,
#cavMiscAntiarrhythmicsTopicContent .cav-auc-mark:focus-visible,
#cavNitratesTopicContent .cav-auc-mark:hover,
#cavNitratesTopicContent .cav-auc-mark:focus-visible,
#cavCCBAnginaTopicContent .cav-auc-mark:hover,
#cavCCBAnginaTopicContent .cav-auc-mark:focus-visible,
#cavBetaBlockersAnginaTopicContent .cav-auc-mark:hover,
#cavBetaBlockersAnginaTopicContent .cav-auc-mark:focus-visible,
#cavRanolazineTopicContent .cav-auc-mark:hover,
#cavRanolazineTopicContent .cav-auc-mark:focus-visible,
#cavSpecialSituationsTopicContent .cav-auc-mark:hover,
#cavSpecialSituationsTopicContent .cav-auc-mark:focus-visible,
#cavRaasArniTopicContent .cav-auc-mark:hover,
#cavRaasArniTopicContent .cav-auc-mark:focus-visible,
#cavBetaBlockersHfTopicContent .cav-auc-mark:hover,
#cavBetaBlockersHfTopicContent .cav-auc-mark:focus-visible,
#cavDiureticsSglt2TopicContent .cav-auc-mark:hover,
#cavDiureticsSglt2TopicContent .cav-auc-mark:focus-visible,
#cavVasoNatriureticTopicContent .cav-auc-mark:hover,
#cavVasoNatriureticTopicContent .cav-auc-mark:focus-visible,
#cavInotropesTopicContent .cav-auc-mark:hover,
#cavInotropesTopicContent .cav-auc-mark:focus-visible {
    color: rgba(229, 72, 77, 0.95);
    outline: none;
}

/* ============================================================
   CLASS 1b ANTIARRHYTHMICS — topic page
   Scoped to #cavClass1bAntiarrhythmicsTopicContent. Reuses the
   Class 1a chrome (.cav-c1a-* trace, drug cards, use cards, mech
   tiles, pearl table); only the Phenytoin "future module" card and
   the adverse-effect cards are page-specific. A shorter, focused page.
   ============================================================ */
#cavClass1bAntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* Phenytoin "recognition only / future module" card — muted + dashed */
.cav-c1b-future-card {
    border: 1px dashed rgba(100, 100, 100, 0.40) !important;
    background: #fafafa;
    opacity: 0.92;
}
.cav-c1b-future-card .cav-pharm-drug-card__name { color: #555; }
.cav-c1b-future-banner {
    margin: 4px 0 10px;
    padding: 7px 10px;
    background: rgba(100, 100, 100, 0.08);
    border-left: 3px solid #8a8a8a;
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #444;
    line-height: 1.45;
}

/* Adverse-effect cards — CNS first (most important), then cardiac */
.cav-c1b-ae-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}
.cav-c1b-ae-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    background: #fff;
}
.cav-c1b-ae-card--cns {
    border-color: rgba(229, 72, 77, 0.30);
    background: rgba(229, 72, 77, 0.04);
}
.cav-c1b-ae-card--cardiac {
    border-color: rgba(10, 132, 255, 0.30);
    background: rgba(10, 132, 255, 0.04);
}
.cav-c1b-ae-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.cav-c1b-ae-card__icon { font-size: 20px; line-height: 1; }
.cav-c1b-ae-card__title { font-size: 16px; font-weight: 800; color: var(--text); }
.cav-c1b-ae-card__badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #d3403f;
    padding: 3px 9px;
    border-radius: 999px;
}
.cav-c1b-ae-card__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #2f3a47;
    font-weight: 500;
}
.cav-c1b-ae-card__text strong { color: var(--text); font-weight: 800; }

@media (max-width: 760px) {
    .cav-c1b-ae-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLASS 1a ANTIARRHYTHMICS — topic page
   Scoped to #cavClass1aAntiarrhythmicsTopicContent. Reuses the
   shared topic-section-card, drug-card, AP engine, and ECG simulator
   components; only page-specific chrome lives here. Body text is kept
   dark + prominent (no faint grey) so nothing reads as skippable.
   ============================================================ */
#cavClass1aAntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* Class 1c content grid — same 26px section spacing as 1a/1b. Without this
   the outer .topic-workspace-page grid only spaces direct children, so the
   nested <article> sections fuse together with no vertical gap. */
#cavClass1cAntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* Class 2 content grid — same 26px section spacing as 1a/1b/1c so the
   nested <article> sections don't fuse together. */
#cavClass2AntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* ----- Class 2 — animated nodal firing-rate comparison widget ----- */
/* Two side-by-side animated nodal action potentials (Normal vs Beta
   Blocked) cycling in real time, sharing the AP engine's teal/nodal
   visual language. Self-contained — driven by initCavClass2NodalCompare. */
.cav-c2-compare {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfdfe;
    padding: 16px 16px 12px;
}
.cav-c2-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cav-c2-compare__cell {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 10px 12px 8px;
}
.cav-c2-compare__cell--blocked {
    border-color: rgba(13, 148, 136, 0.35);
    background: rgba(13, 148, 136, 0.045);
}
.cav-c2-compare__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.cav-c2-compare__title { font-size: 14.5px; font-weight: 800; color: var(--text); }
.cav-c2-compare__badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
}
.cav-c2-compare__badge--normal { background: #0d9488; }
.cav-c2-compare__badge--blocked { background: #4338ca; }
.cav-c2-compare__svg { width: 100%; height: auto; display: block; }
.cav-c2-compare__rate {
    margin: 4px 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: #2f3a47;
}
.cav-c2-compare__rate strong { color: var(--text); font-weight: 800; }
.cav-c2-compare__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.cav-c2-compare__play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(13, 148, 136, 0.4);
    background: #0d9488;
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cav-c2-compare__play:hover { background: #0b7d72; }
.cav-c2-compare__play:active { transform: scale(0.97); }
.cav-c2-compare__hint {
    font-size: 12.5px;
    font-weight: 600;
    color: #2f3a47;
}
.cav-c2-compare__hint strong { color: var(--text); font-weight: 800; }
@media (max-width: 720px) {
    .cav-c2-compare__grid { grid-template-columns: 1fr; }
}

/* Class 2 adverse-effect grid — 5 cards read best as a 3-up grid (a row of
   3 then a row of 2), rather than the 2-col 1b grid that strands a lone card. */
.cav-c2-ae-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
    .cav-c2-ae-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .cav-c2-ae-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLASS 3 ANTIARRHYTHMICS — topic page
   Scoped to #cavClass3AntiarrhythmicsTopicContent. Reuses the
   Class 1a chrome (trace, drug cards, mech tiles, use cards,
   pearl table, AE cards). Page-specific: the Dronedarone "no
   iodine" standout callout and the Amiodarone multi-system
   toxicity map (an additive, self-contained reveal widget).
   ============================================================ */
#cavClass3AntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* Dronedarone "no iodine = no thyroid dysfunction" standout — a prominent
   green callout, mirroring the Esmolol standout banner pattern on Class 2. */
.cav-c3-standout {
    margin: 4px 0 10px;
    padding: 9px 12px;
    border-left: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.10);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    font-weight: 700;
    color: #0a6b4f;
    line-height: 1.5;
}
.cav-c3-standout strong { color: #064e3a; font-weight: 850; }

/* ----- Amiodarone multi-system toxicity map (interactive reveal) ----- */
/* Each organ system is a clickable card that expands to reveal the
   associated toxicity. Self-contained — driven by initCavClass3ToxMap.
   The mental model: "Amiodarone touches every organ system." */
.cav-c3-toxmap {
    margin-top: 14px;
    border: 1px solid rgba(239, 108, 0, 0.28);
    border-radius: 16px;
    background: #fffdfb;
    padding: 16px 16px 14px;
}
.cav-c3-toxmap__intro {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #2f3a47;
}
.cav-c3-toxmap__intro strong { color: var(--text); font-weight: 800; }
.cav-c3-toxmap__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
}
.cav-c3-tox {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.cav-c3-tox:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 108, 0, 0.45);
    box-shadow: 0 10px 22px rgba(239, 108, 0, 0.16);
}
.cav-c3-tox.is-open {
    border-color: rgba(239, 108, 0, 0.45);
    box-shadow: 0 4px 14px rgba(239, 108, 0, 0.10);
}
.cav-c3-tox.is-danger.is-open {
    border-color: rgba(229, 72, 77, 0.55);
    box-shadow: 0 4px 14px rgba(229, 72, 77, 0.12);
}
.cav-c3-tox__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.cav-c3-tox__icon { font-size: 21px; line-height: 1; }
.cav-c3-tox__organ { font-size: 14.5px; font-weight: 800; color: var(--text); }
.cav-c3-tox__danger-flag {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #d3403f;
    padding: 3px 8px;
    border-radius: 999px;
}
.cav-c3-tox__chevron {
    margin-left: auto;
    font-size: 13px;
    color: #8a93a0;
    transition: transform 0.18s ease;
}
.cav-c3-tox.is-danger .cav-c3-tox__chevron { margin-left: 8px; }
.cav-c3-tox.is-open .cav-c3-tox__chevron { transform: rotate(180deg); }
.cav-c3-tox__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.cav-c3-tox.is-open .cav-c3-tox__panel { max-height: 220px; }
.cav-c3-tox__panel-inner {
    margin: 0 14px;
    padding: 11px 0 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.55;
    color: #2f3a47;
    font-weight: 500;
}
.cav-c3-tox__panel-inner strong { color: var(--text); font-weight: 800; }
.cav-c3-toxmap__hint {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #2f3a47;
}
.cav-c3-toxmap__hint strong { color: var(--text); font-weight: 800; }
@media (max-width: 860px) {
    .cav-c3-toxmap__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .cav-c3-toxmap__grid { grid-template-columns: 1fr; }
}

/* Class 3 adverse-effect grid — 3 non-Amiodarone-vs-Amiodarone callout cards
   read best as a 3-up grid (matches the Class 2 AE grid treatment). */
.cav-c3-ae-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
    .cav-c3-ae-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .cav-c3-ae-grid { grid-template-columns: 1fr; }
}

.cav-c1a-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -8px;
}

/* Prominent intro / lead copy (dark, not grey) */
.cav-c1a-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #1c2530;
    font-weight: 500;
}
.cav-c1a-intro strong { color: var(--text); font-weight: 800; }
.cav-c1a-lead {
    margin: 0 0 2px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #2a3442;
    font-weight: 500;
}
.cav-c1a-lead strong { color: var(--text); font-weight: 800; }

/* ----- Section 1 — ventricular trace + Play button ----- */
/* Fill the section width (like every other card) instead of a narrow,
   centered box that leaves awkward gaps on the left and right. */
.cav-c1a-trace {
    margin-top: 16px;
}
.cav-c1a-trace .ap-trace {
    width: 100%;
    max-width: none;
}
.cav-c1a-legend { justify-content: center; margin-top: 16px; }

/* Play/Stop control inside a single trace header */
.ap-trace__headleft { display: flex; align-items: center; gap: 10px; }
.ap-trace__play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(10, 132, 255, 0.22);
    transition: background 0.16s ease, transform 0.1s ease;
}
.ap-trace__play:hover { background: var(--accent-strong); }
.ap-trace__play:active { transform: translateY(1px); }
.ap-trace__play.is-playing { background: #e5484d; box-shadow: 0 6px 14px rgba(229, 72, 77, 0.24); }
.ap-trace__play-icon { font-size: 10px; line-height: 1; }

/* ----- Section 2 — drug cards ----- */
/* Drop the red left-stripe for a clean blue bubble outline (matches the
   dashboard / vasculitis pill chrome); larger + bolder drug names. */
.cav-c1a-drug-card {
    border: 1px solid rgba(10, 132, 255, 0.30);
    border-radius: 16px;
}
.cav-c1a-drug-card .cav-pharm-drug-card__name {
    font-size: 20px;
    font-weight: 800;
}
.cav-c1a-drug-bullets { margin: 0; padding-left: 18px; }
.cav-c1a-drug-bullets li {
    margin-bottom: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}
.cav-c1a-drug-bullets li:last-child { margin-bottom: 0; }
.cav-c1a-drug-card .cav-pharm-drug-card__warn {
    background: rgba(229, 72, 77, 0.09);
    border-left-color: #e5484d;
    font-weight: 700;
}

/* ----- Section 3 — clinical use cards ----- */
.cav-c1a-use-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.cav-c1a-use-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    box-shadow: var(--shadow-md);
}
.cav-c1b-use-card--full {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
}
.cav-c1a-use-card__icon { font-size: 22px; line-height: 1; }
.cav-c1a-use-card__title { font-size: 16px; font-weight: 850; color: var(--text); line-height: 1.3; }
.cav-c1a-use-card__text { font-size: 13.5px; line-height: 1.55; color: #2f3a47; }
.cav-c1a-use-card__text strong { color: var(--text); font-weight: 800; }

/* ----- Section 4 — antimuscarinic spectrum widget ----- */
.cav-c1a-spectrum {
    margin: 18px 0 4px;
    padding: 18px 18px 20px;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.cav-c1a-spectrum__bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 52%, #e5484d 100%);
    margin: 10px 6px 30px;
}
.cav-c1a-spectrum__end {
    position: absolute;
    top: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475467;
}
.cav-c1a-spectrum__end--left { left: 0; }
.cav-c1a-spectrum__end--right { right: 0; }
.cav-c1a-spectrum__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.cav-c1a-spectrum__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 12px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.cav-c1a-spectrum__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #111318;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}
.cav-c1a-spectrum__drug { font-size: 14.5px; font-weight: 800; color: var(--text); }
.cav-c1a-spectrum__note {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475467;
}
.cav-c1a-spectrum__item:nth-child(1) .cav-c1a-spectrum__rank { background: #0f9d6e; }
.cav-c1a-spectrum__item:nth-child(2) .cav-c1a-spectrum__rank { background: #d98316; }
.cav-c1a-spectrum__item:nth-child(3) .cav-c1a-spectrum__rank { background: #d3403f; }

.cav-c1a-explainer {
    margin-top: 16px;
    padding: 16px 18px;
    background: rgba(10, 132, 255, 0.05);
    border: 1px solid rgba(10, 132, 255, 0.16);
    border-radius: var(--radius-md);
}
.cav-c1a-explainer__title {
    margin: 0 0 8px;
    font-size: 17.5px;
    font-weight: 850;
    color: var(--text);
}
.cav-c1a-explainer p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #2a3442;
}
.cav-c1a-explainer p:last-child { margin-bottom: 0; }
.cav-c1a-explainer strong { color: var(--text); font-weight: 800; }

/* ----- Section 5 — mechanism (figure + hero + tiles) ----- */
.cav-c1a-figure { margin: 6px 0 18px; }
.cav-c1a-figure img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}
.cav-c1a-figure { margin-inline: 0; }
.cav-c1a-figure__cap {
    max-width: 820px;
    margin: 10px auto 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}
.cav-c1a-mech-hero {
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(229, 72, 77, 0.08), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(229, 72, 77, 0.20);
}
.cav-c1a-mech-hero__tag {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b8323a;
}
.cav-c1a-mech-hero__title {
    font-size: 20px;
    font-weight: 850;
    color: var(--text);
    margin: 4px 0 8px;
}
.cav-c1a-mech-hero__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: #2a3442; }
.cav-c1a-mech-hero__body strong { color: var(--text); font-weight: 800; }
.cav-c1a-mech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.cav-c1a-mech-tile {
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.cav-c1a-mech-tile__icon { font-size: 22px; line-height: 1; }
.cav-c1a-mech-tile__title { font-size: 16px; font-weight: 850; color: var(--text); margin: 6px 0 4px; }
.cav-c1a-mech-tile__text { font-size: 13px; line-height: 1.55; color: #2f3a47; }
.cav-c1a-mech-tile__text strong { color: var(--text); font-weight: 800; }

/* ----- Section 6 — high-yield pearls table ----- */
.cav-c1a-pearls-card {
    background: linear-gradient(180deg, #fffdf5, #fffaf0);
    border: 1px solid rgba(245, 158, 11, 0.28);
}
.cav-c1a-pearls-label { color: #b45309 !important; }
.cav-c1a-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.30);
}
.cav-c1a-pearl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}
.cav-c1a-pearl-table th {
    text-align: left;
    padding: 11px 14px;
    background: #111318;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.cav-c1a-pearl-table td {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    color: var(--text);
    line-height: 1.5;
    vertical-align: top;
}
.cav-c1a-pearl-table td:first-child { white-space: nowrap; }
.cav-c1a-pearl-table tbody tr:nth-child(even) { background: #fdfaf2; }
.cav-c1a-pearl-table__classrow td { background: rgba(229, 72, 77, 0.08); }
.cav-c1a-pearl-table strong { font-weight: 800; }
.cav-c1a-pearls-foot {
    margin: 14px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-c1a-pearls-foot strong { font-weight: 800; }

/* ----- Section 7 — ECG card + pause control ----- */
.cav-c1a-ecg-card {
    margin-top: 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cav-c1a-ecg-controls { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.cav-c1a-ecg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: #111318;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.1s ease;
}
.cav-c1a-ecg-btn:hover { background: #000; }
.cav-c1a-ecg-btn:active { transform: translateY(1px); }
.cav-c1a-ecg-btn[aria-pressed="false"] { background: var(--accent); }
.cav-c1a-ecg-btn [data-icon] { font-size: 10px; line-height: 1; }
.cav-c1a-ecg-caption {
    margin: 14px 2px 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-c1a-ecg-caption strong { font-weight: 800; }

/* Lock It In placeholder: hide the empty progress counter + inert controls
   until questions exist. initTopicPractice() sets data-practice-initialized
   on the section, which reveals them. */
#cav-class1a-lock-it-in:not([data-practice-initialized="true"]) [data-practice-progress],
#cav-class1a-lock-it-in:not([data-practice-initialized="true"]) .ida-practice-card .ida-practice-actions {
    display: none;
}

@media (max-width: 760px) {
    .cav-c1a-use-grid,
    .cav-c1a-mech-grid,
    .cav-c1a-spectrum__row { grid-template-columns: 1fr; }

    /* Pearl table → stacked cards with labels on small screens */
    .cav-c1a-pearl-table thead { display: none; }
    .cav-c1a-pearl-table, .cav-c1a-pearl-table tbody, .cav-c1a-pearl-table tr, .cav-c1a-pearl-table td { display: block; width: 100%; }
    .cav-c1a-pearl-table tr { border-top: 2px solid rgba(245, 158, 11, 0.3); padding: 6px 0; }
    .cav-c1a-pearl-table td { border-top: none; padding: 5px 14px; }
    .cav-c1a-pearl-table td::before {
        content: attr(data-th);
        display: block;
        font-size: 10.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #b45309;
        margin-bottom: 2px;
    }
}

/* ============================================================
   CLASS 4 ANTIARRHYTHMICS — topic page
   Scoped to #cavClass4AntiarrhythmicsTopicContent. Reuses the
   Class 1a/1b chrome (trace, drug cards, mech tiles, use cards,
   AE cards, pearl table). Page-specific: the gingival-hyperplasia
   standout on the drug cards and the interactive "what drives the
   nodal AP" widget (an additive, self-contained element).
   ============================================================ */
#cavClass4AntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* Gingival-hyperplasia standout on the drug cards — a quirky, memorable
   buzzword callout (mirrors the Esmolol / Dronedarone standout pattern). */
.cav-c4-gingival {
    margin: 10px 0 2px;
    padding: 9px 12px;
    border-left: 4px solid #db2777;
    background: rgba(219, 39, 119, 0.09);
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #831843;
}
.cav-c4-gingival strong { color: #9d174d; }

/* Class 4 clinical-use grid — exactly 2 cards sit side by side (an even row),
   so neither is elongated. */
.cav-c4-use-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
    .cav-c4-use-grid { grid-template-columns: 1fr; }
}

/* Class 4 adverse-effect grid — 4 cards read best as a 2x2 grid. */
.cav-c4-ae-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
    .cav-c4-ae-grid { grid-template-columns: 1fr; }
}
.cav-c1b-ae-card--gingival {
    border-color: rgba(219, 39, 119, 0.32);
    background: rgba(219, 39, 119, 0.05);
}
.cav-c4-ae-badge--buzz { background: #db2777; }

/* ----- Class 4 — interactive "what drives the nodal action potential" ----- */
/* ONE nodal action potential with clickable phases; clicking reveals the
   driving ion/channel. The "Show where Class 4 acts" toggle highlights the
   Ca²⁺-dependent Phase 0 upstroke + Phase 4. Self-contained — driven by
   initCavClass4NodalWidget. Reuses the engine's nodal shape + phase colors. */
.cav-c4-nodal {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfdfe;
    padding: 16px 16px 14px;
}
.cav-c4-nodal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.cav-c4-nodal__title { font-size: 15px; font-weight: 850; color: var(--text); }
.cav-c4-nodal__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(10, 132, 255, 0.40);
    background: #0a84ff;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cav-c4-nodal__toggle:hover { background: #0968cc; }
.cav-c4-nodal__toggle:active { transform: scale(0.97); }
.cav-c4-nodal__toggle.is-on { background: #ef6c00; border-color: rgba(239, 108, 0, 0.45); }
.cav-c4-nodal__toggle.is-on:hover { background: #d35f00; }
.cav-c4-nodal__hint {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 600;
    color: #2f3a47;
}
.cav-c4-nodal__hint strong { color: var(--text); font-weight: 800; }
.cav-c4-nodal__stage {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 8px 10px;
}
.cav-c4-nodal__svg { width: 100%; height: auto; display: block; }

/* Clickable phase groups */
.cav-c4-phase { cursor: pointer; }
.cav-c4-phase__band { opacity: 0; transition: opacity 0.15s ease; }
.cav-c4-phase__ribbon { opacity: 0.55; transition: opacity 0.15s ease; }
.cav-c4-phase__num {
    font-size: 10px; font-weight: 800; fill: #fff;
    pointer-events: none;
}
.cav-c4-phase:hover .cav-c4-phase__band { opacity: 0.10; }
.cav-c4-phase:hover .cav-c4-phase__ribbon { opacity: 0.85; }
.cav-c4-phase:focus-visible { outline: none; }
.cav-c4-phase:focus-visible .cav-c4-phase__band { opacity: 0.12; }
.cav-c4-phase.is-selected .cav-c4-phase__band { opacity: 0.16; }
.cav-c4-phase.is-selected .cav-c4-phase__ribbon { opacity: 1; }
/* "Show where Class 4 acts" — pulse the calcium upstroke + Phase 4 */
.cav-c4-phase.is-class4 .cav-c4-phase__band { opacity: 0.18; }
.cav-c4-phase.is-class4 .cav-c4-phase__ribbon { opacity: 1; }
.cav-c4-phase.is-class4 .cav-c4-phase__band,
.cav-c4-phase.is-class4 .cav-c4-phase__ribbon { animation: cavC4Pulse 1.6s ease-in-out infinite; }
@keyframes cavC4Pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.18); } }

/* Readout panel below the trace */
.cav-c4-nodal__readout {
    margin-top: 12px;
    border: 1px solid rgba(10, 132, 255, 0.22);
    border-radius: 12px;
    background: rgba(10, 132, 255, 0.045);
    padding: 12px 14px;
}
.cav-c4-nodal__readout-tag {
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1f4e8c;
    margin-bottom: 4px;
}
.cav-c4-nodal__readout-ion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 850;
    color: var(--text);
    margin-bottom: 5px;
}
.cav-c4-nodal__readout-flag {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #ef6c00;
    padding: 3px 9px;
    border-radius: 999px;
}
.cav-c4-nodal__readout-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    color: #2f3a47;
}
.cav-c4-nodal__readout-body strong { color: var(--text); font-weight: 800; }
@media (max-width: 720px) {
    .cav-c4-nodal__toggle { margin-left: 0; }
}

/* ============================================================
   MISCELLANEOUS ANTIARRHYTHMICS — topic page
   Scoped to #cavMiscAntiarrhythmicsTopicContent. Reuses the
   Class 1a chrome (.cav-c1a-* lead / mech-hero / mech-tile /
   use-card / explainer / pearl table). Page-specific: the
   Digoxin mechanism cascade (image + canvas overlay), the
   Digoxin–K⁺ competition toggle, the Adenosine half-life widget,
   and the Digoxin toxicity / antidote card. No AP engine trace.
   ============================================================ */
#cavMiscAntiarrhythmicsTopicContent {
    display: grid;
    gap: 26px;
}

/* --- WIDGET 1 — Digoxin mechanism cascade --- */
.cav-misc-cascade {
    margin: 6px 0 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfe;
    overflow: hidden;
}
.cav-misc-cascade__stage {
    position: relative;
    width: 100%;
    line-height: 0;
    background: #f4f7fb;
    overflow: hidden;
}
.cav-misc-cascade__img {
    display: block;
    width: 100%;
    height: auto;
}
/* SPOTLIGHT — a dark mask over the whole image with a soft transparent hole
   at the active anchor. The huge box-shadow spread is the mask; the stage's
   overflow:hidden clips it to the image. left/top (set in JS) + transition
   make the spotlight glide to the next structure. */
.cav-misc-cascade__spotlight {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 118px;
    margin: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 46px 9999px rgba(7, 11, 20, 0.62);
    pointer-events: none;
    z-index: 3;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulsing orange highlight that glides with the spotlight and draws the eye. */
.cav-misc-cascade__pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 28px 8px rgba(239, 108, 0, 0.45);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cav-misc-cascade__pulse::before,
.cav-misc-cascade__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(239, 108, 0, 1);
    box-shadow: 0 0 22px rgba(239, 108, 0, 0.75), inset 0 0 16px rgba(239, 108, 0, 0.45);
    animation: cav-misc-cascade-pulse 1.6s ease-out infinite;
}
.cav-misc-cascade__pulse::after { animation-delay: 0.8s; }
@keyframes cav-misc-cascade-pulse {
    0%   { transform: scale(0.5);  opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Floating speech bubble — the primary instruction, anchored beside the
   structure. JS sets left/top to the anchor; the transform offsets the box to
   the side and the ::after draws the tail pointing back at the molecule. */
.cav-misc-cascade__bubble {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    max-width: min(264px, 44%);
    padding: 13px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(239, 108, 0, 0.40);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.26);
    font-size: 16.5px;
    font-weight: 750;
    line-height: 1.4;
    color: var(--text);
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cav-misc-cascade__bubble strong { font-weight: 850; color: #ef6c00; }
.cav-misc-cascade__bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 10px solid transparent;
}
.cav-misc-cascade__bubble--right { transform: translate(38px, -50%); }
.cav-misc-cascade__bubble--right::after { left: -19px; border-right-color: #ffffff; }
.cav-misc-cascade__bubble--left  { transform: translate(calc(-100% - 38px), -50%); }
.cav-misc-cascade__bubble--left::after { right: -19px; border-left-color: #ffffff; }

@media (max-width: 560px) {
    .cav-misc-cascade__bubble { max-width: min(200px, 58%); font-size: 14px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .cav-misc-cascade__spotlight,
    .cav-misc-cascade__pulse,
    .cav-misc-cascade__bubble { transition: none; }
    .cav-misc-cascade__pulse::before,
    .cav-misc-cascade__pulse::after { animation: none; opacity: 0.85; transform: scale(1); }
}
.cav-misc-cascade__bar {
    padding: 16px 18px 14px;
    border-top: 1px solid var(--line);
}
.cav-misc-cascade__step {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ef6c00;
}
.cav-misc-cascade__controls {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cav-misc-cascade__btn {
    border: 1px solid rgba(10, 132, 255, 0.35);
    background: rgba(10, 132, 255, 0.08);
    color: #0a4fa0;
    font-size: 13.5px;
    font-weight: 800;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cav-misc-cascade__btn:hover { background: rgba(10, 132, 255, 0.16); }
.cav-misc-cascade__btn:active { transform: translateY(1px); }
.cav-misc-cascade__btn--ghost {
    border-color: var(--line);
    background: #fff;
    color: var(--muted, #5a6577);
}
.cav-misc-cascade__btn--ghost:hover { background: #f4f7fb; }
.cav-misc-cascade__btn:disabled { opacity: 0.4; cursor: default; }
.cav-misc-cascade__legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 0 18px 16px;
}
.cav-misc-cascade__key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.cav-misc-cascade__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* --- WIDGET 2 — Digoxin–K⁺ competition --- */
/* Section divider + prominent title so the student registers a NEW concept. */
.cav-misc-kcomp-head {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid rgba(239, 108, 0, 0.22);
}
#cavMiscAntiarrhythmicsTopicContent .cav-misc-kcomp__title {
    margin: 6px 0 8px;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Reusable prominent sub-section header so students clearly register a new
   concept (divider + big bold title), plus a 2-up variant of the use-card grid
   so two-card sections sit side by side instead of one card stretching wide. */
.cav-misc-sechead {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid rgba(10, 132, 255, 0.22);
}
#cavMiscAntiarrhythmicsTopicContent .cav-misc-sechead__title {
    margin: 6px 0 12px;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--text);
}
@media (min-width: 561px) {
    .cav-c1a-use-grid.cav-misc-use-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Drug accordion — a summary-card header you click to drop down the full drug. */
#cavMiscAntiarrhythmicsTopicContent .cav-misc-drug { padding: 0; overflow: hidden; }
.cav-misc-drug__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.15s ease;
}
.cav-misc-drug__head:hover { background: rgba(10, 132, 255, 0.045); }
.cav-misc-drug__icon { flex-shrink: 0; font-size: 24px; line-height: 1; }
.cav-misc-drug__name { flex-shrink: 0; font-size: 20px; font-weight: 850; color: var(--text); }
.cav-misc-drug__sum { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--muted, #5a6577); }
.cav-misc-drug__chev { flex-shrink: 0; font-size: 14px; color: var(--muted, #5a6577); transition: transform 0.25s ease; }
.cav-misc-drug.is-open .cav-misc-drug__chev { transform: rotate(180deg); }
.cav-misc-drug.is-open .cav-misc-drug__head { border-bottom: 1px solid var(--line); }
.cav-misc-drug__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.cav-misc-drug.is-open .cav-misc-drug__body { grid-template-rows: 1fr; }
.cav-misc-drug__inner { overflow: hidden; min-height: 0; }
.cav-misc-drug__pad { padding: 14px 22px 18px; }
@media (max-width: 560px) {
    .cav-misc-drug__sum { display: none; }
    .cav-misc-drug__pad { padding: 12px 16px 16px; }
}
.cav-misc-kcomp {
    margin: 12px 0 8px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfe;
}

/* three-state toggle buttons */
.cav-misc-kcomp__btns { display: flex; gap: 8px; margin-bottom: 18px; }
.cav-misc-kcomp__btn {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--muted, #5a6577);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cav-misc-kcomp__btn:hover { border-color: rgba(239, 108, 0, 0.5); color: var(--text); }
.cav-misc-kcomp__btn.is-active {
    border-color: #ef6c00;
    background: #ef6c00;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 108, 0, 0.28);
}

/* the pump / binding-site stage — the winner docks at the centre slot */
.cav-misc-kcomp__pump {
    position: relative;
    height: 152px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #f5f8fc 0%, #e8eef7 100%);
    overflow: hidden;
}
.cav-misc-kcomp__pump-tag {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted, #5a6577);
    white-space: nowrap;
}
.cav-misc-kcomp__slot {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 138px;
    height: 92px;
    border: 2px solid rgba(100, 116, 139, 0.4);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    background: #ffffff;
    box-shadow: inset 0 6px 16px rgba(15, 23, 42, 0.06);
}
.cav-misc-kcomp__mol {
    position: absolute;
    bottom: 20px;
    left: 50%;
    padding: 9px 17px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: transform 0.45s cubic-bezier(0.34, 1.28, 0.5, 1), opacity 0.4s ease, box-shadow 0.4s ease;
}
.cav-misc-kcomp__mol--dig { background: #ef6c00; z-index: 2; }
.cav-misc-kcomp__mol--k   { background: #10b981; z-index: 2; }

/* state choreography: bound = docked at the slot + glow; loser = shoved aside + faded */
.cav-misc-kcomp__pump[data-state="normal"] .cav-misc-kcomp__mol--dig { transform: translateX(calc(-50% - 56px)); opacity: 0.92; }
.cav-misc-kcomp__pump[data-state="normal"] .cav-misc-kcomp__mol--k   { transform: translateX(calc(-50% + 56px)); opacity: 0.92; }
.cav-misc-kcomp__pump[data-state="hypo"]  .cav-misc-kcomp__mol--dig { transform: translateX(-50%) scale(1.14); opacity: 1; box-shadow: 0 0 0 4px rgba(239, 108, 0, 0.25), 0 8px 20px rgba(239, 108, 0, 0.4); }
.cav-misc-kcomp__pump[data-state="hypo"]  .cav-misc-kcomp__mol--k   { transform: translateX(calc(-50% + 158px)); opacity: 0.18; }
.cav-misc-kcomp__pump[data-state="hyper"] .cav-misc-kcomp__mol--k   { transform: translateX(-50%) scale(1.14); opacity: 1; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25), 0 8px 20px rgba(16, 185, 129, 0.4); }
.cav-misc-kcomp__pump[data-state="hyper"] .cav-misc-kcomp__mol--dig { transform: translateX(calc(-50% - 158px)); opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {
    .cav-misc-kcomp__mol { transition: opacity 0.2s ease; }
}
.cav-misc-kcomp__readout {
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cav-misc-kcomp__readout.is-toxic {
    border-color: rgba(229, 72, 77, 0.45);
    background: rgba(229, 72, 77, 0.06);
}
.cav-misc-kcomp__state {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.cav-misc-kcomp__consequence {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}
.cav-misc-kcomp__consequence strong { font-weight: 800; }

/* --- Digoxin toxicity / antidote card --- */
.cav-misc-tox-card {
    margin: 4px 0 8px;
    border: 1px solid rgba(229, 72, 77, 0.32);
    border-radius: 16px;
    background: rgba(229, 72, 77, 0.045);
    padding: 18px 20px 20px;
}
.cav-misc-tox-card__head {
    font-size: 17px;
    font-weight: 850;
    color: #b42318;
    margin-bottom: 14px;
}
.cav-misc-tox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.cav-misc-tox-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}
.cav-misc-tox-item__icon { font-size: 22px; line-height: 1; }
.cav-misc-tox-item__title {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 850;
    color: var(--text);
}
.cav-misc-tox-item__text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
}
.cav-misc-tox-item__text strong { font-weight: 800; }
.cav-misc-antidote {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 12px;
    background: #11324f;
    color: #fff;
}
.cav-misc-antidote__pill {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    background: #10b981;
    color: #06281c;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.cav-misc-antidote__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}
.cav-misc-antidote__text strong { font-weight: 800; color: #fff; }
.cav-misc-antidote__text .cav-term { color: #fff; }

/* --- WIDGET 3 — Adenosine AV-node + half-life --- */
.cav-misc-aden {
    max-width: 420px;
    margin: 8px auto 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfe;
    overflow: hidden;
}
/* SVG 3-state diagram — mechanism over animation. State is driven by
   data-state on the svg; CSS does all the colour/visibility changes. */
.cav-misc-aden__svg {
    display: block;
    width: 100%;
    height: auto;
    background: radial-gradient(120% 130% at 50% 0%, #112338 0%, #0b1726 100%);
}
.cav-misc-aden__svg text { font-family: system-ui, -apple-system, sans-serif; }

/* Step-1 spotlight veil — dims everything except the reentry loop */
.aden-veil { fill: #0a1422; opacity: 0; transition: opacity 0.5s ease; }
.cav-misc-aden__svg[data-state="1"] .aden-veil { opacity: 0.62; }

.aden-loop { fill: none; stroke: #e5484d; stroke-width: 10; transition: stroke 0.5s ease, opacity 0.5s ease; }
.aden-loop-flow {
    fill: none; stroke: #ffb3b7; stroke-width: 5;
    stroke-dasharray: 14 30; stroke-linecap: round;
    opacity: 0; transition: opacity 0.4s ease;
    animation: aden-flow 1.1s linear infinite;
}
@keyframes aden-flow { to { stroke-dashoffset: -44; } }

.aden-node { fill: #475569; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; transition: fill 0.5s ease, filter 0.4s ease; }

/* one bold step label, shown next to the structure it describes */
.aden-lbl { opacity: 0; transition: opacity 0.4s ease; }
.aden-lbl rect { fill: rgba(8, 15, 26, 0.82); }
.aden-lbl__big { font-size: 16px; font-weight: 850; fill: #ffffff; }
.aden-lbl__sub { font-size: 12.5px; font-weight: 800; fill: rgba(255, 255, 255, 0.92); }

/* STATE 1 — the problem: SVT reentry loop (spotlit) */
.cav-misc-aden__svg[data-state="1"] .aden-loop-flow { opacity: 0.95; }
.cav-misc-aden__svg[data-state="1"] .aden-lbl--1 { opacity: 1; }
/* STATE 2 — the intervention: adenosine glows the AV node red, loop still live */
.cav-misc-aden__svg[data-state="2"] .aden-loop-flow { opacity: 0.95; }
.cav-misc-aden__svg[data-state="2"] .aden-node { fill: #e5484d; filter: drop-shadow(0 0 13px rgba(229, 72, 77, 0.95)); }
.cav-misc-aden__svg[data-state="2"] .aden-lbl--2 { opacity: 1; }
/* STATE 3 — the result: node blocked (grey), loop vanishes */
.cav-misc-aden__svg[data-state="3"] .aden-loop { stroke: #6b7280; opacity: 0.08; }
.cav-misc-aden__svg[data-state="3"] .aden-node { fill: #6b7280; }
.cav-misc-aden__svg[data-state="3"] .aden-lbl--3 { opacity: 1; }

.cav-misc-aden__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
}
.cav-misc-aden__step {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9b5de5;
}
.cav-misc-aden__controls { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .aden-loop-flow { animation: none; } }

@media (max-width: 720px) {
    .cav-misc-tox-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ANTI-ANGINAL DRUGS — foundation/hub page
   Prefix: .cav-angina-*  (scoped under #cavAntianginalsTopicContent
   for the wrapper grid + intro typography). Matches the house
   tokens used by the antiarrhythmics foundation page.
   ============================================================ */
#cavAntianginalsTopicContent {
    display: grid;
    gap: 34px;
}

.cav-angina-topbar {
    display: flex;
    justify-content: flex-end;
}

#cavAntianginalsTopicContent .cav-angina-intro {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
}
#cavAntianginalsTopicContent .cav-angina-intro strong {
    color: var(--text);
    font-weight: 800;
}
#cavAntianginalsTopicContent .cav-angina-intro--sub {
    font-size: 15px;
    margin-top: 2px;
}

/* ---------- Hero Dashboard — the "rules of the game" widget ----------
   The intro becomes a prominent, dark-mode-styled anchor with a bold blue
   outline. On hover it lifts and gains a glowing blue halo so it reads as
   the high-end centerpiece before the student looks at the bars. */
#cavAntianginalsTopicContent .cav-angina-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    /* Clean light card — no left rail. No overflow:hidden so the intro's
       .cav-term tooltips can escape upward. */
}
#cavAntianginalsTopicContent .cav-angina-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow:
        0 18px 44px rgba(10, 132, 255, 0.22),
        0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavAntianginalsTopicContent .cav-angina-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}

/* ---------- PART 1 — Supply & Demand interactive model ---------- */
.cav-angina-model {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Drug-class button row (single-select) */
.cav-angina-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.cav-angina-btn {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f1f5fb;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
.cav-angina-btn:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); }
.cav-angina-btn.is-active {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    border-color: var(--accent-strong);
    color: #fff;
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.28);
}
.cav-angina-btn--reset {
    margin-left: auto;
    background: #fff;
    border-style: dashed;
    color: var(--muted-strong);
}
.cav-angina-btn--reset.is-active {
    background: #475569;
    border-color: #475569;
    border-style: solid;
    color: #fff;
}

/* Stage: demand | balance | supply */
.cav-angina-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: stretch;
}
.cav-angina-col {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfe;
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cav-angina-col--demand { border-top: 4px solid #e5484d; }
.cav-angina-col--supply { border-top: 4px solid #10b981; }
.cav-angina-col__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
}
.cav-angina-col__title strong { font-weight: 850; }
.cav-angina-col__title--demand strong { color: #c5363b; }
.cav-angina-col__title--supply strong { color: #0c8f63; }

.cav-angina-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cav-angina-col--supply .cav-angina-bars {
    justify-content: center;
    flex: 1;
}

/* One determinant level meter */
.cav-angina-bar { display: flex; flex-direction: column; gap: 6px; }
.cav-angina-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.cav-angina-bar__label { font-size: 13.5px; font-weight: 800; color: var(--text); }
.cav-angina-bar__tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    min-height: 15px;
    transition: color 0.16s ease;
}
.cav-angina-bar__tag--down { color: #0c8f63; }
.cav-angina-bar__tag--up { color: #c5363b; }

.cav-angina-bar__track {
    height: 16px;
    border-radius: 999px;
    background: #e6ebf3;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: stretch;
}
/* Horizontal level meter — JS sets the fill WIDTH; the ~0.4s animated
   level change runs on width. */
.cav-angina-bar__fill {
    height: 100%;
    width: 55%;
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.cav-angina-bar__fill--demand { background: linear-gradient(90deg, #f0a3a6, #e5484d); }
.cav-angina-bar__fill--supply { background: linear-gradient(90deg, #7fd9b9, #10b981); }
.cav-angina-bar__fill.is-down { background: linear-gradient(90deg, #8fd6bb, #19a974); }
.cav-angina-bar__fill.is-up { background: linear-gradient(90deg, #f3b0b3, #e5484d); }
.cav-angina-bar__note {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted-strong);
    font-weight: 600;
}

/* ---------- Lever highlight ----------
   When a drug is selected, the exact determinants it moves are wrapped in a
   bright yellow card + glow that pulses once, then settles into a steady ring.
   This bridges "I clicked a button" → "THIS lever is what moved." */
.cav-angina-bar.is-lever {
    position: relative;
    margin: -6px -10px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(250, 204, 21, 0.12);
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.85), 0 6px 18px rgba(234, 179, 8, 0.28);
    animation: cavAnginaLeverPulse 0.7s cubic-bezier(0.34, 1.2, 0.4, 1) 1;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cav-angina-bar.is-lever .cav-angina-bar__label {
    color: #92600a;
}
.cav-angina-bar.is-lever .cav-term {
    color: #92600a;
    border-bottom-color: rgba(146, 96, 10, 0.55);
}
@keyframes cavAnginaLeverPulse {
    0%   { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.9), 0 6px 18px rgba(234, 179, 8, 0); }
    45%  { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0), 0 6px 22px rgba(234, 179, 8, 0.5); }
    100% { box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.85), 0 6px 18px rgba(234, 179, 8, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
    .cav-angina-bar.is-lever { animation: none; }
    .cav-angina-balance__chip.is-ischemia::before { animation: none; }
}

/* Center balance */
.cav-angina-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 150px;
    padding: 8px 4px;
}
.cav-angina-balance__beamwrap {
    position: relative;
    width: 120px;
    height: 78px;
}
.cav-angina-balance__pivot {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 58px solid #cbd5e1;
}
.cav-angina-balance__beam {
    position: absolute;
    left: 50%;
    top: 12px;
    width: 120px;
    height: 10px;
    margin-left: -60px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e5484d, #94a3b8 50%, #10b981);
    transform-origin: center center;
    transform: rotate(13deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.4, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cav-angina-balance__pan {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
    padding: 2px 6px;
    border-radius: 6px;
    transform: translateY(16px);
    white-space: nowrap;
}
.cav-angina-balance__status { text-align: center; }
.cav-angina-balance__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1.3;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
/* A small leading dot reinforces the state at a glance. */
.cav-angina-balance__chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
/* ISCHEMIA — high-contrast red alert (solid fill, glowing ring, pulsing dot). */
.cav-angina-balance__chip.is-ischemia {
    background: #d92d2d;
    color: #fff;
    border: 1px solid #b91c1c;
    box-shadow: 0 4px 14px rgba(217, 45, 45, 0.4), 0 0 0 4px rgba(217, 45, 45, 0.14);
}
.cav-angina-balance__chip.is-ischemia::before {
    animation: cavAnginaAlertPulse 1.1s ease-in-out infinite;
}
/* IMPROVING — amber transitional state. */
.cav-angina-balance__chip.is-improving {
    background: #f59e0b;
    color: #fff;
    border: 1px solid #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.32);
}
/* RELIEF — clean, confident green. */
.cav-angina-balance__chip.is-balanced {
    background: #10b981;
    color: #fff;
    border: 1px solid #0c8f63;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.36);
}
@keyframes cavAnginaAlertPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.7); }
}

/* Separate metabolic indicator (ranolazine only) */
.cav-angina-metab {
    border: 1px dashed rgba(124, 58, 237, 0.4);
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.05);
    padding: 14px 18px 16px;
    opacity: 0.55;
    transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cav-angina-metab.is-active {
    opacity: 1;
    border-style: solid;
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.09);
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.14);
}
.cav-angina-metab__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-angina-metab__label { font-size: 14px; font-weight: 850; color: var(--text); }
.cav-angina-metab__sub { font-size: 12px; font-weight: 600; color: #7c3aed; }
.cav-angina-metab__tag { font-size: 12.5px; font-weight: 800; color: #6d28d9; min-height: 15px; }
.cav-angina-metab__fill { background: linear-gradient(90deg, #c4b5fd, #7c3aed) !important; }
.cav-angina-metab__hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--text);
}
.cav-angina-metab__hint strong { font-weight: 850; }

/* Caption */
.cav-angina-caption {
    border-radius: 14px;
    padding: 15px 18px;
    background: #f1f5fb;
    border-left: 4px solid #94a3b8;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--text);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cav-angina-caption.is-relief {
    background: rgba(10, 132, 255, 0.06);
    border-left-color: var(--accent);
}

/* ---------- PART 2 — Navigation cards ---------- */
.cav-angina-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.cav-angina-nav-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 6px solid #cbd5e1;
    background: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-angina-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.cav-angina-nav-card--nitrate { border-left-color: #0a84ff; }
.cav-angina-nav-card--beta { border-left-color: #10b981; }
.cav-angina-nav-card--ccb { border-left-color: #f59e0b; }
.cav-angina-nav-card--rano { border-left-color: #7c3aed; }
.cav-angina-nav-card--special { border-left-color: #52607a; }
.cav-angina-nav-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cav-angina-nav-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
}
.cav-angina-lever {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}
.cav-angina-lever--demand { background: #c5363b; }
.cav-angina-lever--metabolic { background: #7c3aed; }
.cav-angina-lever--special { background: #475569; }
.cav-angina-nav-summary {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-angina-nav-summary strong { font-weight: 800; color: var(--text); }
.cav-angina-nav-go {
    align-self: flex-start;
    margin-top: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(10, 132, 255, 0.3);
    background: rgba(10, 132, 255, 0.06);
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.cav-angina-nav-go:hover {
    background: rgba(10, 132, 255, 0.12);
    border-color: var(--accent);
}

@media (max-width: 860px) {
    .cav-angina-stage { grid-template-columns: 1fr; }
    .cav-angina-balance { order: 3; flex-direction: row; min-width: 0; }
    .cav-angina-nav-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TREATMENT OF HEART FAILURE — foundation/hub page
   Prefix: .cav-hf-*  (scoped under #cavHeartFailureTopicContent for
   the wrapper grid + intro typography). Mirrors the Anti-Anginal
   foundation page conventions: light blue-bordered hover hero, a
   centerpiece interactive, a nav-card grid, and a takeaway callout.
   Centerpiece = the code-built Frank-Starling SVG curve.
   ============================================================ */
#cavHeartFailureTopicContent {
    display: grid;
    gap: 26px;
}

.cav-hf-topbar {
    display: flex;
    justify-content: flex-end;
}

#cavHeartFailureTopicContent .cav-hf-intro {
    margin: 0;
    color: var(--text);
    font-size: 17.5px;
    line-height: 1.6;
    font-weight: 500;
}
#cavHeartFailureTopicContent .cav-hf-intro strong {
    color: var(--text);
    font-weight: 800;
}
#cavHeartFailureTopicContent .cav-hf-intro--sub {
    font-size: 15.5px;
    line-height: 1.66;
    margin-top: 10px;
}

/* ---------- Hero — the "rules of the game" widget ----------
   Clean light card, dark text, bold blue outline; lifts + glows on
   hover. No left rail, no dark fill, no overflow:hidden (so the
   intro's .cav-term tooltips can escape upward). */
#cavHeartFailureTopicContent .cav-hf-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavHeartFailureTopicContent .cav-hf-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow:
        0 18px 44px rgba(10, 132, 255, 0.22),
        0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavHeartFailureTopicContent .cav-hf-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}

/* ---------- PART 2 — Frank-Starling interactive ---------- */
.cav-hf-model {
    margin-top: 20px;
}
.cav-hf-widget {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Drug buttons (single-select). */
.cav-hf-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cav-hf-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f1f5fb;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
.cav-hf-btn:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); }
.cav-hf-btn--vaso.is-active {
    background: linear-gradient(180deg, #0a84ff, #0768d6);
    border-color: #0768d6;
    color: #fff;
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.30);
}
.cav-hf-btn--ino.is-active {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-color: #d97706;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.30);
}
.cav-hf-btn--both.is-active {
    background: linear-gradient(180deg, #7c3aed, #6025c5);
    border-color: #6025c5;
    color: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.30);
}
.cav-hf-btn--reset {
    margin-left: auto;
    background: #fff;
    border-style: dashed;
    color: var(--muted-strong);
}
.cav-hf-btn--reset.is-active {
    background: #475569;
    border-color: #475569;
    border-style: solid;
    color: #fff;
}

/* ---- The graph ---- */
/* Kept deliberately COMPACT — capped width (centered) + capped height so the
   figure sits comfortably within a normal viewport, consistent with the
   other platform interactives, rather than dominating the page. Because the
   SVG uses a fixed user-space viewBox, shrinking the rendered box scales all
   label fonts down proportionally while staying crisp. */
/* Graph (left) + caption box (right) side-by-side to save vertical space. */
.cav-hf-stage {
    display: flex;
    align-items: stretch;
    gap: 18px;
}
.cav-hf-stage .cav-hf-graphwrap { margin: 0; flex: 1 1 auto; }
.cav-hf-stage .cav-fs-caption {
    flex: 0 0 400px;
    align-self: center;
}
@media (max-width: 720px) {
    .cav-hf-stage { flex-direction: column; }
    .cav-hf-stage .cav-fs-caption { flex-basis: auto; }
}
.cav-hf-graphwrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    padding: 8px 10px 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.cav-fs-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
}

/* Background zones (clinical meaning of the axes). */
.cav-fs-zone--goal {
    fill: rgba(16, 185, 129, 0.10);
    stroke: rgba(16, 185, 129, 0.30);
    stroke-dasharray: 4 4;
}
.cav-fs-zone--congestion {
    fill: rgba(229, 72, 77, 0.07);
}
.cav-fs-zonelabel {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cav-fs-zonelabel--goal { fill: #0c7a52; }
.cav-fs-zonelabel--congestion { fill: #b3322f; text-anchor: end; }
.cav-fs-zonelabel--low { fill: #8a6d3b; font-weight: 700; font-size: 12.5px; text-anchor: end; }

/* Axes + arrowheads. */
.cav-fs-axis { stroke: #334155; stroke-width: 2.2; }
.cav-fs-axis-arrow { fill: #334155; }
.cav-fs-axistitle {
    fill: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-anchor: middle;
}
.cav-fs-axissub {
    fill: #475569;
    font-size: 12.5px;
    font-weight: 600;
    text-anchor: middle;
}

/* Curves. */
.cav-fs-curve { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cav-fs-curve--normal { stroke: #10b981; }
.cav-fs-curve--failing { stroke: #2563eb; }   /* depressed middle curve — distinct blue */
.cav-fs-curve--shock {                         /* bottom curve — faint / muted red */
    stroke: #e5484d;
    stroke-width: 2.8;
    opacity: 0.42;
}
.cav-fs-curve--inotrope {
    stroke: #f59e0b;
    stroke-dasharray: 8 6;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.cav-fs-curve--inotrope.is-on { opacity: 1; }

.cav-fs-curvelabel { font-size: 13px; font-weight: 800; text-anchor: end; }
.cav-fs-curvelabel--normal { fill: #0c7a52; }
.cav-fs-curvelabel--failing { fill: #1d4ed8; }            /* matches the blue depressed curve */
.cav-fs-curvelabel--shock { fill: #b3322f; opacity: 0.78; }
.cav-fs-curvelabel--inotrope {
    fill: #b06a00;
    text-anchor: start;   /* top-strip, left-anchored (overrides base end-anchor) */
    opacity: 0;
    transition: opacity 0.45s ease;
}
.cav-fs-curvelabel--inotrope.is-on { opacity: 1; }

/* Combined-therapy GUIDE ARC (textbook grey dashed sweep B -> A). Always
   present as a faint reference so the resting figure resembles the textbook;
   brightened (.is-on) when "Give Both" lands the operating point at A. */
.cav-fs-guide {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2.4;
    stroke-dasharray: 6 5;
    stroke-linecap: round;
    opacity: 0.45;
    transition: opacity 0.4s ease, stroke 0.4s ease, stroke-width 0.4s ease;
}
.cav-fs-guide.is-on {
    stroke: #64748b;
    stroke-width: 3;
    opacity: 0.95;
}
.cav-fs-guide__head {
    fill: #94a3b8;
    opacity: 0.45;
    transition: opacity 0.4s ease, fill 0.4s ease;
}
.cav-fs-guide__head.is-on {
    fill: #64748b;
    opacity: 0.95;
}

/* The operating point — large, prominent, animated. */
.cav-fs-op { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.cav-fs-op__halo {
    fill: rgba(124, 58, 237, 0.18);
    transition: fill 0.4s ease;
}
.cav-fs-op__dot {
    fill: #7c3aed;
    stroke: #ffffff;
    stroke-width: 3;
    transition: fill 0.4s ease;
}
.cav-fs-op__dot--vaso { fill: #0a84ff; }
.cav-fs-op__dot--ino { fill: #f59e0b; }
.cav-fs-op__dot--both { fill: #7c3aed; }
.cav-fs-op__labelwrap { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.cav-fs-op__labelbox {
    fill: #1e293b;
    opacity: 0.95;
}
.cav-fs-op__labeltext {
    fill: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

/* Motion-direction arrow (left for vasodilator, up for inotrope). */
.cav-fs-move { opacity: 0; transition: opacity 0.3s ease; }
.cav-fs-move.is-on { opacity: 1; }
.cav-fs-move__line { stroke-width: 2.6; stroke-dasharray: 6 5; }
.cav-fs-move--vaso .cav-fs-move__line { stroke: #0a84ff; }
.cav-fs-move--vaso .cav-fs-move__head { fill: #0a84ff; }
.cav-fs-move--vaso .cav-fs-move__text { fill: #0768d6; }
.cav-fs-move--ino .cav-fs-move__line { stroke: #d97706; }
.cav-fs-move--ino .cav-fs-move__head { fill: #d97706; }
.cav-fs-move--ino .cav-fs-move__text { fill: #b06a00; }
.cav-fs-move--both .cav-fs-move__line { stroke: #7c3aed; }
.cav-fs-move--both .cav-fs-move__head { fill: #7c3aed; }
.cav-fs-move--both .cav-fs-move__text { fill: #6025c5; }
.cav-fs-move__text {
    font-size: 12.5px;
    font-weight: 800;
    text-anchor: middle;
}

/* Caption — dark, prominent. (JS emits .cav-fs-caption with is-vaso /
   is-ino state classes.) */
.cav-fs-caption {
    margin: 0;
    padding: 16px 18px;
    border-radius: 12px;
    border-left: 4px solid #cbd5e1;
    background: #f6f8fc;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 500;
    color: var(--text);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cav-fs-caption strong { font-weight: 800; color: var(--text); }
.cav-fs-caption.is-vaso { background: rgba(10, 132, 255, 0.06); border-left-color: #0a84ff; }
.cav-fs-caption.is-ino { background: rgba(245, 158, 11, 0.08); border-left-color: #f59e0b; }
.cav-fs-caption.is-both { background: rgba(124, 58, 237, 0.07); border-left-color: #7c3aed; }
.cav-fs-cap { font-weight: 800; }
.cav-fs-cap--vaso { color: #0768d6; }
.cav-fs-cap--ino { color: #b06a00; }

/* Two-strategy contrast summary. */
.cav-hf-contrast {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.cav-hf-contrast__col {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-top: 4px solid #cbd5e1;
    background: #fff;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.cav-hf-contrast__col--vaso { border-top-color: #0a84ff; }
.cav-hf-contrast__col--ino { border-top-color: #f59e0b; }
.cav-hf-contrast.is-vaso .cav-hf-contrast__col--vaso,
.cav-hf-contrast.is-ino .cav-hf-contrast__col--ino {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}
.cav-hf-contrast.is-vaso .cav-hf-contrast__col--vaso { border-color: rgba(10, 132, 255, 0.45); }
.cav-hf-contrast.is-ino .cav-hf-contrast__col--ino { border-color: rgba(245, 158, 11, 0.5); }
.cav-hf-contrast__head {
    font-size: 14.5px;
    font-weight: 850;
    color: var(--text);
    margin-bottom: 6px;
}
.cav-hf-contrast__col--vaso .cav-hf-contrast__head { color: #0768d6; }
.cav-hf-contrast__col--ino .cav-hf-contrast__head { color: #b06a00; }
.cav-hf-contrast__body {
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 500;
    color: var(--text);
}
.cav-hf-contrast__body strong { font-weight: 800; }

/* ---------- PART 3 — Navigation cards ---------- */
.cav-hf-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.cav-hf-nav-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 6px solid #cbd5e1;
    background: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-hf-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.cav-hf-nav-card--raas { border-left-color: #0a84ff; }
.cav-hf-nav-card--beta { border-left-color: #10b981; }
.cav-hf-nav-card--diuretic { border-left-color: #14b8a6; }
.cav-hf-nav-card--vaso { border-left-color: #7c3aed; }
.cav-hf-nav-card--inotrope { border-left-color: #e5484d; }
.cav-hf-nav-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cav-hf-nav-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
}
.cav-hf-benefit {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}
.cav-hf-benefit--mortality { background: #0c7a52; }
.cav-hf-benefit--mixed { background: #475569; }
.cav-hf-benefit--symptom { background: #b3322f; }
.cav-hf-nav-summary {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-hf-nav-summary strong { font-weight: 800; color: var(--text); }
.cav-hf-nav-go {
    align-self: flex-start;
    margin-top: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(10, 132, 255, 0.3);
    background: rgba(10, 132, 255, 0.06);
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.cav-hf-nav-go:hover {
    background: rgba(10, 132, 255, 0.12);
    border-color: var(--accent);
}

/* ---------- Mortality vs symptom takeaway ---------- */
.cav-hf-takeaway-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.cav-hf-takeaway {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    box-shadow: var(--shadow-md);
}
.cav-hf-takeaway--mortality {
    border-top: 5px solid #0c7a52;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), #ffffff 60%);
}
.cav-hf-takeaway--symptom {
    border-top: 5px solid #b3322f;
    background: linear-gradient(180deg, rgba(229, 72, 77, 0.06), #ffffff 60%);
}
.cav-hf-takeaway__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.cav-hf-takeaway__icon { font-size: 22px; line-height: 1; }
.cav-hf-takeaway--mortality .cav-hf-takeaway__icon { color: #0c7a52; }
.cav-hf-takeaway--symptom .cav-hf-takeaway__icon { color: #b3322f; }
.cav-hf-takeaway__title {
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
    color: var(--text);
}
.cav-hf-takeaway__list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.cav-hf-takeaway__list li {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
    font-weight: 500;
}
.cav-hf-takeaway__list strong { font-weight: 800; }
.cav-hf-takeaway--mortality .cav-hf-takeaway__list li::marker { color: #0c7a52; }
.cav-hf-takeaway--symptom .cav-hf-takeaway__list li::marker { color: #b3322f; }

/* Hide the empty Lock-It-In controls until questions are wired. */
#cav-heart-failure-lock-it-in:not([data-practice-initialized="true"]) [data-practice-progress],
#cav-heart-failure-lock-it-in:not([data-practice-initialized="true"]) .ida-practice-card .ida-practice-actions {
    display: none;
}

@media (max-width: 860px) {
    .cav-hf-nav-grid { grid-template-columns: 1fr; }
    .cav-hf-takeaway-grid { grid-template-columns: 1fr; }
    .cav-hf-contrast { grid-template-columns: 1fr; }
}

/* ============================================================
   NITRATES — Anti-Anginal sub-topic page
   Scoped to #cavNitratesTopicContent. Reuses the Class 1a chrome
   (topic-section-card, drug cards, use cards, mech tiles + hero,
   pearl table). Page-specific: the NO/cGMP cascade interactive
   (transparent-PNG icon overlays over a drawn smooth-muscle-cell
   scene) and the tolerance / nitroprusside / interaction callouts.
   ============================================================ */

/* Content grid — same 26px section spacing as the class pages so the
   nested <article> sections don't fuse together. (The outer
   .topic-workspace-page grid only spaces its DIRECT children.) */
#cavNitratesTopicContent {
    display: grid;
    gap: 26px;
}

/* Hero intro + section leads — dark, prominent (no faint grey). */
.cav-nitrate-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-nitrate-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-nitrate-intro--sub { font-size: 14.5px; }
.cav-nitrate-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — same clean blue-bordered widget + hover lift/glow as the
   Anti-Anginal foundation page, with a larger intro font. */
#cavNitratesTopicContent .cav-nitrate-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavNitratesTopicContent .cav-nitrate-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavNitratesTopicContent .cav-nitrate-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavNitratesTopicContent .cav-nitrate-hero .cav-nitrate-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-nitrate-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-nitrate-lead strong { color: var(--text); font-weight: 800; }
.cav-nitrate-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-nitrate-note strong { color: var(--text); font-weight: 800; }

/* ----- PART 1 — NO / cGMP pathway zoom & pan ----- */
.cav-nitrate-pathway-card { overflow: hidden; }
/* Capped + centered so the whole interactive (figure, caption, controls)
   takes far less vertical space; the figure aspect is 10:7, so a narrower
   column is also a shorter one, and the content below moves up with it. */
.cav-nitrate-pathway {
    margin: 12px auto 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The viewport = the fixed camera window. Aspect matches the figure (10:7)
   so the full pathway fills it exactly at scale 1; the image is moved by
   CSS transforms only (never edited/redrawn). */
.cav-nitrate-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 6px 20px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.4s ease;
}
.cav-nitrate-viewport__img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    transform: translate(0%, 0%) scale(1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
/* Step pill in the corner of the frame. */
.cav-nitrate-viewport__pill {
    position: absolute;
    top: 10px; left: 12px;
    z-index: 5;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Hover hotspots over each step (full-pathway view only). Invisible until
   the camera is zoomed all the way out; then each step gets a faint blue
   hint that brightens on hover/focus, and surfaces that step's caption. */
.cav-nitrate-hotspot {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}
.cav-nitrate-viewport.is-full .cav-nitrate-hotspot {
    opacity: 1;
    pointer-events: auto;
    box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.18);
}
.cav-nitrate-viewport.is-full .cav-nitrate-hotspot:hover,
.cav-nitrate-viewport.is-full .cav-nitrate-hotspot:focus-visible {
    background: rgba(10, 132, 255, 0.12);
    box-shadow: inset 0 0 0 2px rgba(10, 132, 255, 0.55), 0 0 18px rgba(10, 132, 255, 0.28);
    outline: none;
}
/* Danger framing on Step 7 (PDE5 / sildenafil teaching). */
.cav-nitrate-viewport.is-danger { box-shadow: inset 0 0 0 3px rgba(229, 72, 77, 0.55), 0 6px 20px rgba(229, 72, 77, 0.16); }
.cav-nitrate-viewport.is-danger .cav-nitrate-viewport__pill { background: #e5484d; }
.cav-nitrate-viewport.is-full .cav-nitrate-viewport__pill { background: rgba(10, 132, 255, 0.85); }

/* Caption */
.cav-nitrate-caption {
    border-radius: 14px;
    padding: 16px 20px;
    background: rgba(10, 132, 255, 0.06);
    border-left: 4px solid var(--accent);
    font-size: 19px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--text);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.cav-nitrate-caption.is-danger { background: rgba(229, 72, 77, 0.07); border-left-color: #e5484d; }
.cav-nitrate-caption__step {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    vertical-align: middle;
}
.cav-nitrate-caption.is-danger .cav-nitrate-caption__step { background: #e5484d; }

/* Controls */
.cav-nitrate-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cav-nitrate-stepnote { font-size: 16px; font-weight: 800; color: var(--muted-strong); letter-spacing: 0.01em; }
.cav-nitrate-subcontrols { display: flex; gap: 10px; flex-wrap: wrap; }

.cav-nitrate-btn {
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
.cav-nitrate-btn:active { transform: translateY(1px); }
.cav-nitrate-btn:disabled { opacity: 0.45; cursor: default; }
.cav-nitrate-btn--next { background: var(--accent); border-color: var(--accent); color: #fff; }
.cav-nitrate-btn--next:hover:not(:disabled) { background: var(--accent-strong); }
.cav-nitrate-btn--ghost:hover:not(:disabled) { background: rgba(10, 132, 255, 0.08); border-color: var(--accent); }
.cav-nitrate-btn--soft { background: #f1f5fb; font-size: 12.5px; }
.cav-nitrate-btn--soft:hover:not(:disabled) { background: #e7eef9; border-color: rgba(10, 132, 255, 0.3); }

/* ----- PART 2 — mechanism flow chips ----- */
.cav-nitrate-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 18px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border: 1px solid var(--line);
}
.cav-nitrate-flow__node {
    padding: 7px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(10, 132, 255, 0.28);
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.cav-nitrate-flow__node em { font-weight: 600; font-style: italic; color: #475467; }
.cav-nitrate-flow__node--end {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
    color: #0a6b4f;
}
.cav-nitrate-flow__arrow { font-size: 15px; font-weight: 900; color: var(--accent); }

/* Tolerance hero uses an amber accent instead of the red mech-hero. */
.cav-nitrate-tolerance-hero {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(16, 185, 129, 0.06));
    border-color: rgba(245, 158, 11, 0.28);
}
.cav-nitrate-tolerance-hero .cav-c1a-mech-hero__tag { color: #b45309; }

/* "Monday disease" callout. */
.cav-nitrate-monday {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.26);
}
.cav-nitrate-monday__icon { font-size: 26px; line-height: 1; }
.cav-nitrate-monday__title {
    font-size: 16px;
    font-weight: 850;
    color: var(--text);
    margin-bottom: 5px;
}
.cav-nitrate-monday__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #2f3a47;
    font-weight: 500;
}
.cav-nitrate-monday__text strong { color: var(--text); font-weight: 800; }

/* Adverse-effect grid: 3 across, then a lone 4th (the PDE5i
   contraindication) spans the full row via .cav-c1b-use-card--full. */
.cav-nitrate-ae-card--danger {
    border: 1px solid rgba(229, 72, 77, 0.4) !important;
    border-top: 3px solid #e5484d !important;
    background: rgba(229, 72, 77, 0.045);
    /* Fill the full-width widget — large, banner-sized type, not a tiny line. */
    padding: 24px 28px;
    gap: 12px;
}
.cav-nitrate-ae-card--danger .cav-c1a-use-card__icon { font-size: 32px; }
.cav-nitrate-ae-card--danger .cav-c1a-use-card__title { font-size: 22px; line-height: 1.25; }
.cav-nitrate-ae-card--danger .cav-c1a-use-card__text {
    font-size: 17px;
    line-height: 1.6;
    max-width: 760px;
}
.cav-nitrate-ae-card--danger .cav-c1a-use-card__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}

/* Enzymatic-activation tag on each drug card. */
.cav-nitrate-actv {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(245, 158, 11, 0.15);
    color: #92600a;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.cav-nitrate-actv--no {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border-color: rgba(16, 185, 129, 0.4);
}

/* Nitroprusside drug-specific toxicity callout. */
.cav-nitrate-specific {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border-left: 4px solid #e5484d;
    background: rgba(229, 72, 77, 0.07);
}
.cav-nitrate-specific__head {
    font-size: 14px;
    font-weight: 850;
    color: #b8323a;
    margin-bottom: 6px;
}
.cav-nitrate-specific__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-nitrate-specific__text strong { color: var(--text); font-weight: 800; }

@media (max-width: 760px) {
    .cav-nitrate-ae-grid { grid-template-columns: 1fr; }
    .cav-nitrate-controls { flex-wrap: wrap; justify-content: center; }
    .cav-nitrate-stepnote { order: -1; width: 100%; text-align: center; }
    .cav-nitrate-subcontrols { justify-content: center; }
}

/* ============================================================
   CALCIUM CHANNEL BLOCKERS IN ANGINA — Anti-Anginal sub-topic page
   Scoped to #cavCCBAnginaTopicContent. Reuses the Class 1a chrome
   (topic-section-card, drug cards, mech hero + tiles, pearl table,
   explainer). Page-specific: the Reflex-Tachycardia Comparison
   widget (two parallel clean box/arrow chains contrasting DHP rate-up
   vs non-DHP rate-down), built by ccb-comparison.js.
   ============================================================ */

/* Content grid — same 26px section spacing as the class pages so the
   nested <article> sections don't fuse together. (The outer
   .topic-workspace-page grid only spaces its DIRECT children.) */
#cavCCBAnginaTopicContent {
    display: grid;
    gap: 26px;
}

.cav-ccb-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

/* Hero intro + section leads — dark, prominent (no faint grey). */
.cav-ccb-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-ccb-intro--sub { font-size: 14.5px; }
.cav-ccb-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavCCBAnginaTopicContent .cav-ccb-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavCCBAnginaTopicContent .cav-ccb-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavCCBAnginaTopicContent .cav-ccb-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavCCBAnginaTopicContent .cav-ccb-hero .cav-ccb-intro {
    font-size: 17.5px;
    line-height: 1.6;
}

.cav-ccb-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ccb-lead strong { color: var(--text); font-weight: 800; }
.cav-ccb-note {
    margin: 14px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-ccb-note strong { color: var(--text); font-weight: 800; }

/* Two subclass groups side by side → all 4 drug cards in one row, each
   subclass bar sitting over its own pair (saves vertical space). */
.cav-ccb-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
    align-items: start;
}
.cav-ccb-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cav-ccb-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
.cav-ccb-pair .cav-pharm-drug-card { min-width: 0; }
.cav-ccb-group .cav-ccb-subclass-head { margin: 0; }
@media (max-width: 1080px) { .cav-ccb-groups { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cav-ccb-pair { grid-template-columns: 1fr; } }

/* Subclass divider headers above each drug grid. */
.cav-ccb-subclass-head {
    margin: 16px 0 10px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.02em;
    color: var(--text);
    border-left: 5px solid var(--accent);
    background: rgba(10, 132, 255, 0.07);
}
.cav-ccb-subclass-head--dhp {
    border-left-color: #0a84ff;
    background: rgba(10, 132, 255, 0.08);
    color: #0a4f9e;
}
.cav-ccb-subclass-head--ndhp {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.10);
    color: #0c7a52;
}

/* Drug cards — keep the shared blue-bubble outline; tint the left rail by
   subclass so DHP (blue) vs non-DHP (green) read at a glance. */
.cav-ccb-drug-card { border-left-width: 4px; }
.cav-ccb-drug-card--dhp { border-left-color: #0a84ff; }
.cav-ccb-drug-card--ndhp { border-left-color: #10b981; }

/* Site-of-action tag on each drug card (vascular = blue, heart = green). */
.cav-ccb-site {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(10, 132, 255, 0.13);
    color: #0a4f9e;
    border: 1px solid rgba(10, 132, 255, 0.4);
}
.cav-ccb-site--heart {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border-color: rgba(16, 185, 129, 0.4);
}

/* ----- The Reflex-Tachycardia Comparison widget ----- */
.cav-ccb-widget-card { overflow: hidden; }
.cav-ccb-comparison { margin-top: 14px; }
.cav-ccb-widget {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cav-ccb-widget__title {
    text-align: center;
    font-size: 16px;
    font-weight: 850;
    color: var(--text);
    line-height: 1.4;
    max-width: 720px;
    margin: 0 auto;
}

/* Two equal panels + a vertical divider. */
.cav-ccb-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}
.cav-ccb-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    margin: 0 4px;
}

.cav-ccb-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8px 14px 4px;
}
.cav-ccb-panel__head { text-align: center; margin-bottom: 12px; }
.cav-ccb-panel__title {
    font-size: 16.5px;
    font-weight: 850;
    color: var(--text);
}
.cav-ccb-panel--dhp .cav-ccb-panel__title { color: #0a4f9e; }
.cav-ccb-panel--ndhp .cav-ccb-panel__title { color: #0c7a52; }
.cav-ccb-panel__subtitle {
    font-size: 12.5px;
    font-weight: 700;
    color: #475467;
    margin-top: 2px;
}

.cav-ccb-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    gap: 0;
}

/* Connecting downward arrows — drawn in (fade + slide) as the chain plays. */
.cav-ccb-arrow {
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    margin: 6px 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.cav-ccb-arrow.is-drawn { opacity: 1; transform: translateY(0); }
.cav-ccb-panel--dhp .cav-ccb-arrow.is-drawn { color: #2f7fd6; }
.cav-ccb-panel--ndhp .cav-ccb-arrow.is-drawn { color: #12a06e; }

/* Step boxes — dim until lit, then animate up to full opacity. */
.cav-ccb-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-md);
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    opacity: 0.28;
    transform: scale(0.97);
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cav-ccb-box.is-lit { opacity: 1; transform: scale(1); }
.cav-ccb-box__icon { font-size: 18px; line-height: 1; }
.cav-ccb-box__dir { font-size: 18px; font-weight: 850; line-height: 1; }
.cav-ccb-box__text { flex: 1; }
.cav-ccb-box__text strong { font-weight: 800; }
.cav-ccb-box__sub {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

/* Site box — tinted by family. */
.cav-ccb-panel--dhp .cav-ccb-box--site {
    border-color: rgba(10, 132, 255, 0.4);
    background: rgba(10, 132, 255, 0.07);
}
.cav-ccb-panel--dhp .cav-ccb-box--site .cav-ccb-box__dir { color: #0a4f9e; }
.cav-ccb-panel--ndhp .cav-ccb-box--site {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.09);
}

/* Down-arrow (calming) boxes share a soft neutral look; dir glyph blue/green. */
.cav-ccb-panel--dhp .cav-ccb-box--down .cav-ccb-box__dir { color: #2f7fd6; }
.cav-ccb-panel--ndhp .cav-ccb-box--down .cav-ccb-box__dir { color: #12a06e; }

/* Pivot box — the baroreceptor reflex, the amber turning point. */
.cav-ccb-box--pivot {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.12);
}
.cav-ccb-box--pivot .cav-ccb-box__dir { color: #b97309; }
.cav-ccb-box--pivot .cav-ccb-box__text strong { color: #92600a; }

/* THE PUNCHLINES — the two most prominent elements. Left ends rate UP
   (red); right ends rate DOWN (green). Larger type + heavier weight. */
.cav-ccb-box--end-up,
.cav-ccb-box--end-down {
    font-size: 16px;
    font-weight: 850;
    padding: 16px 16px;
    border-width: 2px;
    border-radius: 16px;
}
.cav-ccb-box--end-up {
    border-color: #e5484d;
    background: linear-gradient(135deg, rgba(229, 72, 77, 0.16), rgba(229, 72, 77, 0.08));
    color: #b8323a;
}
.cav-ccb-box--end-up .cav-ccb-box__dir { font-size: 26px; color: #e5484d; }
.cav-ccb-box--end-up .cav-ccb-box__sub { color: #b8323a; }
.cav-ccb-box--end-down {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08));
    color: #0c7a52;
}
.cav-ccb-box--end-down .cav-ccb-box__dir { font-size: 26px; color: #0f9d6e; }
.cav-ccb-box--end-down .cav-ccb-box__sub { color: #0c7a52; }

/* Pulse the punchline boxes to drive the contrast. */
.cav-ccb-box--end-up.is-pulse { animation: cavCcbPulseUp 1.5s ease-in-out 2; }
.cav-ccb-box--end-down.is-pulse { animation: cavCcbPulseDown 1.5s ease-in-out 2; }
@keyframes cavCcbPulseUp {
    0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(229, 72, 77, 0); transform: scale(1); }
    50% { box-shadow: var(--shadow-md), 0 0 0 7px rgba(229, 72, 77, 0.22); transform: scale(1.035); }
}
@keyframes cavCcbPulseDown {
    0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }
    50% { box-shadow: var(--shadow-md), 0 0 0 7px rgba(16, 185, 129, 0.22); transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
    .cav-ccb-box,
    .cav-ccb-arrow,
    .cav-ccb-box--end-up.is-pulse,
    .cav-ccb-box--end-down.is-pulse { transition: none; animation: none; }
}

/* Per-panel note below the chain (DHP + beta blocker tip). */
.cav-ccb-panel__note {
    margin-top: 14px;
    max-width: 320px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #2f3a47;
    font-weight: 500;
    text-align: center;
}
.cav-ccb-panel__note strong { color: var(--text); font-weight: 800; }

/* Control area — hint line + play / replay buttons. */
.cav-ccb-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.cav-ccb-controls__hint {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.cav-ccb-controls__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cav-ccb-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 800;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-ccb-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cav-ccb-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-ccb-btn--play:hover { background: var(--accent-strong); }
.cav-ccb-btn--play:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.cav-ccb-btn--soft { background: #f1f5fb; }
.cav-ccb-btn--soft:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }

/* Step boxes are hoverable for an explanation. */
.cav-ccb-box { cursor: help; }
.cav-ccb-box:hover,
.cav-ccb-box:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.30), var(--shadow-md);
    outline: none;
}

/* Explanation caption below the controls — updates on hover / each step. */
.cav-ccb-caption {
    margin-top: 12px;
    border-radius: 12px;
    padding: 12px 16px;
    background: rgba(10, 132, 255, 0.06);
    border-left: 4px solid var(--accent);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--text);
    min-height: 1.55em;
}
.cav-ccb-caption strong { color: var(--text); font-weight: 800; }
.cav-ccb-cap-dhp { color: #0a4f9e; }
.cav-ccb-cap-ndhp { color: #0c7a52; }
.cav-ccb-cap-up { color: #c5363b; font-weight: 800; }
.cav-ccb-cap-down { color: #0c7a52; font-weight: 800; }

/* ----- How CCBs help angina ----- */
.cav-ccb-mech-hero {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(16, 185, 129, 0.06));
    border-color: rgba(10, 132, 255, 0.20);
}
.cav-ccb-mech-hero .cav-c1a-mech-hero__tag { color: #0a4f9e; }
.cav-ccb-htn-note { margin-top: 16px; }
.cav-ccb-htn-note p { font-weight: 500; }

@media (max-width: 760px) {
    .cav-ccb-stage { grid-template-columns: 1fr; }
    .cav-ccb-divider {
        width: auto;
        height: 1px;
        margin: 10px 0;
        background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    }
    .cav-ccb-chain { max-width: 420px; }
    .cav-ccb-panel__note { max-width: 420px; }
    .cav-ccb-mech-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BETA BLOCKERS IN ANGINA — Anti-Anginal sub-topic page
   Scoped to #cavBetaBlockersAnginaTopicContent. Deliberately LIGHT:
   text + drug cards only (no figure, no interactive widget). Reuses
   the Class 1a chrome (topic-section-card, drug cards, mech hero +
   tiles, use cards, pearl table). Page-specific: the reflex-tachycardia
   rescue highlight callout and the cautions banner.
   ============================================================ */
#cavBetaBlockersAnginaTopicContent {
    display: grid;
    gap: 26px;
}

.cav-bb-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

/* Hero intro + section leads — dark, prominent (no faint grey). */
.cav-bb-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-bb-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavBetaBlockersAnginaTopicContent .cav-bb-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavBetaBlockersAnginaTopicContent .cav-bb-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavBetaBlockersAnginaTopicContent .cav-bb-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavBetaBlockersAnginaTopicContent .cav-bb-hero .cav-bb-intro {
    font-size: 17.5px;
    line-height: 1.6;
}

.cav-bb-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-bb-lead strong { color: var(--text); font-weight: 800; }
.cav-bb-note {
    margin: 14px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-bb-note strong { color: var(--text); font-weight: 800; }

/* Two cardioselective agents → side by side in one row. */
.cav-bb-drug-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 14px;
}

/* Cardioselectivity tag on each drug card (green = β1-selective). */
.cav-bb-sel {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* Anti-anginal mechanism hero (blue/teal tint to match the demand theme). */
.cav-bb-mech-hero {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(16, 185, 129, 0.06));
    border-color: rgba(10, 132, 255, 0.20);
}
.cav-bb-mech-hero .cav-c1a-mech-hero__tag { color: #0a4f9e; }

/* ----- Reflex-tachycardia rescue: the high-yield connective-tissue callout ----- */
.cav-bb-rescue {
    margin-top: 6px;
    padding: 24px 28px;
    border-radius: 18px;
    border: 2px solid rgba(124, 58, 237, 0.34);
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0) 55%),
        linear-gradient(180deg, #ffffff, #faf7ff);
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.12);
}
.cav-bb-rescue__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 999px;
    padding: 4px 12px;
}
.cav-bb-rescue__title {
    margin: 12px 0 8px;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.25;
    color: var(--text);
}
.cav-bb-rescue__body {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
    max-width: 880px;
}
.cav-bb-rescue__body strong { color: var(--text); font-weight: 800; }
.cav-bb-rescue__body .cav-term { font-weight: 700; }
.cav-bb-rescue__pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}
.cav-bb-pair-card {
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, 0.22);
    box-shadow: var(--shadow-md);
}
.cav-bb-pair-card__head {
    font-size: 15px;
    font-weight: 850;
    color: #5b21b6;
    margin-bottom: 6px;
}
.cav-bb-pair-card__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-bb-pair-card__text strong { color: var(--text); font-weight: 800; }

/* ----- Cautions grid: 2 across, then a lone 3rd (vasospastic angina)
   spans the full row via .cav-c1b-use-card--full. ----- */
.cav-bb-caution-grid { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Amber "use caution" card (non-DHP CCB combination). */
.cav-bb-caution-card--warn {
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-top: 3px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.05);
}
.cav-bb-caution-card--warn .cav-c1a-use-card__text .cav-term {
    font-weight: 800;
    color: #92600a;
    border-bottom-color: rgba(146, 96, 10, 0.6);
}

/* Red "contraindicated" banner (vasospastic angina) — fills the full row. */
.cav-bb-caution-card--danger {
    border: 1px solid rgba(229, 72, 77, 0.4) !important;
    border-top: 3px solid #e5484d !important;
    background: rgba(229, 72, 77, 0.045);
    /* Fill the full-width widget — text spans the whole box, left-aligned, so
       the banner is short top-to-bottom instead of a narrow centered column. */
    padding: 18px 24px;
    gap: 6px;
    text-align: left;
    align-items: stretch;
}
.cav-bb-caution-card--danger .cav-c1a-use-card__icon { font-size: 26px; }
.cav-bb-caution-card--danger .cav-c1a-use-card__title { font-size: 20px; line-height: 1.25; }
.cav-bb-caution-card--danger .cav-c1a-use-card__text {
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
}
.cav-bb-caution-card--danger .cav-c1a-use-card__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}

@media (max-width: 760px) {
    .cav-bb-drug-grid { grid-template-columns: 1fr; }
    .cav-bb-mech-grid { grid-template-columns: 1fr; }
    .cav-bb-rescue__pair-row { grid-template-columns: 1fr; }
    .cav-bb-caution-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RANOLAZINE — Anti-Anginal sub-topic page
   Scoped to #cavRanolazineTopicContent. Deliberately LIGHT: a single
   add-on drug. Reuses the Class 1a chrome (topic-section-card, drug
   cards, mech hero, explainer, pearl table). Page-specific: the
   horizontal mechanism CHAIN widget + the "odd one out" contrast panel.
   ============================================================ */
#cavRanolazineTopicContent {
    display: grid;
    gap: 26px;
}

.cav-rano-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

/* Hero intro + section leads — dark, prominent (no faint grey). */
.cav-rano-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-rano-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavRanolazineTopicContent .cav-rano-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavRanolazineTopicContent .cav-rano-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavRanolazineTopicContent .cav-rano-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavRanolazineTopicContent .cav-rano-hero .cav-rano-intro {
    font-size: 17.5px;
    line-height: 1.6;
}

.cav-rano-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-rano-lead strong { color: var(--text); font-weight: 800; }

/* Single drug → one centered card that does not stretch full-bleed. */
.cav-rano-drug-grid {
    grid-template-columns: minmax(0, 560px);
    justify-content: start;
    margin-top: 14px;
}

/* "Add-on, not first-line" tag on the drug card (amber/indigo accent). */
.cav-rano-addon {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(99, 102, 241, 0.14);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.40);
}

/* ----- The mechanism-chain widget ----- */
.cav-rano-chain-card { overflow: hidden; }
.cav-rano-chain-mount { margin-top: 14px; }
.cav-rano-widget {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cav-rano-widget__title {
    text-align: center;
    font-size: 16px;
    font-weight: 850;
    color: var(--text);
    line-height: 1.4;
    max-width: 760px;
    margin: 0 auto;
}

/* The horizontal chain: 5 boxes left → right, with rightward arrows. */
.cav-rano-stage {
    width: 100%;
    overflow-x: auto;
    padding: 4px 2px 8px;
}
.cav-rano-chain {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-width: 0;
}

/* Connecting rightward arrows — drawn in (fade + slide) as the chain plays. */
.cav-rano-arrow {
    display: flex;
    align-items: center;
    font-size: 26px;
    line-height: 1;
    font-weight: 850;
    color: #94a3b8;
    margin: 0 4px;
    flex: 0 0 auto;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.cav-rano-arrow.is-drawn { opacity: 1; transform: translateX(0); color: var(--accent); }

/* Step boxes — dim until lit, then animate up to full opacity. */
.cav-rano-box {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-md);
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    opacity: 0.28;
    transform: scale(0.97);
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cav-rano-box.is-lit { opacity: 1; transform: scale(1); }
.cav-rano-box__dir { font-size: 20px; font-weight: 850; line-height: 1; color: var(--accent); }
.cav-rano-box__text { display: block; }
.cav-rano-box__text strong { font-weight: 800; }
.cav-rano-box__note {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 500;
    color: #475467;
}
.cav-rano-box__sub {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

/* Start box — primary accent (the late-Na⁺-current inhibition). */
.cav-rano-box--start {
    border-color: rgba(10, 132, 255, 0.45);
    background: rgba(10, 132, 255, 0.07);
}
.cav-rano-box--start .cav-rano-box__dir { color: #0a4f9e; }

/* THE ENDPOINT — the most prominent box: positive/calming highlight (green). */
.cav-rano-box--end {
    flex: 1.15 1 0;
    border-width: 2px;
    border-radius: 16px;
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08));
    color: #0c7a52;
    font-size: 14px;
    font-weight: 850;
}
.cav-rano-box--end .cav-rano-box__dir { font-size: 26px; color: #0f9d6e; }
.cav-rano-box--end .cav-rano-box__text strong { color: #0c7a52; }
.cav-rano-box--end .cav-rano-box__sub { color: #0c7a52; }

/* Pulse the endpoint when reached. */
.cav-rano-box--end.is-pulse { animation: cavRanoPulse 1.5s ease-in-out 2; }
@keyframes cavRanoPulse {
    0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }
    50% { box-shadow: var(--shadow-md), 0 0 0 7px rgba(16, 185, 129, 0.22); transform: scale(1.035); }
}

/* ----- The "odd one out" contrast panel — fills the width; hidden until reveal ----- */
.cav-rano-contrast {
    border-radius: 18px;
    border: 2px solid rgba(99, 102, 241, 0.30);
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0) 55%),
        linear-gradient(180deg, #ffffff, #f7f8ff);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.10);
    padding: 22px 26px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.cav-rano-contrast.is-shown { opacity: 1; transform: translateY(0); }
.cav-rano-contrast__head {
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    margin-bottom: 16px;
}
.cav-rano-contrast__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.cav-rano-contrast__col {
    border-radius: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
}
.cav-rano-contrast__col--no {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.07);
}
.cav-rano-contrast__col--yes {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
}
.cav-rano-contrast__title {
    font-size: 13.5px;
    font-weight: 850;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}
.cav-rano-contrast__col--no .cav-rano-contrast__title { color: #475467; }
.cav-rano-contrast__col--no .cav-rano-contrast__title strong { color: #334155; }
.cav-rano-contrast__col--yes .cav-rano-contrast__title { color: #0c7a52; }
.cav-rano-contrast__items { display: flex; flex-direction: column; gap: 10px; }
.cav-rano-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
}
.cav-rano-item__dir {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
}
.cav-rano-item--flat { color: #475467; }
.cav-rano-item--flat .cav-rano-item__dir {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}
.cav-rano-item--flat .cav-rano-item__label strong { color: #334155; font-weight: 800; }
.cav-rano-item--down .cav-rano-item__dir {
    background: rgba(16, 185, 129, 0.16);
    color: #0f9d6e;
}
.cav-rano-item--down .cav-rano-item__label strong { color: #0c7a52; font-weight: 800; }
.cav-rano-item__sub { font-size: 12.5px; color: #475467; font-weight: 500; }
.cav-rano-contrast__cap {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}

/* Control area — hint + play / replay buttons. */
.cav-rano-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.cav-rano-controls__hint {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.cav-rano-controls__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cav-rano-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 800;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-rano-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cav-rano-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-rano-btn--play:hover { background: var(--accent-strong); }
.cav-rano-btn--play:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.cav-rano-btn--soft { background: #f1f5fb; }
.cav-rano-btn--soft:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }

/* Explanation caption below the controls. */
.cav-rano-caption {
    margin-top: 4px;
    border-radius: 12px;
    padding: 12px 16px;
    background: rgba(10, 132, 255, 0.06);
    border-left: 4px solid var(--accent);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--text);
    min-height: 1.55em;
    text-align: center;
}
.cav-rano-caption strong { color: var(--text); font-weight: 800; }
.cav-rano-cap-down { color: #0c7a52; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .cav-rano-box,
    .cav-rano-arrow,
    .cav-rano-contrast,
    .cav-rano-box--end.is-pulse { transition: none; animation: none; }
}

/* ----- Mechanism recap: one-line flow strip ----- */
.cav-rano-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
}
.cav-rano-flow__node {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.cav-rano-flow__node--end {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.07));
    color: #0c7a52;
    font-weight: 850;
}
.cav-rano-flow__arrow { font-size: 18px; font-weight: 850; color: var(--accent); }

.cav-rano-mech-hero {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(16, 185, 129, 0.06));
    border-color: rgba(10, 132, 255, 0.20);
}
.cav-rano-mech-hero .cav-c1a-mech-hero__tag { color: #0a4f9e; }
.cav-rano-explainer { margin-top: 16px; }
.cav-rano-explainer p { font-weight: 500; }

/* ----- QT-prolongation adverse-effect callout ----- */
.cav-rano-ae {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 6px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(229, 72, 77, 0.4);
    border-top: 3px solid #e5484d;
    background: rgba(229, 72, 77, 0.045);
}
.cav-rano-ae__icon { font-size: 26px; line-height: 1.2; flex: 0 0 auto; }
.cav-rano-ae__body { flex: 1; min-width: 0; }
.cav-rano-ae__title {
    font-size: 20px;
    font-weight: 850;
    line-height: 1.25;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cav-rano-ae__text {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-rano-ae__text strong { color: var(--text); font-weight: 800; }
.cav-rano-ae__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}

@media (max-width: 760px) {
    .cav-rano-drug-grid { grid-template-columns: 1fr; }
    .cav-rano-chain { flex-direction: column; align-items: stretch; }
    .cav-rano-box { min-width: 0; }
    .cav-rano-arrow { transform: rotate(90deg) translateX(-4px); margin: 2px auto; }
    .cav-rano-arrow.is-drawn { transform: rotate(90deg) translateX(0); }
    .cav-rano-contrast__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   SPECIAL SITUATIONS IN ANGINA — Anti-Anginal sub-topic page
   Scoped to #cavSpecialSituationsTopicContent. Conceptual /
   management-focused — three clinical scenarios (vasospastic /
   Prinzmetal angina, ACS / unstable angina, STEMI). Deliberately
   LIGHT: text sections + callouts only (no figure, no interactive,
   no Game Center). Reuses the Class 1a chrome (topic-section-card,
   mech hero, use cards, pearl table). Page-specific: the top
   avoid-beta-blocker danger banner, the treat-vs-avoid grid, the
   ACS management icon-card grid, and the STEMI reperfusion panel.
   ============================================================ */
#cavSpecialSituationsTopicContent {
    display: grid;
    gap: 26px;
}

/* ----- Collapsible scenario dropdowns (native <details>/<summary>) ----- */
.cav-ss-acc { width: 100%; }
.cav-ss-acc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
    transition: background 0.18s ease;
}
.cav-ss-acc__summary::-webkit-details-marker { display: none; }
.cav-ss-acc__summary:hover { background: rgba(10, 132, 255, 0.04); }
.cav-ss-acc__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.cav-ss-acc__heading { min-width: 0; }
.cav-ss-acc__heading h3 { margin: 4px 0 0; }
.cav-ss-acc__chevron {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--muted-strong);
    transition: transform 0.25s ease, color 0.2s ease;
}
.cav-ss-acc__summary:hover .cav-ss-acc__chevron { color: var(--accent); }
.cav-ss-acc[open] .cav-ss-acc__chevron { transform: rotate(180deg); color: var(--accent); }
.cav-ss-acc__body { margin-top: 18px; }
/* gentle reveal when a scenario is opened */
.cav-ss-acc[open] .cav-ss-acc__body { animation: cavSsAccIn 0.28s ease; }
@keyframes cavSsAccIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cav-ss-acc__chevron { transition: none; }
    .cav-ss-acc[open] .cav-ss-acc__body { animation: none; }
}

.cav-ss-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

/* Hero intro + section leads — dark, prominent (no faint grey). */
.cav-ss-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-ss-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavSpecialSituationsTopicContent .cav-ss-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavSpecialSituationsTopicContent .cav-ss-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavSpecialSituationsTopicContent .cav-ss-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavSpecialSituationsTopicContent .cav-ss-hero .cav-ss-intro {
    font-size: 17.5px;
    line-height: 1.6;
}

.cav-ss-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ss-lead strong { color: var(--text); font-weight: 800; }
.cav-ss-note {
    margin: 14px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-ss-note strong { color: var(--text); font-weight: 800; }

/* ----- TOP TAKEAWAY — avoid-beta-blocker danger banner.
   Fills the full box, left-aligned, short top-to-bottom (icon to the
   left, text spanning the rest of the width — never a narrow centered
   column). ----- */
.cav-ss-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(229, 72, 77, 0.4);
    border-left: 6px solid #e5484d;
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(229, 72, 77, 0.10), rgba(229, 72, 77, 0) 60%),
        rgba(229, 72, 77, 0.045);
    box-shadow: 0 8px 22px rgba(229, 72, 77, 0.10);
}
.cav-ss-banner__icon { font-size: 30px; line-height: 1.1; flex: 0 0 auto; }
.cav-ss-banner__body { flex: 1 1 auto; min-width: 0; }
.cav-ss-banner__title {
    font-size: 21px;
    font-weight: 850;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 6px;
}
.cav-ss-banner__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    max-width: none;
}
.cav-ss-banner__text strong { color: var(--text); font-weight: 800; }
.cav-ss-banner .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}
.cav-ss-banner__title .cav-term { color: #c5363b; }

/* ----- Section 1 — vasospastic treat-vs-avoid grid (2 cards fill the row). ----- */
.cav-ss-tx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 4px;
}
.cav-ss-tx-card {
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.cav-ss-tx-card--good {
    border-color: rgba(16, 185, 129, 0.4);
    border-top: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}
.cav-ss-tx-card--bad {
    border-color: rgba(229, 72, 77, 0.4);
    border-top: 4px solid #e5484d;
    background: rgba(229, 72, 77, 0.045);
}
.cav-ss-tx-card__tag {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cav-ss-tx-card--good .cav-ss-tx-card__tag { color: #0c7a52; }
.cav-ss-tx-card--bad .cav-ss-tx-card__tag { color: #b8323a; }
.cav-ss-tx-card__title {
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    margin: 4px 0 8px;
    line-height: 1.25;
}
.cav-ss-tx-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ss-tx-card__text strong { color: var(--text); font-weight: 800; }
.cav-ss-tx-card--bad .cav-ss-tx-card__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}

/* Section-1 mechanism hero — red/amber spasm tint. */
.cav-ss-mech-hero {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(229, 72, 77, 0.08), rgba(245, 158, 11, 0.06));
    border-color: rgba(229, 72, 77, 0.20);
}

/* ----- Section 2 — ACS management icon cards: six items fill two
   full rows of three (the shared .cav-c1a-use-grid is 3-col). ----- */
.cav-ss-acs-grid { margin-top: 16px; }
.cav-ss-acs-card--key {
    border: 1px solid rgba(10, 132, 255, 0.35) !important;
    border-top: 3px solid var(--accent) !important;
    background: rgba(10, 132, 255, 0.05);
}
.cav-ss-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    background: rgba(245, 158, 11, 0.15);
    color: #92600a;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* ----- Section 3 — STEMI reperfusion: PCI vs fibrinolytics (2 cards fill the row). ----- */
.cav-ss-reperf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 4px;
}
.cav-ss-reperf-card {
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.cav-ss-reperf-card--pci {
    border-color: rgba(16, 185, 129, 0.4);
    border-top: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}
.cav-ss-reperf-card--fib {
    border-color: rgba(10, 132, 255, 0.35);
    border-top: 4px solid var(--accent);
    background: rgba(10, 132, 255, 0.05);
}
.cav-ss-reperf-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cav-ss-reperf-card__name { font-size: 19px; font-weight: 850; color: var(--text); line-height: 1.2; }
.cav-ss-reperf-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cav-ss-reperf-badge--preferred {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.cav-ss-reperf-badge--alt {
    background: rgba(10, 132, 255, 0.12);
    color: #0a4f9e;
    border: 1px solid rgba(10, 132, 255, 0.35);
}
.cav-ss-reperf-card__sub {
    margin: 6px 0 8px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475467;
}
.cav-ss-reperf-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ss-reperf-card__text strong { color: var(--text); font-weight: 800; }

/* Fibrinolytic mechanism hero — blue tint. */
.cav-ss-fib-hero {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(124, 58, 237, 0.05));
    border-color: rgba(10, 132, 255, 0.20);
}
.cav-ss-fib-hero .cav-c1a-mech-hero__tag { color: #0a4f9e; }

/* ----- Section 3 — fibrinolytic adverse-effect / contraindication grid:
   2 cards across, then a lone reversal card spans the full row via
   .cav-c1b-use-card--full (left-aligned, fills the box). ----- */
.cav-ss-side-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.cav-ss-side-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.cav-ss-side-card__icon { font-size: 22px; line-height: 1; }
.cav-ss-side-card__title { font-size: 16px; font-weight: 850; color: var(--text); line-height: 1.3; }
.cav-ss-side-card__text { font-size: 13.5px; line-height: 1.55; color: #2f3a47; font-weight: 500; }
.cav-ss-side-card__text strong { color: var(--text); font-weight: 800; }
.cav-ss-side-card--danger {
    border: 1px solid rgba(229, 72, 77, 0.4);
    border-top: 3px solid #e5484d;
    background: rgba(229, 72, 77, 0.045);
}
.cav-ss-side-card--danger .cav-ss-side-card__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}
.cav-ss-side-card--warn {
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-top: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}
/* Lone reversal card — full-width row, left-aligned (override the
   shared --full centering so the text fills the box). */
.cav-ss-side-card--reversal {
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    border-top: 3px solid #10b981 !important;
    background: rgba(16, 185, 129, 0.05);
    padding: 18px 24px;
    gap: 6px;
    text-align: left;
    align-items: stretch;
}
.cav-ss-side-card--reversal .cav-c1a-use-card__icon { font-size: 24px; }
.cav-ss-side-card--reversal .cav-c1a-use-card__title { font-size: 18px; line-height: 1.25; }
.cav-ss-side-card--reversal .cav-c1a-use-card__text {
    font-size: 15px;
    line-height: 1.55;
    max-width: none;
    font-weight: 500;
}

@media (max-width: 760px) {
    .cav-ss-tx-grid,
    .cav-ss-reperf-grid,
    .cav-ss-side-grid { grid-template-columns: 1fr; }
    .cav-ss-banner { flex-direction: column; gap: 10px; }
}

/* ============================================================
   RAAS INHIBITORS & ARNI — Heart Failure sub-topic page.
   Scoped to #cavRaasArniTopicContent. Reuses the shared drug cards,
   use cards, mech tiles, mech hero, and pearl table; adds the
   code-built ARNI mechanism widget (.cav-arni-*) and a few page chrome
   pieces (hero, lead, note, mortality pill, danger banner).
   ============================================================ */
#cavRaasArniTopicContent {
    display: grid;
    gap: 26px;
}

/* ----- Page chrome: topbar, hero, leads ----- */
.cav-raas-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-raas-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-raas-intro--sub { font-size: 14.5px; }
.cav-raas-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavRaasArniTopicContent .cav-raas-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavRaasArniTopicContent .cav-raas-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavRaasArniTopicContent .cav-raas-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavRaasArniTopicContent .cav-raas-hero .cav-raas-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-raas-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-raas-lead strong { color: var(--text); font-weight: 800; }
.cav-raas-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-raas-note strong { color: var(--text); font-weight: 800; }

/* "Mortality benefit" tag pill on every drug card (green = good outcome). */
.cav-raas-mort {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* The two-card-then-banner feature grid stays 3-col for the top row of three. */
.cav-raas-feature-grid { margin-top: 4px; }

/* Red "never combine" danger banner — fills the full row, left-aligned. */
.cav-raas-danger {
    border: 1px solid rgba(229, 72, 77, 0.4) !important;
    border-top: 3px solid #e5484d !important;
    background: rgba(229, 72, 77, 0.045);
    padding: 18px 24px;
    gap: 6px;
    text-align: left;
    align-items: stretch;
}
.cav-raas-danger .cav-c1a-use-card__icon { font-size: 26px; }
.cav-raas-danger .cav-c1a-use-card__title { font-size: 20px; line-height: 1.25; }
.cav-raas-danger .cav-c1a-use-card__text {
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
}
.cav-raas-danger .cav-c1a-use-card__text .cav-term {
    font-weight: 800;
    color: #c5363b;
    border-bottom-color: rgba(197, 54, 59, 0.6);
}

/* Mortality-benefit hero — green-tinted variant of the shared mech hero. */
.cav-raas-mort-hero {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.06);
}

/* ============================================================
   THE ARNI MECHANISM WIDGET (code-only, no images).
   A branching cause-and-effect diagram: neprilysin inhibition splits
   into a WANTED (green) and an UNWANTED (amber/red) branch; an ARB
   blocks the unwanted branch; the ACE-inhibitor contraindication
   warning sits below and pulses. Stages reveal via .is-shown.
   ============================================================ */
.cav-raas-widget-card { overflow: hidden; }
.cav-arni-diagram {
    margin: 14px auto 0;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Step reveal: hidden stages collapse cleanly; .is-shown fades them up. */
.cav-arni-diagram [data-stage] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.cav-arni-diagram [data-stage].is-shown {
    opacity: 1;
    transform: translateY(0);
}

/* Shared box styling. */
.cav-arni-box {
    border-radius: 14px;
    padding: 14px 18px;
    text-align: center;
    border: 2px solid var(--line);
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    max-width: 360px;
}
.cav-arni-box__title { font-size: 15.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.cav-arni-box__sub { margin-top: 5px; font-size: 12.5px; font-weight: 500; color: #5a6678; line-height: 1.4; }
.cav-arni-box__effect { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.4; }

/* Top: neprilysin inhibition (primary accent). */
.cav-arni-stage--top { width: 100%; display: flex; justify-content: center; }
.cav-arni-box--primary {
    border-color: var(--accent);
    background: linear-gradient(180deg, #ffffff, #f1f7ff);
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.16);
}
.cav-arni-box--primary .cav-arni-box__title { color: var(--accent-strong); }

/* The split arrow (the key visual). */
.cav-arni-split {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cav-arni-split__stem {
    width: 3px;
    height: 22px;
    background: #94a3b8;
}
.cav-arni-split__fork {
    position: relative;
    width: 100%;
    height: 26px;
}
.cav-arni-split__line {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    border-top: 3px solid #94a3b8;
}
.cav-arni-split__line--left { left: 0; border-left: 3px solid #94a3b8; border-top-left-radius: 10px; }
.cav-arni-split__line--right { right: 0; border-right: 3px solid #94a3b8; border-top-right-radius: 10px; }
.cav-arni-split__label {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #5a6678;
    text-align: center;
}

/* The two branches side by side. */
.cav-arni-branches {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.cav-arni-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
}
.cav-arni-branch--wanted {
    border: 2px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.06);
}
.cav-arni-branch--unwanted {
    border: 2px solid rgba(229, 72, 77, 0.4);
    background: rgba(229, 72, 77, 0.05);
}
.cav-arni-branch__tag {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cav-arni-branch__tag--good { color: #0c7a52; }
.cav-arni-branch__tag--bad { color: #b8323a; }

.cav-arni-box--good { border-color: rgba(16, 185, 129, 0.55); }
.cav-arni-box--good .cav-arni-box__title { color: #0c7a52; }
.cav-arni-box--good-soft {
    border-style: dashed;
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.04);
}
.cav-arni-box--bad { border-color: rgba(229, 72, 77, 0.55); }
.cav-arni-box--bad .cav-arni-box__title { color: #b8323a; }
.cav-arni-box--bad-soft {
    border-style: dashed;
    border-color: rgba(229, 72, 77, 0.45);
    background: rgba(229, 72, 77, 0.04);
}
.cav-arni-down { font-size: 20px; font-weight: 800; line-height: 1; }
.cav-arni-down--good { color: #0c9b68; }
.cav-arni-down--bad { color: #d4474d; }

/* The fix — ARB blocks the unwanted branch. */
.cav-arni-fix {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--accent);
    background: linear-gradient(180deg, #ffffff, #f1f7ff);
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.14);
}
.cav-arni-fix__block {
    flex: 0 0 auto;
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-strong);
    line-height: 1;
}
.cav-arni-fix__title { font-size: 14.5px; font-weight: 850; color: var(--accent-strong); margin-bottom: 3px; }
.cav-arni-fix__text { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.45; }
.cav-arni-fix__text strong { font-weight: 800; }

/* The contraindication warning (last, pulses once reached). */
.cav-arni-warn {
    margin-top: 10px;
    width: 100%;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    border-radius: 16px;
    border: 2px solid #e5484d;
    background: rgba(229, 72, 77, 0.07);
    box-shadow: 0 6px 18px rgba(229, 72, 77, 0.12);
}
.is-warned .cav-arni-warn {
    animation: cavArniPulse 1.1s ease-in-out 2;
}
@keyframes cavArniPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(229, 72, 77, 0.12); }
    50% { box-shadow: 0 0 0 5px rgba(229, 72, 77, 0.22), 0 6px 18px rgba(229, 72, 77, 0.18); }
}
.cav-arni-warn__icon { flex: 0 0 auto; font-size: 26px; line-height: 1.1; color: #c5363b; }
.cav-arni-warn__title { font-size: 17px; font-weight: 850; color: #b8323a; line-height: 1.25; margin-bottom: 5px; }
.cav-arni-warn__text { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.55; }
.cav-arni-warn__text strong { color: var(--text); font-weight: 800; }

/* Controls. */
.cav-arni-controls {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    opacity: 1 !important;
    transform: none !important;
}
.cav-arni-btn {
    border-radius: 999px;
    border: 1px solid var(--line);
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    background: #fff;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.cav-arni-btn:hover { transform: translateY(-1px); }
.cav-arni-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-arni-btn--play:hover { background: var(--accent-strong); }
.cav-arni-btn--soft { background: #f1f5fb; }
.cav-arni-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* The hoverable diagram boxes read as interactive (subtle dotted underline cue
   on the title; pointer cursor) without breaking the box layout. */
.cav-arni-box.cav-term,
.cav-arni-fix.cav-term { cursor: help; border-bottom-width: 2px; }
.cav-arni-fix__text em { font-style: italic; font-weight: 600; color: #5a6678; }

@media (max-width: 760px) {
    .cav-raas-feature-grid { grid-template-columns: 1fr; }
    .cav-arni-branches { grid-template-columns: 1fr; }
    .cav-arni-warn { flex-direction: column; gap: 8px; }
    .cav-arni-controls { flex-wrap: wrap; }
}

/* ----- FIX 4: REMODELING callout — the conceptual core of the survival benefit ----- */
.cav-raas-remodel {
    border: 2px solid #7c3aed !important;
    border-left: 6px solid #7c3aed !important;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0) 55%),
        linear-gradient(180deg, #ffffff, #faf7ff);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}
.cav-raas-remodel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-raas-remodel__icon { font-size: 24px; line-height: 1; }
.cav-raas-remodel__eyebrow {
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d28d9;
}
.cav-raas-remodel__lead {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-raas-remodel__lead strong { color: var(--text); font-weight: 800; }
.cav-raas-remodel__chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
}
.cav-raas-remodel__node {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--line);
    background: #fff;
}
.cav-raas-remodel__node--bad { border-color: rgba(229, 72, 77, 0.45); color: #b8323a; background: rgba(229, 72, 77, 0.05); }
.cav-raas-remodel__node--block { border-color: #7c3aed; color: #6d28d9; background: rgba(124, 58, 237, 0.08); }
.cav-raas-remodel__node--good { border-color: rgba(16, 185, 129, 0.5); color: #0c7a52; background: rgba(16, 185, 129, 0.07); }
.cav-raas-remodel__arrow { font-size: 16px; font-weight: 800; color: #94a3b8; }

/* ----- FIX 5: African American population — flagged "give instead" callout ----- */
.cav-raas-aa {
    border: 1px solid rgba(10, 132, 255, 0.4) !important;
    border-top: 3px solid var(--accent) !important;
    background: rgba(10, 132, 255, 0.045);
    padding: 18px 24px;
    gap: 6px;
    text-align: left;
    align-items: stretch;
}
.cav-raas-aa .cav-c1a-use-card__icon { font-size: 26px; }
.cav-raas-aa .cav-c1a-use-card__title { font-size: 20px; line-height: 1.25; }
.cav-raas-aa .cav-c1a-use-card__text {
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
}

/* ============================================================
   BETA BLOCKERS IN HEART FAILURE — Heart Failure sub-topic page.
   Scoped to #cavBetaBlockersHfTopicContent. Reuses the shared drug
   cards, use cards, mech tiles, mech hero, and pearl table; adds the
   code-built "Start Low, Go Slow" timeline widget (.cav-bbhf-graph /
   .cav-bbhf-svg) and a few page chrome pieces (hero, core callout,
   lead, note, mortality pill, CYP450 banner).
   ============================================================ */
#cavBetaBlockersHfTopicContent {
    display: grid;
    gap: 26px;
}

/* ----- Page chrome: topbar, hero, leads ----- */
.cav-bbhf-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-bbhf-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-bbhf-intro--sub { font-size: 14.5px; }
.cav-bbhf-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavBetaBlockersHfTopicContent .cav-bbhf-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavBetaBlockersHfTopicContent .cav-bbhf-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavBetaBlockersHfTopicContent .cav-bbhf-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavBetaBlockersHfTopicContent .cav-bbhf-hero .cav-bbhf-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-bbhf-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-bbhf-lead strong { color: var(--text); font-weight: 800; }
.cav-bbhf-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-bbhf-note strong { color: var(--text); font-weight: 800; }

/* "Mortality benefit" tag pill on every drug card (green = good outcome). */
.cav-bbhf-mort {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* ----- Core-concept callout (the survival benefit + the catch) ----- */
.cav-bbhf-core {
    border: 2px solid #10b981 !important;
    border-left: 6px solid #10b981 !important;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0) 55%),
        linear-gradient(180deg, #ffffff, #f5fdf9);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}
.cav-bbhf-core__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-bbhf-core__icon { font-size: 24px; line-height: 1; }
.cav-bbhf-core__eyebrow {
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0c7a52;
}
.cav-bbhf-core__lead {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-bbhf-core__lead strong { color: var(--text); font-weight: 800; }
.cav-bbhf-core__chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
}
.cav-bbhf-core__node {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--line);
    background: #fff;
}
.cav-bbhf-core__node--bad { border-color: rgba(229, 72, 77, 0.45); color: #b8323a; background: rgba(229, 72, 77, 0.05); }
.cav-bbhf-core__node--block { border-color: #7c3aed; color: #6d28d9; background: rgba(124, 58, 237, 0.08); }
.cav-bbhf-core__node--good { border-color: rgba(16, 185, 129, 0.5); color: #0c7a52; background: rgba(16, 185, 129, 0.07); }
.cav-bbhf-core__arrow { font-size: 16px; font-weight: 800; color: #94a3b8; }

/* ----- Mechanism: green-tinted mech hero variant + remodeling note ----- */
.cav-bbhf-mech-hero {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.06);
}
.cav-bbhf-mech-tiles { margin-top: 16px; }
.cav-bbhf-remodel-note {
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid #10b981;
    border-radius: 12px;
    background: #f8fbf9;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-bbhf-remodel-note strong { color: var(--text); font-weight: 800; }

/* ----- Dosing/CYP450 use grid: top row of two, then a full-width banner ----- */
.cav-bbhf-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cav-bbhf-cyp {
    border: 1px solid rgba(10, 132, 255, 0.4) !important;
    border-top: 3px solid var(--accent) !important;
    background: rgba(10, 132, 255, 0.045);
    padding: 18px 24px;
    gap: 6px;
    text-align: left;
    align-items: stretch;
}
.cav-bbhf-cyp .cav-c1a-use-card__icon { font-size: 26px; }
.cav-bbhf-cyp .cav-c1a-use-card__title { font-size: 20px; line-height: 1.25; }
.cav-bbhf-cyp .cav-c1a-use-card__text {
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
}

/* ============================================================
   THE "START LOW, GO SLOW" TIMELINE WIDGET (code-only, no images).
   A horizontal timeline (left -> right = time): a low failing-heart
   baseline, an early transient DIP (amber/red caution), then a sustained
   RISE above baseline (green) as the dose is uptitrated. Ascending dose
   bars step up along the bottom. Stages reveal via .is-shown.
   ============================================================ */
.cav-bbhf-widget-card { overflow: hidden; }
.cav-bbhf-widget { margin: 14px auto 0; max-width: 920px; }
.cav-bbhf-graph { position: relative; }
.cav-bbhf-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Axes & baseline */
.cav-bbhf-axis { stroke: #94a3b8; stroke-width: 2; }
.cav-bbhf-tick { stroke: #94a3b8; stroke-width: 2; }
.cav-bbhf-baseline { stroke: #b8323a; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.55; }
.cav-bbhf-baseline-label { fill: #b8323a; font-size: 12px; font-weight: 700; opacity: 0.85; }
.cav-bbhf-axis-label { fill: var(--text); font-size: 15px; font-weight: 800; }
.cav-bbhf-axis-sub { fill: #5a6678; font-size: 12px; font-weight: 600; }
.cav-bbhf-tick-label { fill: var(--text); font-size: 13px; font-weight: 700; }
.cav-bbhf-dose-label { fill: #6d28d9; font-size: 12.5px; font-weight: 800; }

/* Dose bars step up; brighten as the timeline advances */
.cav-bbhf-dose-bar {
    fill: rgba(124, 58, 237, 0.18);
    stroke: rgba(124, 58, 237, 0.3);
    stroke-width: 1;
    opacity: 0.35;
    transition: opacity 0.45s ease, fill 0.45s ease;
}
.cav-bbhf-dose-bar.is-shown { opacity: 1; fill: rgba(124, 58, 237, 0.45); }

/* The plotted status line — the key visual */
.cav-bbhf-line {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    /* hidden until its stage is shown (drawn via dashoffset) */
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    transition: stroke-dashoffset 0.7s ease;
}
.cav-bbhf-line.is-shown { stroke-dashoffset: 0; }
.cav-bbhf-line--dip { stroke: #f59e0b; }
.cav-bbhf-line--rise { stroke: #10b981; }

/* Anchor dots */
.cav-bbhf-dot {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.cav-bbhf-dot.is-shown { opacity: 1; }
.cav-bbhf-dot--start { fill: #51607a; }
.cav-bbhf-dot--dip { fill: #e5484d; }
.cav-bbhf-dot--rise { fill: #10b981; stroke: #fff; stroke-width: 2; }

/* Annotation callouts (positioned over the SVG via inline %) */
.cav-bbhf-stage { display: flex; gap: 16px; align-items: center; }
.cav-bbhf-graphcol { flex: 1 1 auto; min-width: 0; }
.cav-bbhf-annotations { flex: 0 0 230px; display: flex; flex-direction: column; gap: 10px; }
.cav-bbhf-ann {
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.cav-bbhf-ann.is-shown { opacity: 1; transform: translateY(0); }
.cav-bbhf-ann__title { font-size: 13px; font-weight: 850; color: var(--text); line-height: 1.3; }
.cav-bbhf-ann__text { margin-top: 4px; font-size: 12px; font-weight: 500; color: #475067; line-height: 1.45; }
.cav-bbhf-ann__text strong { color: var(--text); font-weight: 800; }
.cav-bbhf-ann--start { border-left: 4px solid #51607a; }
.cav-bbhf-ann--dip { border-left: 4px solid #e5484d; background: rgba(229, 72, 77, 0.045); }
.cav-bbhf-ann--dip .cav-bbhf-ann__title { color: #b8323a; }
.cav-bbhf-ann--rise { border-left: 4px solid #10b981; background: rgba(16, 185, 129, 0.05); }
.cav-bbhf-ann--rise .cav-bbhf-ann__title { color: #0c7a52; }

/* Mechanism tiles — horizontal flow of compact equal-width boxes with an
   arrow between each (scoped to this page; the shared .cav-c1a-mech-tile
   chrome stays untouched). Saves vertical space vs the stacked default. */
.cav-bbhf-mech-tiles {
    display: flex;
    align-items: stretch;
    gap: 36px;
    margin-top: 14px;
}
.cav-bbhf-mech-tiles .cav-c1a-mech-tile {
    flex: 1 1 0;
    position: relative;
    padding: 14px 16px;
}
.cav-bbhf-mech-tiles .cav-c1a-mech-tile:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translate(50%, -50%);
    font-size: 22px;
    font-weight: 800;
    color: #64748b;
    line-height: 1;
}
@media (max-width: 720px) {
    .cav-bbhf-mech-tiles { flex-direction: column; gap: 28px; }
    .cav-bbhf-mech-tiles .cav-c1a-mech-tile:not(:last-child)::after {
        content: "\2193";
        right: auto; left: 50%;
        top: auto; bottom: -14px;
        transform: translate(-50%, 50%);
    }
}

/* Controls (mirror the ARNI widget control row) */
.cav-bbhf-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.cav-bbhf-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-bbhf-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); }
.cav-bbhf-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.cav-bbhf-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-bbhf-btn--play:hover { background: var(--accent-strong); }

@media (max-width: 720px) {
    .cav-bbhf-use-grid { grid-template-columns: 1fr; }
    .cav-bbhf-stage { flex-direction: column; align-items: stretch; }
    .cav-bbhf-annotations { flex-basis: auto; }
}

/* ============================================================
   DIURETICS & SGLT2 INHIBITORS — topic page
   Scoped to #cavDiureticsSglt2TopicContent. Reuses the shared drug
   cards, mech hero, and pearl table; adds the code-built
   Symptom-vs-Survival contrast widget (.cav-dsg-contrast) and a few
   page chrome pieces (hero, top callout, lead, note, symptom/mortality
   pills).
   ============================================================ */
#cavDiureticsSglt2TopicContent {
    display: grid;
    gap: 26px;
}

/* ----- Page chrome: topbar, hero, leads ----- */
.cav-dsg-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-dsg-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-dsg-intro--sub { font-size: 14.5px; }
.cav-dsg-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavDiureticsSglt2TopicContent .cav-dsg-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavDiureticsSglt2TopicContent .cav-dsg-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavDiureticsSglt2TopicContent .cav-dsg-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavDiureticsSglt2TopicContent .cav-dsg-hero .cav-dsg-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-dsg-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-dsg-lead strong { color: var(--text); font-weight: 800; }
.cav-dsg-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-dsg-note strong { color: var(--text); font-weight: 800; }

/* Drug-card tag pills: symptom-only (caution/amber) vs mortality (green). */
.cav-dsg-symp,
.cav-dsg-mort {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cav-dsg-symp {
    background: rgba(245, 158, 11, 0.16);
    color: #92600a;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.cav-dsg-mort {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
/* Green-toned warn line variant (mirrors the red __warn but positive). */
.cav-pharm-drug-card__warn.cav-dsg-warn--good {
    background: rgba(16, 185, 129, 0.1);
    color: #0c7a52;
    border-color: rgba(16, 185, 129, 0.4);
}

/* ----- Top high-yield callout (the mortality-vs-symptom framing) ----- */
.cav-dsg-core {
    border: 2px solid var(--accent) !important;
    border-left: 6px solid var(--accent) !important;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.09), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.12);
}
.cav-dsg-core__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-dsg-core__icon { font-size: 24px; line-height: 1; }
.cav-dsg-core__eyebrow {
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.cav-dsg-core__lead {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-dsg-core__lead strong { color: var(--text); font-weight: 800; }
.cav-dsg-core__chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
}
.cav-dsg-core__node {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--line);
    background: #fff;
}
.cav-dsg-core__node--bad { border-color: rgba(245, 158, 11, 0.5); color: #92600a; background: rgba(245, 158, 11, 0.07); }
.cav-dsg-core__node--good { border-color: rgba(16, 185, 129, 0.5); color: #0c7a52; background: rgba(16, 185, 129, 0.07); }
.cav-dsg-core__arrow { font-size: 16px; font-weight: 800; color: #94a3b8; }
.cav-dsg-core__sep { font-size: 18px; font-weight: 800; color: #cbd5e1; padding: 0 4px; }

/* ----- Mechanism: green-tinted mech hero variant ----- */
.cav-dsg-mort-hero {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.06);
}

/* ============================================================
   THE SYMPTOM-vs-SURVIVAL CONTRAST WIDGET (code-only, no images).
   Two equal side-by-side panels with a vertical divider. Each panel
   builds top -> bottom: schematic nephron-site indicator -> mechanism
   -> effect -> survival flag (the punchline) -> adverse effect. Rows
   reveal via .is-shown; the two survival flags pulse via .is-flagged.
   ============================================================ */
.cav-dsg-widget-card { overflow: hidden; }
.cav-dsg-widget { margin: 14px auto 0; max-width: 920px; }
.cav-dsg-contrast { position: relative; }
.cav-dsg-title {
    text-align: center;
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    margin: 0 0 16px;
}

.cav-dsg-panels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 22px;
    align-items: stretch;
}
.cav-dsg-divider {
    width: 2px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0) 0%, rgba(148, 163, 184, 0.55) 12%, rgba(148, 163, 184, 0.55) 88%, rgba(148, 163, 184, 0) 100%);
    border-radius: 2px;
}
.cav-dsg-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cav-dsg-panel__head { text-align: center; margin-bottom: 2px; }
.cav-dsg-panel__name {
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    line-height: 1.2;
}
.cav-dsg-panel__sub {
    font-size: 13px;
    font-weight: 700;
    color: #5a6678;
    font-style: italic;
    margin-top: 2px;
}

/* Rows start hidden (lifted/faded) and reveal in step. */
.cav-dsg-row {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.cav-dsg-row.is-shown { opacity: 1; transform: none; }

/* Schematic nephron-site indicator (labeled segment, NOT kidney art). */
.cav-dsg-site {
    border-radius: 12px;
    padding: 10px 14px;
    border: 2px solid;
}
.cav-dsg-site__label {
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
.cav-dsg-site__seg {
    font-size: 14.5px;
    font-weight: 800;
    margin-top: 3px;
    line-height: 1.3;
}
.cav-dsg-site--loop {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
}
.cav-dsg-site--sglt2 {
    border-color: #0a84ff;
    background: rgba(10, 132, 255, 0.08);
    color: #0860c4;
}

/* Plain mechanism / effect boxes. */
.cav-dsg-box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    font-weight: 500;
}
.cav-dsg-box strong { color: var(--text); font-weight: 800; }
.cav-dsg-box--pos {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.06);
}
.cav-dsg-box--small { font-size: 13px; padding: 10px 14px; }
/* Adverse-effect boxes in the figure: red alert icon so learners don't forget them. */
.cav-dsg-box--ae { display: flex; align-items: flex-start; gap: 7px; }
.cav-dsg-ae-icon { color: #e5484d; font-weight: 900; font-size: 14px; line-height: 1.35; flex-shrink: 0; }

/* Per-card "Mechanism" dropdown (native <details>) — tucks the mechanism away
   to reduce card overload; click to expand. */
.cav-dsg-mech { margin-top: 6px; border-top: 1px solid var(--line); }
.cav-dsg-mech__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-strong);
}
.cav-dsg-mech__summary::-webkit-details-marker { display: none; }
.cav-dsg-mech__summary::before {
    content: "\25B8";
    font-size: 11px;
    transition: transform 0.15s ease;
}
.cav-dsg-mech[open] .cav-dsg-mech__summary::before { transform: rotate(90deg); }
.cav-dsg-mech__body { font-size: 13px; line-height: 1.5; color: #475067; padding: 2px 2px 6px; }

/* The survival flags — the punchline. Most prominent, color-coded oppositely. */
.cav-dsg-flag {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 14px 16px;
    border: 2px solid;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}
.cav-dsg-flag__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.cav-dsg-flag__text strong { font-weight: 850; }
.cav-dsg-flag--caution {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.12);
    color: #92600a;
}
.cav-dsg-flag--good {
    border-color: rgba(16, 185, 129, 0.6);
    background: rgba(16, 185, 129, 0.13);
    color: #0c7a52;
}
/* Pulse/emphasize the two flags once the survival stage is reached. */
.cav-dsg-contrast.is-flagged .cav-dsg-flag.is-shown {
    animation: cav-dsg-flag-pulse 1.6s ease-in-out 2;
}
@keyframes cav-dsg-flag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0); transform: none; }
    50% { box-shadow: 0 0 0 5px rgba(148, 163, 184, 0.18); transform: scale(1.015); }
}

/* The punchline caption below the panels. */
.cav-dsg-punch {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    text-align: center;
}
.cav-dsg-punch strong { color: var(--text); font-weight: 800; }

/* Controls (mirror the ARNI / Beta-Blocker widget control row). */
.cav-dsg-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.cav-dsg-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-dsg-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); }
.cav-dsg-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.cav-dsg-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-dsg-btn--play:hover { background: var(--accent-strong); }

@media (max-width: 720px) {
    .cav-dsg-panels { grid-template-columns: 1fr; gap: 0; }
    .cav-dsg-divider { display: none; }
    .cav-dsg-panel--sglt2 { margin-top: 22px; padding-top: 22px; border-top: 2px solid var(--line); }
}

/* ============================================================
   VASODILATORS & NATRIURETIC AGENTS — topic page
   Scoped to #cavVasoNatriureticTopicContent. Reuses the shared drug
   cards, mech hero, pearl table, and the .cav-dsg-mech dropdown idea
   (copied here as .cav-vnat-mech*). Adds the code-built
   "Convergence on Vasodilation" widget (.cav-vnat-conv) — four drug
   entry boxes, a shared ↑cGMP node (nitrates/vericiguat/nesiritide),
   and a shared VASODILATION endpoint; hydralazine bypasses the node.
   ============================================================ */
#cavVasoNatriureticTopicContent {
    display: grid;
    gap: 26px;
}

/* Option A: let each Part-2 drug card hug its own content (no stretch to the
   tallest card), so the short cards don't leave empty white space. Scoped to
   this page only — other pages' drug-card grids keep their default stretch. */
#cavVasoNatriureticTopicContent .cav-pharm-drug-card-grid { align-items: start; }

/* ----- Page chrome: topbar, hero, leads, note ----- */
.cav-vnat-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-vnat-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-vnat-intro--sub { font-size: 14.5px; }
.cav-vnat-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavVasoNatriureticTopicContent .cav-vnat-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavVasoNatriureticTopicContent .cav-vnat-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavVasoNatriureticTopicContent .cav-vnat-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavVasoNatriureticTopicContent .cav-vnat-hero .cav-vnat-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-vnat-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-vnat-lead strong { color: var(--text); font-weight: 800; }
.cav-vnat-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-vnat-note strong { color: var(--text); font-weight: 800; }

/* Drug-card tag pills: pathway badges (cGMP vs separate arterial route). */
.cav-vnat-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cav-vnat-tag--cgmp {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.cav-vnat-tag--arterial {
    background: rgba(10, 132, 255, 0.1);
    color: #0860c4;
    border: 1px solid rgba(10, 132, 255, 0.35);
}
.cav-vnat-tag--venous {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.35);
}

/* ----- Top high-yield callout (the African-American / ACEi-intolerant fact) ----- */
.cav-vnat-core {
    border: 2px solid var(--accent) !important;
    border-left: 6px solid var(--accent) !important;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.09), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.12);
}
.cav-vnat-core__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-vnat-core__icon { font-size: 24px; line-height: 1; }
.cav-vnat-core__eyebrow {
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.cav-vnat-core__lead {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-vnat-core__lead strong { color: var(--text); font-weight: 800; }

/* ----- Per-card "Mechanism" dropdown (native <details>), copied from dsg ----- */
.cav-vnat-mech { margin-top: 6px; border-top: 1px solid var(--line); }
.cav-vnat-mech__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-strong);
}
.cav-vnat-mech__summary::-webkit-details-marker { display: none; }
.cav-vnat-mech__summary::before {
    content: "\25B8";
    font-size: 11px;
    transition: transform 0.15s ease;
}
.cav-vnat-mech[open] .cav-vnat-mech__summary::before { transform: rotate(90deg); }
.cav-vnat-mech__body { font-size: 13px; line-height: 1.5; color: #475067; padding: 2px 2px 6px; }

/* Red ⚠ alert icon on adverse-effect / caution lines (mirrors dsg). */
.cav-vnat-ae-icon { color: #e5484d; font-weight: 900; font-size: 14px; line-height: 1.35; flex-shrink: 0; }

/* ============================================================
   THE "CONVERGENCE ON VASODILATION" WIDGET (code-only, no images).
   TOP-DOWN 3-TIER FUNNEL:
     TIER 1  four drug entry boxes in a horizontal row
     ARROWS  hydralazine drops straight down to the arterial card;
             nitrates/vericiguat/nesiritide converge on ↑cGMP
     TIER 2  arterial card (left) + ↑cGMP node (right)
     ARROWS  both mid nodes converge on the endpoint
     TIER 3  the shared VASODILATION endpoint
   Steps reveal via .is-shown; controls mirror the dsg/ARNI widgets.
   ============================================================ */
.cav-vnat-widget-card { overflow: hidden; }
.cav-vnat-widget { margin: 14px auto 0; max-width: 920px; }
.cav-vnat-conv { position: relative; }
.cav-vnat-conv__title {
    text-align: center;
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    margin: 0 0 16px;
}

/* Vertical funnel: tier → arrows → tier → arrows → endpoint. */
.cav-vnat-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* A tier row of boxes. Drugs = 4 equal columns; mid = arterial | cGMP. */
.cav-vnat-tier {
    display: grid;
    gap: 12px;
    align-items: stretch;
}
.cav-vnat-tier--drugs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cav-vnat-tier--mid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* SVG arrow band between tiers — stretches edge-to-edge, fixed height. */
.cav-vnat-arrows {
    width: 100%;
    line-height: 0;
}
.cav-vnat-arrows--t1 { height: 46px; }
.cav-vnat-arrows--t2 { height: 46px; max-width: 640px; margin: 0 auto; width: 100%; }
.cav-vnat-arrows__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cav-vnat-arrow {
    stroke-width: 1.6;
    opacity: 0.18;
    transition: opacity 0.4s ease, stroke-width 0.3s ease;
    vector-effect: non-scaling-stroke;
}
.cav-vnat-arrow--arterial { stroke: #0a84ff; }
.cav-vnat-arrow--cgmp { stroke: #10b981; }
.cav-vnat-arrow.is-flow { opacity: 1; stroke-width: 2.4; }
.cav-vnat-arrow.is-dim { opacity: 0.1; }

/* An entry-point box (one drug). Reveals + highlights. */
.cav-vnat-entry {
    position: relative;
    border: 2px solid var(--line);
    border-radius: 13px;
    padding: 11px 13px;
    background: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cav-vnat-entry.is-shown { opacity: 1; transform: none; }
.cav-vnat-entry__name {
    font-size: 15px;
    font-weight: 850;
    color: var(--text);
    line-height: 1.2;
}
.cav-vnat-entry__path {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    font-weight: 500;
    margin-top: 4px;
}
.cav-vnat-entry__path strong { font-weight: 800; }
.cav-vnat-entry__tag {
    display: inline-block;
    margin-top: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cav-vnat-entry__note {
    font-size: 11px;
    line-height: 1.4;
    color: #5a6678;
    font-style: italic;
    margin-top: 6px;
}
/* Color the entry by route to vasodilation. cGMP entries = green-leaning,
   hydralazine (separate arterial) = blue. */
.cav-vnat-entry--cgmp .cav-vnat-entry__tag { background: rgba(16, 185, 129, 0.15); color: #0c7a52; }
.cav-vnat-entry--arterial .cav-vnat-entry__tag { background: rgba(10, 132, 255, 0.12); color: #0860c4; }
.cav-vnat-entry.is-active {
    border-color: #ef6c00;
    background: rgba(239, 108, 0, 0.06);
    box-shadow: 0 6px 18px rgba(239, 108, 0, 0.18);
}
.cav-vnat-entry--cgmp.is-active { border-color: #10b981; background: rgba(16, 185, 129, 0.08); box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18); }
.cav-vnat-entry--arterial.is-active { border-color: #0a84ff; background: rgba(10, 132, 255, 0.08); box-shadow: 0 6px 18px rgba(10, 132, 255, 0.18); }

/* TIER 2 nodes: the arterial card (left) and the shared ↑cGMP node (right). */
.cav-vnat-mid {
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.cav-vnat-mid.is-shown { opacity: 1; transform: none; }
.cav-vnat-mid--cgmp { border-color: #10b981; background: rgba(16, 185, 129, 0.07); }
.cav-vnat-mid--arterial { border-color: #0a84ff; background: rgba(10, 132, 255, 0.06); }
.cav-vnat-mid--cgmp.is-active { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.16); }
.cav-vnat-mid--arterial.is-active { box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.16); }
.cav-vnat-mid__label {
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.cav-vnat-mid--cgmp .cav-vnat-mid__label { color: #0c7a52; }
.cav-vnat-mid--arterial .cav-vnat-mid__label { color: #0860c4; }
.cav-vnat-mid__big {
    font-size: 17px;
    font-weight: 850;
    line-height: 1.15;
    margin-top: 2px;
}
.cav-vnat-mid--cgmp .cav-vnat-mid__big { color: #0c7a52; }
.cav-vnat-mid--arterial .cav-vnat-mid__big { color: #0860c4; }
.cav-vnat-mid__sub {
    font-size: 11.5px;
    color: #475067;
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.4;
}
.cav-vnat-mid__sub strong { color: var(--text); font-weight: 850; }

/* TIER 3: the shared VASODILATION endpoint (the punchline box). */
.cav-vnat-endpoint {
    border: 2px solid #ef6c00;
    border-radius: 16px;
    padding: 16px 16px;
    background: rgba(239, 108, 0, 0.07);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
}
.cav-vnat-endpoint.is-shown { opacity: 1; transform: none; }
.cav-vnat-conv.is-arrived .cav-vnat-endpoint.is-shown {
    animation: cav-vnat-endpoint-pulse 1.6s ease-in-out 2;
}
@keyframes cav-vnat-endpoint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 108, 0, 0); transform: none; }
    50% { box-shadow: 0 0 0 6px rgba(239, 108, 0, 0.2); transform: scale(1.02); }
}
.cav-vnat-endpoint__label {
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c1391a;
}
.cav-vnat-endpoint__big {
    font-size: 19px;
    font-weight: 850;
    color: #b5380f;
    line-height: 1.15;
    margin-top: 3px;
}
.cav-vnat-endpoint__sub {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.4;
}

/* Punchline caption below the diagram. */
.cav-vnat-punch {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    text-align: center;
}
.cav-vnat-punch strong { color: var(--text); font-weight: 800; }

/* Controls (mirror the dsg / ARNI / Beta-Blocker control row). */
.cav-vnat-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.cav-vnat-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-vnat-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); }
.cav-vnat-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.cav-vnat-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-vnat-btn--play:hover { background: var(--accent-strong); }

@media (max-width: 760px) {
    /* Top drug boxes wrap to 2×2; mid stays two-up; arrow bands shorten. */
    .cav-vnat-tier--drugs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cav-vnat-arrows--t1 { height: 34px; }
    .cav-vnat-arrows--t2 { height: 34px; }
}

/* ============================================================
   INOTROPES — topic page (the last Heart Failure sub-page)
   Scoped to #cavInotropesTopicContent. Reuses the shared drug cards,
   mech hero, pearl table, and the .cav-dsg-mech dropdown + .cav-dsg-ae-icon
   red alert. Adds the code-built Dopamine Dose-Response widget
   (.cav-ino-dose) — a horizontal dose scale with three clickable tier
   segments and, below, the active receptor + effect boxes.
   ============================================================ */
#cavInotropesTopicContent {
    display: grid;
    gap: 26px;
}

/* Option A: let each Part-2 drug card hug its own content (no stretch to the
   tallest card). Scoped to this page only. */
#cavInotropesTopicContent .cav-pharm-drug-card-grid { align-items: start; }

/* ----- Page chrome: topbar, hero, leads, note ----- */
.cav-ino-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.cav-ino-intro {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-intro--sub { font-size: 14.5px; }
.cav-ino-intro strong { color: var(--text); font-weight: 800; }

/* Overview hero — clean blue-bordered widget + hover lift/glow, larger intro. */
#cavInotropesTopicContent .cav-ino-hero {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 20px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#cavInotropesTopicContent .cav-ino-hero:hover {
    transform: translateY(-2px);
    border-color: #4dabff;
    box-shadow: 0 18px 44px rgba(10, 132, 255, 0.22), 0 0 0 4px rgba(10, 132, 255, 0.14);
}
#cavInotropesTopicContent .cav-ino-hero__eyebrow {
    color: var(--accent-strong);
    letter-spacing: 0.08em;
}
#cavInotropesTopicContent .cav-ino-hero .cav-ino-intro {
    font-size: 17.5px;
    line-height: 1.6;
}
.cav-ino-lead {
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-lead strong { color: var(--text); font-weight: 800; }
.cav-ino-note {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-note strong { color: var(--text); font-weight: 800; }

/* Red alert icon (mirrors .cav-dsg-ae-icon) for the danger points. */
.cav-ino-ae-icon { color: #e5484d; font-weight: 900; font-size: 14px; line-height: 1.35; flex-shrink: 0; }

/* Drug-card tag pills: receptor / mechanism class. */
.cav-ino-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cav-ino-tag--beta {
    background: rgba(16, 185, 129, 0.15);
    color: #0c7a52;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.cav-ino-tag--dose {
    background: rgba(10, 132, 255, 0.12);
    color: #0860c4;
    border: 1px solid rgba(10, 132, 255, 0.4);
}
.cav-ino-tag--pde {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.4);
}

/* ----- Top high-yield callout (the overarching inotrope theme) ----- */
.cav-ino-core {
    border: 2px solid var(--accent) !important;
    border-left: 6px solid var(--accent) !important;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(10, 132, 255, 0.09), rgba(10, 132, 255, 0) 55%),
        linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.12);
}
.cav-ino-core__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cav-ino-core__icon { font-size: 24px; line-height: 1; }
.cav-ino-core__eyebrow {
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.cav-ino-core__lead {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-core__lead strong { color: var(--text); font-weight: 800; }
.cav-ino-core__chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 6px;
}
.cav-ino-core__node {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--line);
    background: #fff;
}
.cav-ino-core__node--bad { border-color: rgba(229, 72, 77, 0.5); color: #b42318; background: rgba(229, 72, 77, 0.07); }
.cav-ino-core__node--mid { border-color: rgba(10, 132, 255, 0.5); color: #0860c4; background: rgba(10, 132, 255, 0.07); }
.cav-ino-core__node--good { border-color: rgba(16, 185, 129, 0.5); color: #0c7a52; background: rgba(16, 185, 129, 0.07); }
.cav-ino-core__arrow { font-size: 16px; font-weight: 800; color: #94a3b8; }
.cav-ino-core__foot {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-core__foot strong { color: var(--text); font-weight: 800; }

/* ----- Digoxin reference card (muted, neutral chrome) ----- */
.cav-ino-digoxin {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.cav-ino-digoxin strong { color: var(--text); font-weight: 800; }

/* ----- Mechanism: caution-tinted mech hero variant (the mortality message) ----- */
.cav-ino-mort-hero {
    border-color: rgba(229, 72, 77, 0.4);
    background: rgba(229, 72, 77, 0.05);
}

/* ============================================================
   THE DOPAMINE DOSE-RESPONSE WIDGET (code-only, no images).
   A horizontal dose scale with three clickable tier segments
   (LOW / INTERMEDIATE / HIGH) and, below it, a receptor + effect
   column per tier. The active tier lights up; the others dim. A
   plain-language caption updates per tier. Play steps low -> high;
   Reset returns to low; Next / Back step manually.
   ============================================================ */
.cav-ino-widget-card { overflow: hidden; }
.cav-ino-widget { margin: 14px auto 0; max-width: 920px; }
.cav-ino-dose { position: relative; }
.cav-ino-dose__title {
    text-align: center;
    font-size: 18px;
    font-weight: 850;
    color: var(--text);
    margin: 0 0 16px;
}

/* The dose scale + tier segments. */
.cav-ino-scale { margin-bottom: 16px; }
.cav-ino-scale__axis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a6678;
}
.cav-ino-scale__arrow { color: #94a3b8; font-weight: 800; letter-spacing: 0.02em; text-transform: none; }
.cav-ino-scale__segs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cav-ino-seg {
    appearance: none;
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: #fff;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    opacity: 0.55;
}
.cav-ino-seg:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); opacity: 1; }
.cav-ino-seg__band { font-size: 13.5px; font-weight: 850; color: var(--text); letter-spacing: 0.03em; }
.cav-ino-seg__dose { font-size: 12px; font-weight: 700; color: #5a6678; }
.cav-ino-seg.is-active { opacity: 1; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); }
.cav-ino-seg--good.is-active { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.cav-ino-seg--inotrope.is-active { border-color: #0a84ff; background: rgba(10, 132, 255, 0.08); }
.cav-ino-seg--bad.is-active { border-color: #e5484d; background: rgba(229, 72, 77, 0.08); }

/* The receptor + effect columns (one per tier). */
.cav-ino-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
}
.cav-ino-tier {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.cav-ino-tier__arrow { text-align: center; font-size: 16px; font-weight: 800; color: #94a3b8; line-height: 1; }
.cav-ino-card {
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.cav-ino-card__label {
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a6678;
}
.cav-ino-card__main { font-size: 14.5px; font-weight: 800; color: var(--text); margin-top: 3px; line-height: 1.3; }
.cav-ino-card__sub { font-size: 12px; font-weight: 600; color: #5a6678; font-style: italic; margin-top: 2px; }
.cav-ino-card__body { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.45; margin-top: 3px; }
.cav-ino-card__body strong { color: var(--text); font-weight: 800; }
.cav-ino-card.is-dim { opacity: 0.42; }
.cav-ino-card.is-active { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); }
/* active tinting follows the tier tone */
.cav-ino-tier--good .cav-ino-card.is-active { border-color: #10b981; }
.cav-ino-tier--good .cav-ino-card--effect.is-active { background: rgba(16, 185, 129, 0.07); }
.cav-ino-tier--inotrope .cav-ino-card.is-active { border-color: #0a84ff; }
.cav-ino-tier--inotrope .cav-ino-card--effect.is-active { background: rgba(10, 132, 255, 0.07); }
.cav-ino-tier--bad .cav-ino-card.is-active { border-color: #e5484d; }
.cav-ino-tier--bad .cav-ino-card--effect.is-active { background: rgba(229, 72, 77, 0.07); }

/* The plain-language caption. */
.cav-ino-caption {
    margin: 18px 0 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    border-left: 5px solid #94a3b8;
    background: #f8fafc;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cav-ino-caption strong { color: var(--text); font-weight: 800; }
.cav-ino-caption--good { border-left-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.cav-ino-caption--inotrope { border-left-color: #0a84ff; background: rgba(10, 132, 255, 0.05); }
.cav-ino-caption--bad { border-left-color: #e5484d; background: rgba(229, 72, 77, 0.05); }

/* The progression note. */
.cav-ino-punch {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    text-align: center;
}
.cav-ino-punch strong { color: var(--text); font-weight: 800; }

/* Controls (mirror the dsg / vnat widget control row). */
.cav-ino-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.cav-ino-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cav-ino-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); }
.cav-ino-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.cav-ino-btn--play {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cav-ino-btn--play:hover { background: var(--accent-strong); }

@media (max-width: 720px) {
    .cav-ino-scale__segs { grid-template-columns: 1fr; }
    .cav-ino-tiers { grid-template-columns: 1fr; }
    .cav-ino-scale__axis { font-size: 10.5px; }
    .cav-ino-scale__arrow { display: none; }
}