/* ============================================================
   CAV PATHOLOGY · Vascular Tumors — page-specific styling
   The horizontal interactive classification map (vt-map*) plus a
   small Course / Behavior accent. All disease-card / figure /
   lightbox styling is reused from vasculitis.css.
   Lens semantic colors (green/teal/amber/red/blue/purple/pink)
   are scoped to the active lens only — neutral by default.
   ============================================================ */

/* ---------- Map shell ---------- */
.vt-map-block {
    padding: 18px 20px 20px;
}

.vt-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 16px;
}

/* ---------- Lens segmented control ---------- */
.vt-map-lenses {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: rgba(10, 132, 255, 0.07);
    border: 1px solid rgba(10, 132, 255, 0.16);
    border-radius: 999px;
}

.vt-lens-btn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--muted-strong);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vt-lens-btn:hover { color: var(--text); }

.vt-lens-btn.is-active {
    background: #fff;
    color: var(--accent-strong);
    box-shadow: 0 1px 3px rgba(10, 30, 70, 0.12);
}

.vt-lens-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Legend ---------- */
.vt-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted-strong);
}

.vt-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.vt-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--swatch, #cbd5e1);
    border: 1px solid rgba(10, 30, 70, 0.12);
    flex: 0 0 auto;
}

.vt-legend-swatch.b-regresses { --swatch: #1f9d57; }
.vt-legend-swatch.b-reactive  { --swatch: #0d9aa8; }
.vt-legend-swatch.b-persists  { --swatch: #d39111; }
.vt-legend-swatch.b-malignant { --swatch: #d63a3a; }
.vt-legend-swatch.o-endothelial { --swatch: #0a84ff; }
.vt-legend-swatch.o-reactive    { --swatch: #0d9aa8; }
.vt-legend-swatch.o-ectasia     { --swatch: #7c5cd6; }
.vt-legend-swatch.o-smooth      { --swatch: #d39111; }
.vt-legend-swatch.o-lymphatic   { --swatch: #d65a9a; }
.vt-legend-swatch.s-on          { --swatch: #0a84ff; }

/* ---------- Lanes ---------- */
.vt-map-lanes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.vt-lane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vt-lane-head {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-strong);
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(10, 132, 255, 0.22);
}

.vt-lane-head.is-benign    { color: #1f9d57; border-bottom-color: rgba(31, 157, 87, 0.4); }
.vt-lane-head.is-tumorlike { color: #0d9aa8; border-bottom-color: rgba(13, 154, 168, 0.4); }
.vt-lane-head.is-malignant { color: #d63a3a; border-bottom-color: rgba(214, 58, 58, 0.4); }
.vt-lane-head.is-lymphatic { color: #d65a9a; border-bottom-color: rgba(214, 90, 154, 0.4); }

/* ---------- Sub-cluster (labeled bracket box) ---------- */
.vt-cluster {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px 9px;
    background: rgba(10, 30, 70, 0.025);
    border: 1px dashed rgba(10, 30, 70, 0.2);
    border-radius: 12px;
}

.vt-cluster-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted-strong);
    text-transform: uppercase;
}

/* ---------- Nodes (compact pills) ---------- */
.vt-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text);
    background: #fff;
    border: 1px solid rgba(10, 30, 70, 0.16);
    border-left: 3px solid rgba(10, 30, 70, 0.2);
    border-radius: 9px;
    padding: 7px 11px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
}

.vt-node:hover,
.vt-node:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(10, 30, 70, 0.1);
    outline: none;
}

.vt-node:active { transform: translateY(1px); }

.vt-node-name { line-height: 1.2; }

/* Syndrome association chip — only visible under the syndrome lens */
.vt-node-assoc {
    display: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--accent-strong);
}

/* ---------- Tooltip ---------- */
.vt-node-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 10px;
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 6px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: #1b2433;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(10, 30, 70, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    pointer-events: none;
}

.vt-node:hover .vt-node-tip,
.vt-node:focus-visible .vt-node-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================================
   LENS COLORING — scoped to the active lens class on .vt-map-lanes
   ============================================================ */

/* Behavior lens */
.vt-map-lanes.lens-behavior .vt-node[data-behavior="regresses"] { border-left-color: #1f9d57; background: rgba(31, 157, 87, 0.08); }
.vt-map-lanes.lens-behavior .vt-node[data-behavior="reactive"]  { border-left-color: #0d9aa8; background: rgba(13, 154, 168, 0.08); }
.vt-map-lanes.lens-behavior .vt-node[data-behavior="persists"]  { border-left-color: #d39111; background: rgba(211, 145, 17, 0.09); }
.vt-map-lanes.lens-behavior .vt-node[data-behavior="malignant"] { border-left-color: #d63a3a; background: rgba(214, 58, 58, 0.09); }

/* Cell-of-origin lens */
.vt-map-lanes.lens-origin .vt-node[data-origin="endothelial"] { border-left-color: #0a84ff; background: rgba(10, 132, 255, 0.08); }
.vt-map-lanes.lens-origin .vt-node[data-origin="reactive"]    { border-left-color: #0d9aa8; background: rgba(13, 154, 168, 0.08); }
.vt-map-lanes.lens-origin .vt-node[data-origin="ectasia"]     { border-left-color: #7c5cd6; background: rgba(124, 92, 214, 0.09); }
.vt-map-lanes.lens-origin .vt-node[data-origin="smooth"]      { border-left-color: #d39111; background: rgba(211, 145, 17, 0.09); }
.vt-map-lanes.lens-origin .vt-node[data-origin="lymphatic"]   { border-left-color: #d65a9a; background: rgba(214, 90, 154, 0.1); }

/* Syndrome lens — highlight nodes carrying an association, dim the rest */
.vt-map-lanes.lens-syndrome .vt-node:not([data-assoc]) { opacity: 0.4; }
.vt-map-lanes.lens-syndrome .vt-node[data-assoc] {
    border-color: var(--accent);
    border-left-color: var(--accent-strong);
    background: rgba(10, 132, 255, 0.08);
    box-shadow: 0 1px 5px rgba(10, 132, 255, 0.16);
}
.vt-map-lanes.lens-syndrome .vt-node[data-assoc] .vt-node-assoc { display: block; }

/* ---------- Responsive: stack lanes below ~900px ---------- */
@media (max-width: 900px) {
    .vt-map-lanes { grid-template-columns: 1fr; gap: 18px; }
    .vt-map-toolbar { flex-direction: column; align-items: flex-start; }
}

/* Course / Behavior row — subtle blue accent on the icon swatch */
.vasc-dc-row.vt-course-row .vasc-dc-row-icon {
    color: var(--accent-strong);
}

/* ------------------------------------------------------------
   Compare blocks — 3-column variant of the shared vasc-compare
   component (the base hardcodes 2). Reuses every compare class;
   this only widens the grid and adds color-coded column headers
   keyed to the map's behavior/nature lenses, so the memorization
   cue (one column is the odd one out) reads at a glance.
   ------------------------------------------------------------ */
#cavVascularTumorsTopicContent .vasc-compare-3 .vasc-compare-row {
    grid-template-columns: 132px 1fr 1fr 1fr;
}

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

/* Column-header colour cues — high-contrast name + underline tab (no fill box) */
.vt-atlas .vasc-compare-name.vt-cmp-regress   { color: #157a43; border-bottom-color: #1f9d57; }
.vt-atlas .vasc-compare-name.vt-cmp-persist   { color: #9a6a06; border-bottom-color: #d39111; }
.vt-atlas .vasc-compare-name.vt-cmp-malignant { color: #b91c1c; border-bottom-color: #d63a3a; }
.vt-atlas .vasc-compare-name.vt-cmp-reactive  { color: #0b7c88; border-bottom-color: #0d9aa8; }
/* Neutral colour aliases (reusable across Atlas pages) */
.vt-atlas .vasc-compare-name.vt-cmp-red   { color: #b91c1c; border-bottom-color: #d63a3a; }
.vt-atlas .vasc-compare-name.vt-cmp-amber { color: #9a6a06; border-bottom-color: #d39111; }
.vt-atlas .vasc-compare-name.vt-cmp-teal  { color: #0b7c88; border-bottom-color: #0d9aa8; }
.vt-atlas .vasc-compare-name.vt-cmp-blue  { color: #0a5bd0; border-bottom-color: #0a84ff; }

/* ============================================================
   DIAGNOSTIC ATLAS — First-Aid-grade compare tables.
   No cell boxes (zero spreadsheet vibe): transparent cells,
   hairline horizontal rules only, colored name tabs, metadata
   labels, generous padding, hero rows banded for a <5s rule-out.
   Both tables share this class set + the same column track, so
   they align into one index.
   ============================================================ */

/* No grid gap — hairline rules + padding do the separating */
.vt-atlas .vasc-compare-table { gap: 0; margin-top: 6px; }

/* Rows: vertically center content (br-safe), hairline divider, row hover */
.vt-atlas .vasc-compare-row { align-items: center; }
.vt-atlas .vasc-compare-row:not(.vasc-compare-head):not(:last-child) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.vt-atlas .vasc-compare-row:not(.vasc-compare-head) {
    transition: background 0.15s ease;
}
.vt-atlas .vasc-compare-row:not(.vasc-compare-head):hover {
    background: rgba(10, 132, 255, 0.04);
}

/* Cells: strip the box, double the breathing room */
.vt-atlas .vasc-compare-cell {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 22px;
    font-size: 14.5px;
    line-height: 1.45;
}
.vt-atlas .vasc-compare-cell:hover {
    transform: none;
    box-shadow: none;
    background: none;
}

/* Row labels — small, ALL-CAPS, right-aligned metadata */
.vt-atlas .vasc-compare-attr {
    justify-content: flex-end;
    text-align: right;
    padding: 20px 18px 20px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Diagnosis names — high-contrast colored tabs with an underline accent */
.vt-atlas .vasc-compare-name {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 6px 11px;
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

/* Secondary rows — smaller, recede */
.vt-atlas .vasc-compare-row.is-secondary .vasc-compare-cell {
    font-size: 13px;
    color: var(--muted-strong);
}

/* HERO rows — whisper-grey band, whole row bold, larger (the 5-second answer) */
.vt-atlas .vasc-compare-row.is-hero {
    background: rgba(15, 23, 42, 0.035);
}
.vt-atlas .vasc-compare-row.is-hero .vasc-compare-cell {
    font-size: 15px;
    font-weight: 700;
}
.vt-atlas .vasc-compare-row.is-hero:hover {
    background: rgba(15, 23, 42, 0.055);
}
.vt-atlas .vasc-compare-row.is-hero .vasc-compare-attr {
    color: var(--text);
}

/* TREATMENT row (Compare 2) — whisper-green band = the curable one lives here */
.vt-atlas .vasc-compare-row.is-treatment {
    background: rgba(31, 157, 87, 0.06);
}
.vt-atlas .vasc-compare-row.is-treatment:hover {
    background: rgba(31, 157, 87, 0.10);
}
.vt-atlas .vasc-compare-row.is-treatment .vasc-compare-attr {
    color: #157a43;
}

/* "THE SPLIT" — thin dashboard eyebrow */
.vt-atlas .vasc-compare-shared {
    background: none;
    border: 0;
    padding: 0;
    margin: 2px 0 12px;
    font-size: 13.5px;
    color: var(--muted-strong);
}
.vt-atlas .vasc-compare-shared-label {
    display: inline-block;
    margin-right: 9px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.10);
    color: var(--accent-strong);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* DIAGNOSTIC PRIMER — clean bold header above the table (no box) */
.vt-atlas .vasc-compare-primer {
    margin: 4px 0 18px;
    padding: 0;
    background: none;
    border: 0;
}
.vt-atlas .vasc-compare-primer-label {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.vt-atlas .vasc-compare-primer p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.5;
    font-weight: 500;
    color: #0a0a0a;
}
.vt-atlas .vasc-compare-primer p strong { font-weight: 800; }

/* Compare tables as dropdowns — tighten the collapse body so the
   primer/table don't double-space inside the native flex body */
.vt-atlas .vasc-dc-collapse-body {
    gap: 0;
    margin-top: 16px;
}

/* ------------------------------------------------------------
   Section divider — a labeled hairline that separates the
   disease cards from the Compare tables.
   ------------------------------------------------------------ */
.vt-section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 4px 12px;
    color: var(--accent-strong);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.vt-section-divider::before,
.vt-section-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(10, 132, 255, 0.35);
}

/* ------------------------------------------------------------
   Card summary — page-scoped so it reads as a "start here"
   call-out: black text inside a light blue surround. Bold spans
   keep their weight (only color/box change). Applies to every
   disease card on the Vascular Tumors page.
   ------------------------------------------------------------ */
#cavVascularTumorsTopicContent .vasc-dc-summary {
    color: #000;
    background: rgba(10, 132, 255, 0.06);
    border: 1px solid rgba(10, 132, 255, 0.28);
    border-radius: 12px;
    padding: 13px 16px;
}

#cavVascularTumorsTopicContent .vasc-dc-summary strong {
    color: #000;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Page rhythm — the topic mount has no gap of its own, so the
   stacked cards/sections touch. Give it a consistent vertical
   gap (also leaves room for the card hover-lift shadow).
   ------------------------------------------------------------ */
#cavVascularTumorsTopicContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ------------------------------------------------------------
   Disease cards — page-scoped: more compact (less vertical
   white space), softer rounded corners, and a hover "lift"
   on collapsed (clickable) cards that invites the click.
   ------------------------------------------------------------ */
#cavVascularTumorsTopicContent .vasc-disease-card,
#cavVascularTumorsTopicContent .vasc-compare-block {
    padding: 14px 20px;
    border-radius: 22px;
    gap: 12px;
}

/* Tighter header so the title doesn't tower over empty space */
#cavVascularTumorsTopicContent .vasc-dc-header { gap: 6px; }
#cavVascularTumorsTopicContent .vasc-dc-tag { padding: 4px 11px; font-size: 11px; }
#cavVascularTumorsTopicContent .vasc-dc-name { font-size: 23px; line-height: 1.15; }
#cavVascularTumorsTopicContent .vasc-dc-aka { font-size: 15px; margin-top: 3px; }

/* Hover bubble — only on collapsed cards/tables (the ones you click to open) */
#cavVascularTumorsTopicContent .vasc-disease-card:has(> details.vasc-dc-collapse:not([open])),
#cavVascularTumorsTopicContent .vasc-compare-block:has(> details.vasc-dc-collapse:not([open])) {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#cavVascularTumorsTopicContent .vasc-disease-card:has(> details.vasc-dc-collapse:not([open])):hover,
#cavVascularTumorsTopicContent .vasc-compare-block:has(> details.vasc-dc-collapse:not([open])):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.18);
    border-color: var(--accent);
}