/* ============================================================
   CAV PATHOLOGY · Vasculitis topic pages
   Styles for: disease card component, image placeholder,
   vessel-size navigation map, page layout scaffolding.
   ============================================================ */

/* ----------------------------------------------------------
   Topic-content wrapper spacing — matches every other built
   topic (#cav…TopicContent { display: grid; gap: 34px }).
   Without this the section cards stack with no gap.
   ---------------------------------------------------------- */

#cavVasculitisFoundationsTopicContent,
#cavVasculitisLargeVesselTopicContent,
#cavVasculitisMediumVesselTopicContent,
#cavVasculitisSmallVesselTopicContent {
    display: grid;
    gap: 34px;
}

/* ----------------------------------------------------------
   Disease Card Component — .vasc-disease-card
   Distinct bordered field widgets on a neutral steel-blue /
   charcoal / white scheme, diagnosis sub-lines, synthesis
   clincher, calm NBME trap, and a closing Buzzwords anchor.
   ---------------------------------------------------------- */

.vasc-disease-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
    background: #ffffff;
    border: 1px solid rgba(10, 132, 255, 0.18);
    box-shadow: none;
}

/* Header */
.vasc-dc-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vasc-dc-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.10);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vasc-dc-name {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.18;
    margin: 0;
    color: var(--text);
}

.vasc-dc-aka {
    display: block;
    margin-top: 5px;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    color: var(--muted-strong);
}

.vasc-dc-placeholder-name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--muted);
    font-style: italic;
}

/* High-level disease summary at the top of each card */
.vasc-dc-summary {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--text);
}

/* Collapsible disease card — click the header to expand / collapse */
.vasc-dc-collapse { display: block; }

.vasc-dc-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vasc-dc-collapse > summary::-webkit-details-marker { display: none; }

.vasc-dc-collapse > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.vasc-dc-collapse > summary:hover .vasc-dc-name { color: var(--accent-strong); }

.vasc-dc-collapse-chevron {
    flex: 0 0 auto;
    margin-top: 7px;
    font-size: 16px;
    line-height: 1;
    color: var(--accent-strong);
    transition: transform 0.2s ease;
}

.vasc-dc-collapse[open] .vasc-dc-collapse-chevron { transform: rotate(180deg); }

.vasc-dc-collapse-body {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Field widgets — each a distinct light-blue-outlined box on white */
.vasc-dc-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vasc-dc-row {
    display: flex;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid rgba(10, 132, 255, 0.16);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vasc-dc-row:hover {
    border-color: rgba(10, 132, 255, 0.32);
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.06);
}

.vasc-dc-row-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vasc-dc-row-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vasc-dc-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Widget header — light-blue brand, bold, larger than body text */
.vasc-dc-row-label {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--accent-strong);
}

.vasc-dc-row-value {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
}

/* Diagnosis sub-lines */
.vasc-dc-sublines {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vasc-dc-sublines li {
    display: flex;
    gap: 9px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
}

.vasc-dc-subicon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.6;
}

/* Vessel & Mechanism — collapsible deep-dive widget */
.vasc-dc-mech {
    border: 1px solid rgba(10, 132, 255, 0.16);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vasc-dc-mech:hover {
    border-color: rgba(10, 132, 255, 0.32);
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.06);
}

.vasc-dc-mech > summary {
    display: flex;
    gap: 13px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.vasc-dc-mech > summary::-webkit-details-marker { display: none; }

.vasc-dc-mech-toggle {
    align-self: flex-start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-strong);
}

.vasc-dc-mech-toggle::before {
    content: '▸';
    font-size: 11px;
    transition: transform 0.18s ease;
}

.vasc-dc-mech[open] .vasc-dc-mech-toggle::before { transform: rotate(90deg); }

.vasc-dc-mech-body {
    padding: 0 16px 15px 51px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted-strong);
}

.vasc-dc-mech-body p { margin: 0; }

/* Buzzwords anchor — closing high-yield summary, gold/amber accent */
.vasc-dc-buzzword {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(180, 83, 9, 0.32);
    border-radius: 12px;
    background: rgba(180, 83, 9, 0.05);
}

.vasc-dc-buzzword-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b45309;
}

.vasc-dc-chip {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #92400e;
}

/* "Think [disease] when…" synthesis clincher */
.vasc-dc-clincher {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid rgba(10, 132, 255, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}

.vasc-dc-clincher-icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.6;
}

.vasc-dc-clincher p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
}

/* AUC Essential — school-must-know facts, calm blue accent
   (distinct from the red NBME trap callout below) */
.vasc-dc-auc {
    border: 1px solid rgba(10, 132, 255, 0.22);
    border-left: 3px solid var(--accent);
    background: rgba(10, 132, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vasc-dc-auc-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.vasc-dc-auc p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

/* PAN vs Kawasaki comparison widget — always-open learning panel */
.vasc-compare-block .section-label {
    margin-bottom: 6px;
}

.vasc-compare-shared {
    margin: 4px 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted-strong);
}

.vasc-compare-shared-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.vasc-compare-table {
    display: grid;
    gap: 8px;
}

.vasc-compare-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.vasc-compare-attr {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.vasc-compare-cell {
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.05);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.vasc-compare-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.07);
    background: rgba(240, 247, 255, 0.96);
}

/* column name headers — color-coded so PAN vs Kawasaki is unmistakable */
.vasc-compare-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 10px 16px;
}

.vasc-compare-name.is-pan {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.85);
    border-color: rgba(239, 68, 68, 0.18);
}

.vasc-compare-name.is-kawasaki {
    color: var(--accent-strong);
    background: rgba(240, 247, 255, 0.98);
    border-color: rgba(10, 132, 255, 0.16);
}

.vasc-compare-name:hover {
    transform: none;
    box-shadow: none;
}

/* yellow key-split callout (matches physiology elasticity callout) */
.vasc-compare-callout {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,250,235,0.98), rgba(255,245,222,0.94));
    border: 1px solid rgba(229, 190, 106, 0.28);
}

.vasc-compare-callout strong {
    display: block;
    color: #7c5a12;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.vasc-compare-callout p {
    margin: 6px 0 0;
    color: #8c6010;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .vasc-compare-row {
        grid-template-columns: 1fr 1fr;
    }
    .vasc-compare-attr {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .vasc-compare-head .vasc-compare-attr {
        display: none;
    }
}

/* NBME trap — calm, contained callout at the very bottom */
.vasc-dc-nbme {
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.04);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vasc-dc-nbme-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b91c1c;
}

.vasc-dc-nbme p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

/* Images row inside a disease card */
.vasc-dc-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vasc-dc-images:empty { display: none; }

/* ----------------------------------------------------------
   Image Placeholder — .vasc-img-placeholder
   ---------------------------------------------------------- */

.vasc-img-placeholder {
    border: 2px dashed rgba(10,132,255,0.35);
    border-radius: 10px;
    background: rgba(10,132,255,0.04);
    width: 180px;
    height: 135px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    flex: 0 0 auto;
    overflow: hidden;
}

.vasc-img-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.vasc-img-placeholder-icon {
    font-size: 22px;
    opacity: 0.4;
}

.vasc-img-placeholder-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent-strong);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vasc-img-placeholder-label.is-priority::before {
    content: '★ ';
    color: #f59e0b;
}

.vasc-img-caption-slot,
.vasc-img-citation-slot {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    text-align: center;
}

/* Standalone image placeholders (outside a card) */
.vasc-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ----------------------------------------------------------
   Vessel-Size Navigation Map — .vasc-vessel-nav
   ---------------------------------------------------------- */

.vasc-vessel-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    margin: 8px 0 4px;
}

.vasc-vessel-nav-btn {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background: var(--surface-strong);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}

.vasc-vessel-nav-btn:hover,
.vasc-vessel-nav-btn:focus-visible {
    box-shadow: 0 8px 24px rgba(15,23,42,0.10);
    transform: translateY(-2px);
    outline: none;
}

.vasc-vessel-nav-btn.is-large {
    border-color: rgba(239,68,68,0.35);
}
.vasc-vessel-nav-btn.is-large:hover,
.vasc-vessel-nav-btn.is-large:focus-visible {
    border-color: #ef4444;
}

.vasc-vessel-nav-btn.is-medium {
    border-color: rgba(245,158,11,0.35);
}
.vasc-vessel-nav-btn.is-medium:hover,
.vasc-vessel-nav-btn.is-medium:focus-visible {
    border-color: #f59e0b;
}

.vasc-vessel-nav-btn.is-small {
    border-color: rgba(10,132,255,0.35);
}
.vasc-vessel-nav-btn.is-small:hover,
.vasc-vessel-nav-btn.is-small:focus-visible {
    border-color: #0a84ff;
}

.vasc-vessel-nav-size-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.vasc-vessel-nav-btn.is-large .vasc-vessel-nav-size-dot  { background: #ef4444; }
.vasc-vessel-nav-btn.is-medium .vasc-vessel-nav-size-dot { background: #f59e0b; }
.vasc-vessel-nav-btn.is-small .vasc-vessel-nav-size-dot  { background: #0a84ff; }

.vasc-vessel-nav-label {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.vasc-vessel-nav-examples {
    font-size: 12px;
    color: var(--muted-strong);
}

.vasc-vessel-nav-note {
    width: 100%;
    font-size: 12px;
    color: var(--muted);
    padding: 6px 4px 0;
}

/* ----------------------------------------------------------
   Sub-section headers (Small Vessel ANCA / Immune Complex)
   ---------------------------------------------------------- */

/* Sub-section dividers (ANCA-Associated / Immune Complex) — no gray box,
   left-aligned, large bold heading acting as a clear section divider. */
.vasc-subsection-block {
    background: none;
    border: none;
    box-shadow: none;
    padding: 4px 0 0;
}

.vasc-subsection-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 12px;
}

.vasc-subsection-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--text);
}

.vasc-subsection-badge.is-anca { color: var(--accent-strong); }
.vasc-subsection-badge.is-immune-complex { color: #047857; }
.vasc-subsection-badge.is-large-vessel { color: var(--accent-strong); }

.vasc-subsection-divider {
    height: 2px;
    border-radius: 999px;
    background: var(--line);
    flex: 1;
}

/* ----------------------------------------------------------
   General page layout helpers
   ---------------------------------------------------------- */

.vasc-section-intro {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 500;
    color: var(--text);
    max-width: 72ch;
    margin: 0 0 4px;
}

.vasc-content-tbd {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    border-left: 3px solid var(--line);
    padding: 8px 14px;
    margin: 8px 0;
    background: rgba(15,23,42,0.02);
    border-radius: 0 6px 6px 0;
}

.vasc-body-copy {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 560;
    max-width: 72ch;
    margin: 0 0 14px;
}

.vasc-body-copy:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   Deep-dive disclosure — .vasc-deepdive (native <details>)
   Mirrors the antiplatelets mechanism-detail disclosure.
   ---------------------------------------------------------- */

.vasc-deepdive {
    margin-top: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

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

.vasc-deepdive > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    user-select: none;
}

.vasc-deepdive > summary::-webkit-details-marker { display: none; }

.vasc-deepdive > summary::before {
    content: '▸';
    color: var(--accent-strong);
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.vasc-deepdive[open] > summary::before { transform: rotate(90deg); }

.vasc-deepdive__body {
    padding: 0 16px 15px;
    color: var(--text);
    line-height: 1.6;
}

.vasc-deepdive__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ----------------------------------------------------------
   Mechanism cards row — .vasc-mech-grid / .vasc-mech-card
   ---------------------------------------------------------- */

.vasc-mech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 10px;
}

@media (max-width: 720px) {
    .vasc-mech-grid { grid-template-columns: 1fr; }
}

/* Integrated columns — no boxes. A thin divider separates them on desktop. */
.vasc-mech-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 721px) {
    .vasc-mech-card + .vasc-mech-card {
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 720px) {
    .vasc-mech-card {
        padding: 4px 0 18px;
    }
    .vasc-mech-card + .vasc-mech-card {
        border-top: 1px solid var(--line);
        padding-top: 18px;
    }
}

.vasc-mech-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 2.8em;
}

.vasc-mech-card__type {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.vasc-mech-card__most-common {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(245,158,11,0.14);
    color: #92400e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vasc-mech-card__oneliner {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-strong);
    margin: 0;
    flex: 1 1 auto;
}

/* ----------------------------------------------------------
   Concept map — .vasc-concept-map
   Root node → three vessel-size lanes (route to topic pages).
   Reuses the vessel-nav color language. Nodes + connectors only.
   ---------------------------------------------------------- */

.vasc-concept-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 2px;
}

.vasc-cm-root {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(240,247,255,0.98), rgba(232,244,255,0.92));
    border: 1px solid rgba(10,132,255,0.18);
    color: var(--accent-strong);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 20px rgba(10,132,255,0.08);
}

.vasc-cm-trunk {
    width: 2px;
    height: 22px;
    background: var(--line);
}

.vasc-cm-branches {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    align-items: stretch;
}

.vasc-cm-lane {
    flex: 1 1 220px;
    min-width: 200px;
    text-align: left;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(10, 132, 255, 0.18);
    background: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    box-shadow: none;
    font-family: inherit;
}

.vasc-cm-lane:hover,
.vasc-cm-lane:focus-visible {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.08);
    transform: translateY(-2px);
    outline: none;
}

/* Uniform light-blue outline; the coloured size dot carries the legend. */
.vasc-cm-lane.is-large,
.vasc-cm-lane.is-medium,
.vasc-cm-lane.is-small { border-color: rgba(10, 132, 255, 0.18); }
.vasc-cm-lane.is-large:hover,
.vasc-cm-lane.is-large:focus-visible,
.vasc-cm-lane.is-medium:hover,
.vasc-cm-lane.is-medium:focus-visible,
.vasc-cm-lane.is-small:hover,
.vasc-cm-lane.is-small:focus-visible { border-color: rgba(10, 132, 255, 0.4); }

.vasc-cm-lane__size {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.vasc-cm-lane.is-large  .vasc-cm-lane__size::before,
.vasc-cm-lane.is-medium .vasc-cm-lane__size::before,
.vasc-cm-lane.is-small  .vasc-cm-lane__size::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}
.vasc-cm-lane.is-large  .vasc-cm-lane__size::before { background: #ef4444; }
.vasc-cm-lane.is-medium .vasc-cm-lane__size::before { background: #f59e0b; }
.vasc-cm-lane.is-small  .vasc-cm-lane__size::before { background: #0a84ff; }

.vasc-cm-lane__clue {
    font-size: 12.5px;
    font-style: italic;
    color: var(--muted-strong);
    line-height: 1.45;
}

.vasc-cm-lane__diseases {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
}

.vasc-cm-lane__route {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-strong);
    letter-spacing: 0.02em;
}

.vasc-concept-map-caption {
    margin: 16px 0 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--muted-strong);
    text-align: center;
    line-height: 1.55;
}

/* ----------------------------------------------------------
   Foundations hero — two-column (text + quick-ref left, SVG right)
   ---------------------------------------------------------- */

.vasc-foundations-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: center;
}

@media (min-width: 760px) {
    .vasc-foundations-hero {
        grid-template-columns: minmax(0, 1.12fr) minmax(258px, 0.88fr);
        gap: 34px;
    }
}

.vasc-foundations-hero__text { min-width: 0; }

.vasc-foundations-hero__media {
    display: flex;
    justify-content: center;
}

/* Quick-reference classification block */
.vasc-quickref-block {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.vasc-quickref-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.vasc-quickref {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.vasc-quickref li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.vasc-quickref li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

.vasc-quickref li.is-large::before  { background: #ef4444; }
.vasc-quickref li.is-medium::before { background: #f59e0b; }
.vasc-quickref li.is-small::before  { background: #0a84ff; }

.vasc-quickref-anca {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-strong);
}

/* ----------------------------------------------------------
   NBME traps callout — clean, accent-bordered (.vasc-nbme-callout)
   Light colored border + subtle tint instead of a bulky box.
   ---------------------------------------------------------- */

.vasc-nbme-callout {
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.035);
    border-radius: 12px;
    padding: 16px 20px;
}

.vasc-nbme-callout__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.vasc-nbme-callout__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b91c1c;
}

.vasc-nbme-callout__tag {
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
}

.vasc-nbme-callout__list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
}

.vasc-nbme-callout__list li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}

/* ----------------------------------------------------------
   Vessel wall cross-section — inline SVG (.vasc-vesselwall-*)
   Concentric layers + site-font legend + per-layer hover.
   Muted clinical palette; size-capped and centered.
   ---------------------------------------------------------- */

.vasc-vesselwall-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.vasc-vesselwall-svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}

.vasc-vw-ring {
    stroke: #ffffff;
    stroke-width: 2;
    transition: filter 0.15s ease;
}

.vasc-vw-layer { cursor: default; }

.vasc-vw-layer:hover .vasc-vw-ring {
    filter: brightness(1.05) saturate(1.12);
}

.vasc-vw-lumen-fill      { fill: #fbfdff; }
.vasc-vw-intima-fill     { fill: #c7d2dd; }
.vasc-vw-media-fill      { fill: #d7b8b5; }
.vasc-vw-adventitia-fill { fill: #e3d8c5; }

.vasc-vw-nucleus { fill: #8a97a6; opacity: 0.7; }

.vasc-vw-center-label {
    fill: var(--muted-strong);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
}

.vasc-vw-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    max-width: 340px;
}

.vasc-vw-legend-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
}

.vasc-vw-legend-swatch {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex-shrink: 0;
    transform: translateY(1px);
}

.vasc-vw-legend-name { font-weight: 700; }
.vasc-vw-legend-note { color: var(--muted); }

/* ----------------------------------------------------------
   Mechanism-card panel image (.vasc-mech-figure)
   Size-capped supporting visual with graceful pending state.
   ---------------------------------------------------------- */

.vasc-mech-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vasc-mech-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: block;
}

.vasc-mech-img-pending {
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    padding: 16px 10px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    border: 1px dashed rgba(10,132,255,0.30);
    border-radius: 8px;
    background: rgba(10,132,255,0.03);
}

/* ----------------------------------------------------------
   Hover-tooltip fit fixes (Foundations page)
   The .cav-term tooltip is an absolutely-positioned ::after.
   Component boxes that clip their overflow (deep-dive disclosures,
   the comparison table) were cutting tooltips off — let them escape,
   and keep tooltips comfortably inside the page width.
   ---------------------------------------------------------- */

#cavVasculitisFoundationsTopicContent .vasc-deepdive,
#cavVasculitisFoundationsTopicContent .topic-compare-table {
    overflow: visible;
}

/* Re-round the table corners now that it no longer clips */
#cavVasculitisFoundationsTopicContent .topic-compare-table th:first-child { border-top-left-radius: 22px; }
#cavVasculitisFoundationsTopicContent .topic-compare-table th:last-child  { border-top-right-radius: 22px; }
#cavVasculitisFoundationsTopicContent .topic-compare-table tr:last-child td:first-child { border-bottom-left-radius: 22px; }
#cavVasculitisFoundationsTopicContent .topic-compare-table tr:last-child td:last-child  { border-bottom-right-radius: 22px; }

#cavVasculitisFoundationsTopicContent .cav-term::after {
    max-width: min(260px, 86vw);
}

/* ----------------------------------------------------------
   Acronym naming hover — .vasc-acr (used with .cav-term)
   Reuses the .cav-term tooltip rendering but stays visually quiet:
   keeps the surrounding text colour/weight, just a subtle dotted
   underline. data-tooltip simply names the acronym (no definition).
   ---------------------------------------------------------- */

.cav-term.vasc-acr {
    color: inherit;
    font-weight: inherit;
    border-bottom: 1px dotted rgba(15, 23, 42, 0.32);
    font-variant: all-small-caps;
    letter-spacing: 0.03em;
}

/* ----------------------------------------------------------
   ANCA immunofluorescence matched pair (.vasc-anca-*)
   Two normalized, equal-size panels + hover callout + citation.
   ---------------------------------------------------------- */

.vasc-anca-pair {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.vasc-anca-figs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.vasc-anca-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.vasc-anca-imgbox {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vasc-anca-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.vasc-anca-pending {
    display: none;
    padding: 0 14px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
}

.vasc-anca-imgbox.is-pending {
    background: rgba(10,132,255,0.03);
    border-style: dashed;
    border-color: rgba(10,132,255,0.30);
}

.vasc-anca-imgbox.is-pending .vasc-anca-pending { display: block; }

.vasc-anca-hover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px);
    width: max-content;
    max-width: 220px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 25;
}

.vasc-anca-imgbox:hover .vasc-anca-hover,
.vasc-anca-imgbox:focus-within .vasc-anca-hover {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vasc-anca-imgbox.is-pending:hover .vasc-anca-hover { opacity: 0; }

.vasc-anca-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.vasc-anca-citation {
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}

/* ANCA section — two-column (text left, IF pair right) */
.vasc-anca-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 760px) {
    .vasc-anca-section {
        grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
        gap: 30px;
    }
}

.vasc-anca-section__text { min-width: 0; }

.vasc-anca-section__media {
    display: flex;
    justify-content: center;
}

/* ----------------------------------------------------------
   Clinical trigger → decision tree (.vasc-trigger-*)
   Tight, box-free vignette cues that lead into the vessel-size
   decision tree. Matches the page's clean module density.
   ---------------------------------------------------------- */

.vasc-trigger-think {
    color: var(--accent-strong);
    white-space: nowrap;
}

.vasc-trigger-cues {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.vasc-trigger-cues li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
}

.vasc-trigger-cues li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: #ef4444;
}

.vasc-trigger-next {
    margin: 20px 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ----------------------------------------------------------
   ANCA differentiator — interactive comparison table
   Click a disease column to highlight it + its distinguishing rows.
   ---------------------------------------------------------- */

/* ANCA differentiator — one cohesive light-blue widget, white + symbols */
.vasc-anca-card {
    background: #ffffff;
    border: 1px solid rgba(10, 132, 255, 0.18);
    box-shadow: none;
}

.vasc-anca-diff-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

.vasc-anca-diff {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 540px;
    background: #ffffff;
}

.vasc-anca-diff th,
.vasc-anca-diff td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    transition: background 0.15s ease;
}

.vasc-anca-diff tbody tr:last-child th,
.vasc-anca-diff tbody tr:last-child td { border-bottom: none; }

/* Header row — no background, bold high-contrast, slightly larger */
.vasc-anca-diff thead th {
    border-bottom: 2px solid var(--line);
    padding: 4px 14px 10px;
    vertical-align: bottom;
}

.vasc-anca-diff-corner {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.vasc-anca-diff-rowlabel {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text);
    white-space: nowrap;
}

/* Purposeful row color-coding */
.vasc-anca-diff-rowlabel.is-anca-accent { color: var(--accent-strong); }
.vasc-anca-diff-rowlabel.is-gran-accent { color: #b45309; }

/* Clickable disease headers — borderless, bold, highlight on click */
.vasc-anca-diff-colbtn {
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    border: none;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.vasc-anca-diff-colbtn:hover,
.vasc-anca-diff-colbtn:focus-visible {
    background: rgba(10, 132, 255, 0.07);
    outline: none;
}

.vasc-anca-diff-colbtn.is-active {
    background: rgba(10, 132, 255, 0.14);
    color: var(--accent-strong);
    box-shadow: inset 0 -3px 0 #0a84ff;
}

/* Positive / negative symbols */
.vasc-anca-yes { color: #0369a1; font-weight: 800; font-size: 16px; }
.vasc-anca-no  { color: rgba(15, 23, 42, 0.28); }
.vasc-anca-note { color: var(--muted); font-size: 12.5px; }

/* Selected-column cell highlight */
.vasc-anca-diff td.is-col-active { background: rgba(10, 132, 255, 0.06); }

/* Distinguishing rows for the selected disease — the clinical syndrome */
.vasc-anca-diff td.is-row-distinguish {
    background: rgba(10, 132, 255, 0.15);
    font-weight: 700;
    color: var(--text);
}

/* ----------------------------------------------------------
   Classification table (Foundations) — white, no striping,
   bold headers, click-a-row-to-trace. Light-blue widget shell
   via .vasc-anca-card; sits in .vasc-anca-diff-wrap.
   ---------------------------------------------------------- */
.vasc-class-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 540px;
    background: #ffffff;
}

.vasc-class-table th,
.vasc-class-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.vasc-class-table thead th {
    border-bottom: 2px solid var(--line);
    background: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text);
}

.vasc-class-table tbody tr:last-child td { border-bottom: none; }

.vasc-class-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.vasc-class-table tbody tr:hover { background: rgba(10, 132, 255, 0.05); }
.vasc-class-table tbody tr.is-active { background: rgba(10, 132, 255, 0.12); }

.vasc-class-table tbody tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Vessel-size cell — the row anchor */
.vasc-class-table tbody td:first-child { font-weight: 800; color: var(--text); }

.vasc-class-hsr {
    font-weight: 800;
    color: var(--accent-strong);
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------
   Uniform image figure (.vasc-fig) + expand-to-lightbox
   All thumbnails render at one size (object-fit: cover) so a
   row of mixed-resolution images reads as an organized grid.
   Hover → Expand → full-scale popup with description + citation.
   ---------------------------------------------------------- */

.vasc-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}

.vasc-fig-thumb {
    position: relative;
    width: 180px;
    height: 135px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #0b1020;
    cursor: zoom-in;
    display: block;
}

.vasc-fig-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vasc-fig-expand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(11, 16, 32, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.vasc-fig-thumb:hover .vasc-fig-expand,
.vasc-fig-thumb:focus-visible .vasc-fig-expand { opacity: 1; }

.vasc-fig-thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.vasc-fig-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 180px;
}

.vasc-fig-cap-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.vasc-fig-cite {
    font-size: 10px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.3;
}

/* Lightbox */
.vasc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vasc-lightbox[hidden] { display: none; }

.vasc-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 20, 0.78);
}

.vasc-lightbox-panel {
    position: relative;
    z-index: 1;
    max-width: min(780px, 92vw);
    max-height: 90vh;
    overflow: auto;
    background: var(--surface-strong);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.vasc-lightbox-img {
    max-width: 100%;
    max-height: 66vh;
    object-fit: contain;
    border-radius: 8px;
}

.vasc-lightbox-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    text-align: center;
    max-width: 62ch;
}

.vasc-lightbox-cite {
    margin: 0;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}

.vasc-lightbox-x {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.vasc-lightbox-x:hover { background: rgba(15, 23, 42, 0.16); }

/* ----------------------------------------------------------
   Figure references — bottom-of-page trigger + modal
   ---------------------------------------------------------- */

.vasc-refs-trigger-row {
    text-align: center;
    margin: 6px 0 0;
}

.vasc-refs-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 6px 8px;
}

.vasc-refs-trigger:hover { color: var(--muted-strong); }

body.vasc-refs-lock { overflow: hidden; }

.vasc-refs-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.5);
}

.vasc-refs-overlay.is-open { display: flex; }

.vasc-refs-panel {
    background: #ffffff;
    border-radius: 16px;
    width: min(640px, 100%);
    max-height: 85vh;
    overflow: auto;
    padding: 22px 24px 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3);
}

.vasc-refs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.vasc-refs-title-main {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.vasc-refs-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 4px;
}

.vasc-refs-close:hover { color: var(--text); }

.vasc-refs-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-strong);
}

.vasc-refs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vasc-refs-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.vasc-refs-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f1f4f7;
    flex: 0 0 auto;
}

.vasc-refs-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vasc-refs-fig-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.vasc-refs-cite {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-strong);
}

.vasc-refs-link {
    width: fit-content;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-strong);
    text-decoration: none;
}

.vasc-refs-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   Solidified high-yield badges — drop in anywhere, fixed format.
   .auc-star  — AUC curriculum high-yield  (red  ★ AUC)
   .nbme-flag — NBME board trap            (amber ⚠ NBME)
   .hy-tag    — generic high-yield tag      (blue  ★ High-Yield)
   Mirrors the antiplatelets AUC marker and the embryology NBME flag,
   but self-contained so they render identically on any page.
   ---------------------------------------------------------- */
.auc-star,
.nbme-flag,
.hy-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

.auc-star {
    background: #e5484d;
    color: #ffffff;
}
.auc-star:hover,
.auc-star:focus { background: #c1391a; outline: none; }

.nbme-flag {
    background: rgba(255, 149, 0, 0.16);
    color: #9a5d00;
    font-weight: 850;
}

.hy-tag {
    background: rgba(10, 132, 255, 0.12);
    color: var(--accent-strong);
}

/* Big, bold, can't-miss high-yield phrase (e.g., "most common childhood vasculitis") */
.vasc-hy-emph {
    font-size: 1.08em;
    font-weight: 800;
    color: var(--text);
}

/* ----------------------------------------------------------
   Disease overview pills — horizontal jump-to-card row
   (mirrors the antiplatelets arena tiles). Click scrolls to
   and opens the matching disease card.
   ---------------------------------------------------------- */
.vasc-pill-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 4px;
}

.vasc-disease-pill {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(10, 132, 255, 0.18);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.vasc-disease-pill:hover,
.vasc-disease-pill:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.12);
    border-color: rgba(10, 132, 255, 0.4);
    outline: none;
}

.vasc-disease-pill__name {
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--accent-strong);
}

.vasc-disease-pill__hook {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted-strong);
}

@media (max-width: 900px) {
    .vasc-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .vasc-pill-row { grid-template-columns: 1fr; }
}