/* ============================================================
   VASCULAR TREE — Arcanium Med skin
   ------------------------------------------------------------
   The source component styled everything inline. All of it was
   removed; this sheet rebuilds the page on the app's glass
   tokens. The one thing kept from the original is the colour
   logic: arteries run crimson, veins run blue, and every accent
   on the page follows --vt-acc so switching systems re-tints
   the whole surface at once.
   ============================================================ */

.vascular-tree-page {
    --vt-acc: #c8102e;
    --vt-acc-strong: #a60c25;
    --vt-acc-tint: rgba(200, 16, 46, 0.09);
    --vt-acc-line: rgba(200, 16, 46, 0.28);
    --vt-ink: #111318;
    --vt-rule: rgba(15, 23, 42, 0.09);
    --vt-glow-a: rgba(200, 16, 46, 0.16);
    --vt-glow-b: rgba(31, 79, 191, 0.13);
    --vt-banner-1: #c8102e;
    --vt-banner-2: #8e0a1e;
    --vt-banner-3: #1f4fbf;
    position: relative;
    overflow-x: clip;
    gap: 18px;
}

.vascular-tree-page[data-system="veins"] {
    --vt-acc: #1f4fbf;
    --vt-acc-strong: #17409e;
    --vt-acc-tint: rgba(31, 79, 191, 0.09);
    --vt-acc-line: rgba(31, 79, 191, 0.28);
    --vt-glow-a: rgba(31, 79, 191, 0.17);
    --vt-glow-b: rgba(120, 160, 230, 0.14);
    --vt-banner-1: #1f4fbf;
    --vt-banner-2: #14306f;
    --vt-banner-3: #a8213a;
}

/* Frosted panels only read as glass when there is something behind them
   to blur. This lays soft arterial/venous light under the whole page —
   it re-tints when you switch systems, so the glass picks up the colour
   of whichever tree you're reading. */
.vascular-tree-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 34% at 16% 8%, var(--vt-glow-a), transparent 72%),
        radial-gradient(42% 32% at 88% 22%, var(--vt-glow-b), transparent 72%),
        radial-gradient(60% 44% at 52% 100%, var(--vt-glow-b), transparent 74%);
    transition: background 0.5s ease;
}

/* PANORAMIC BANNER
   An ultra-wide vascular network laid across the top of the page, behind
   the header glass. It is a CSS mask rather than a coloured image, so the
   page paints the gradient through it and the whole banner re-tints when
   you switch to veins.

   The layering is the point: the stretch of banner that falls under the
   header card is blurred by that card's backdrop-filter, while the parts
   that spill past its edges stay sharp. Seeing the same artwork soft in
   one place and crisp in another is what actually reads as glass —
   a translucent panel alone just reads as pale grey. */
.vascular-tree-page::after {
    content: "";
    position: absolute;
    top: -46px;
    /* Stays inside the section. Bleeding it past the edges with negative
       offsets pushed the whole document 48px wide and grew a horizontal
       scrollbar — and bought nothing, because the mask already fades to
       nothing at both ends. */
    left: 0;
    right: 0;
    height: 380px;
    z-index: 0;
    pointer-events: none;
    /* A displacement map can only bend what it can see. At 0.3 the banner
       was too pale for the prism to register against, so it carries more
       weight now and the header's white does the legibility work instead. */
    opacity: 0.44;
    background: linear-gradient(104deg,
        var(--vt-banner-1) 4%,
        var(--vt-banner-2) 40%,
        var(--vt-banner-1) 64%,
        var(--vt-banner-3) 94%);
    -webkit-mask-image: url("vascular-banner.svg");
    mask-image: url("vascular-banner.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background 0.5s ease;
    /* lags the page as you scroll, so the header reads as a pane of glass
       held above the artwork rather than printed on it */
    transform: translate3d(0, calc(var(--vt-scroll, 0) * 0.16px), 0);
    will-change: transform;
}

/* Without mask support this would be a solid gradient slab, so don't
   draw it at all. */
@supports not ((mask-image: url("vascular-banner.svg")) or (-webkit-mask-image: url("vascular-banner.svg"))) {
    .vascular-tree-page::after {
        display: none;
    }
}

.vt-stage {
    position: relative;
    z-index: 1;
}

/* The app sets a blue gradient on every bare <button>. Reset that inside
   this page so the local button styles below actually win.
   Kept deliberately at one-class specificity: :not(.button) would have
   been tidier to read, but :not() inherits its argument's specificity,
   which silently out-ranked every .vt-* button rule on the page. The
   shared .button components are restored just below instead. */
.vascular-tree-page button {
    background: none;
    color: inherit;
    box-shadow: none;
    font: inherit;
    padding: 0;
    border: none;
}

.vascular-tree-page button:hover {
    transform: none;
}

/* …and give the app's own .button components their look back. */
.vascular-tree-page .button {
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.vascular-tree-page .button.secondary {
    background: rgba(255, 255, 255, 0.78);
    color: var(--text);
    border: 1px solid var(--line);
}

.vascular-tree-page .button:hover {
    transform: translateY(-1px);
}

/* Mode panels carry display:grid/flex, which outranks the UA's [hidden]
   rule — without this the three modes render stacked on top of each other. */
.vascular-tree-page [hidden] {
    display: none !important;
}

/* ---------- hero ---------- */

/* The header is built as a slab of glass rather than a tinted box:
     ::before  the frosted body
     ::after   the refractive rim, where the banner behind it bends
     .vt-sheen the specular highlight that tracks pointer and scroll
   Content sits above all three. */
.vt-hero {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 26px 28px 22px;
    display: grid;
    gap: 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 26px 0 44px -34px rgba(255, 110, 125, 0.6),
        inset -26px 0 44px -34px rgba(120, 155, 255, 0.6);
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(1.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
}

.vt-hero > * {
    position: relative;
    z-index: 3;
}

/* frosted body — weighted across, not down, so the headline and copy keep
   near-solid glass under them while the button side thins out and lets the
   banner read through */
/* Tint only. backdrop-filter is NOT set here on purpose: it silently does
   nothing on a ::before in this context — verified by probing with an
   invert() that produced no change on the pseudo-element and a full
   inversion on the element itself. It lives on .vt-hero below. */
.vt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(101deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 255, 255, 0.72) 34%,
        rgba(255, 255, 255, 0.44) 66%,
        rgba(255, 255, 255, 0.3) 100%);
}

/* refractive rim — a band around the edge only, so the middle of the panel
   stays clean under the text. The two-mask trick punches out the centre. */
/* The dispersion used to be a masked 20px ring here. mask-composite leaves
   a HARD inner boundary, so the band read as a pale rectangle outlined
   inside the card rather than as a glass edge — it looked like a white box
   sitting in the middle of the panel. Edge colour is done with feathered
   inset shadows on .vt-hero instead, which fall off gradually and leave no
   seam. Nothing is drawn here now. */

/* ---- refraction, selectable ----------------------------------------
   Three looks, switched by data-glass on the page so they can be compared
   live. Only applied when the browser can actually run an SVG filter in
   backdrop-filter: an unsupported url() invalidates the entire
   declaration and would take the frosting down with it, so .vt-liquid is
   added by script after a support check.
   -------------------------------------------------------------------- */
.vascular-tree-page.vt-liquid[data-glass="soft"] .vt-hero,
.vascular-tree-page.vt-liquid[data-glass="soft"] .vt-regions {
    backdrop-filter: blur(14px) saturate(1.7) url(#vtGlassSoft);
    -webkit-backdrop-filter: blur(14px) saturate(1.7) url(#vtGlassSoft);
}

/* Blur stays in the chain alongside the prism. The source used the filter
   alone, which is right over a photo, but here it left the banner crisp and
   sitting directly behind the copy. Frost first, then bend it. */
.vascular-tree-page.vt-liquid[data-glass="prism1"] .vt-hero,
.vascular-tree-page.vt-liquid[data-glass="prism1"] .vt-regions {
    backdrop-filter: blur(9px) saturate(1.5) url(#vtPrism1);
    -webkit-backdrop-filter: blur(9px) saturate(1.5) url(#vtPrism1);
}

.vascular-tree-page.vt-liquid[data-glass="prism2"] .vt-hero,
.vascular-tree-page.vt-liquid[data-glass="prism2"] .vt-regions {
    backdrop-filter: blur(9px) saturate(1.5) url(#vtPrism2);
    -webkit-backdrop-filter: blur(9px) saturate(1.5) url(#vtPrism2);
}

/* Note on the source CSS: it pairs these filters with white text on
   rgba(255,255,255,.1), which suits the dark photo it was demoed on. This
   page is light with near-black text, so the tint above stays high enough
   to hold contrast under the copy and thins only on the button side. */

/* specular highlight */
.vt-sheen {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(22% 60% at var(--vt-mx, 88%) var(--vt-my, 8%),
            rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 70%),
        linear-gradient(101deg, transparent 62%, rgba(255, 255, 255, 0.16) 76%, transparent 86%);
    /* the left two thirds hold the headline and copy — no glint there */
    -webkit-mask-image: linear-gradient(101deg, transparent 0%, transparent 40%, #000 72%);
    mask-image: linear-gradient(101deg, transparent 0%, transparent 40%, #000 72%);
    transform: translate3d(0, calc(var(--vt-scroll, 0) * -0.05px), 0);
    will-change: transform;
}

.vt-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.vt-hero-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.vt-hero h1 {
    margin: 4px 0 6px;
    font-size: 34px;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.vt-hero-copy {
    margin: 0;
    /* one step darker than the app's usual intro grey: the backdrop behind
       this copy is livelier now that the banner refracts through it */
    color: var(--muted-strong);
    font-size: 14px;
    max-width: 62ch;
    line-height: 1.55;
}

.vt-hero-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.vt-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.vt-count strong {
    color: var(--vt-acc);
}

.vt-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- segmented controls ---------- */

.vt-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.vt-segment {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--line);
}

.vt-segment button {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted-strong);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.vt-segment button:hover {
    color: var(--text);
    background: rgba(15, 23, 42, 0.04);
}

.vt-segment button[aria-pressed="true"] {
    background: var(--surface-strong);
    color: var(--text);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
}

.vt-segment.vt-systems button[data-system="arteries"][aria-pressed="true"] {
    background: linear-gradient(180deg, #d81733, #b30d27);
    color: #fff;
    box-shadow: 0 10px 22px rgba(200, 16, 46, 0.26);
}

.vt-segment.vt-systems button[data-system="veins"][aria-pressed="true"] {
    background: linear-gradient(180deg, #2a5ed4, #1a45a8);
    color: #fff;
    box-shadow: 0 10px 22px rgba(31, 79, 191, 0.26);
}

.vt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
}

.vt-dot--artery { background: #c8102e; }
.vt-dot--vein { background: #1f4fbf; }

.vt-segment button[aria-pressed="true"] .vt-dot {
    background: rgba(255, 255, 255, 0.92);
}

/* ---------- region chips ---------- */

/* The region chips sit on their own frosted rail rather than floating
   loose on the background — it reads as one instrument, and it separates
   "which region" from "which vessel" at a glance. */
.vt-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 999px;
    background: linear-gradient(101deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.66) 55%,
        rgba(255, 255, 255, 0.48) 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(1.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
}

.vt-regions button {
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-strong);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vt-regions button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
}

.vt-regions button[aria-pressed="true"] {
    background: var(--vt-acc);
    border-color: var(--vt-acc);
    color: #fff;
    box-shadow: 0 8px 18px var(--vt-acc-tint);
}

/* ---------- panels ---------- */

.vt-panel {
    border-radius: var(--radius-lg);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 20px 46px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(26px) saturate(1.35);
    -webkit-backdrop-filter: blur(26px) saturate(1.35);
}

.vt-explore {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 0;
    overflow: hidden;
}

.vt-tree-pane {
    padding: 18px;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.vt-detail-pane {
    padding: 22px 24px;
    min-width: 0;
}

.vt-tree-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.vt-search {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vt-search:focus {
    border-color: var(--vt-acc-line);
    box-shadow: 0 0 0 4px var(--vt-acc-tint);
}

.vascular-tree-page .vt-ghost-button {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.vt-ghost-button:hover {
    color: var(--text);
    border-color: var(--vt-acc-line);
}

.vt-match-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--vt-acc);
    margin-bottom: 8px;
}

/* ---------- the tree ---------- */

.vt-tree {
    position: relative;
    max-height: 580px;
    overflow-y: auto;
    padding: 2px 6px 2px 16px;
    scrollbar-width: thin;
}

.vascular-tree-page .vt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 18px * var(--d, 0));
    box-sizing: border-box;
    text-align: left;
    padding: 7px 10px 7px 6px;
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.14s ease, opacity 0.14s ease;
}

.vascular-tree-page .vt-row:focus-visible {
    outline: 2px solid var(--vt-acc);
    outline-offset: -1px;
}

.vt-row:hover {
    background: rgba(15, 23, 42, 0.035);
}

.vt-row[aria-current="true"] {
    background: var(--vt-acc-tint);
}

.vt-row.is-dim {
    opacity: 0.32;
}

/* Rails.
   Each row used to draw only its OWN elbow, so a rail vanished the moment
   its children were on screen and a deep branch could not be traced back up
   — that is what made this hard to read. Every row now paints a rail for
   each of its ancestor levels, as one repeating gradient across the indent,
   so the lines run unbroken from the root all the way down. */
.vt-row {
    --rail: rgba(15, 23, 42, 0.16);
}

.vt-row[data-depth]:not([data-depth="0"])::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(8px - 18px * var(--d, 0));
    width: calc(18px * var(--d, 0) - 8px);
    background-image: repeating-linear-gradient(to right,
        var(--rail) 0 1px, transparent 1px 18px);
    pointer-events: none;
    transition: background-image 0.16s ease;
}

/* the short elbow into the name */
.vt-row[data-depth]:not([data-depth="0"])::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--rail);
    pointer-events: none;
    transition: background 0.16s ease;
}

/* a continuation is the same vessel under a new name, so its elbow is
   dashed rather than solid */
.vt-row.is-cont::after {
    background: none;
    border-top: 1px dashed var(--rail);
}

/* the branch you're standing on, lit from the root down */
.vt-row.is-ancestor,
.vt-row.is-selected {
    --rail: var(--vt-acc);
}

.vt-caret {
    width: 12px;
    flex: 0 0 12px;
    font-size: 8px;
    color: rgba(15, 23, 42, 0.32);
    text-align: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.vt-row:hover > .vt-caret,
.vt-row.is-selected > .vt-caret,
.vt-row.is-ancestor > .vt-caret {
    color: var(--vt-acc);
}

.vt-row.is-open > .vt-caret {
    transform: rotate(90deg);
}

.vt-caret.is-leaf {
    visibility: hidden;
}

/* Every vessel name is black. Grey was used here to calm the tree down and
   it just made it harder to read — depth is carried by size, weight and the
   rails instead, never by fading the text out. */
.vt-row-name {
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--text);
    font-weight: 500;
    min-width: 0;
}

.vt-row[data-depth="0"] .vt-row-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.vt-row[data-depth="1"] .vt-row-name {
    font-size: 15px;
    font-weight: 700;
}

.vt-row[data-depth="2"] .vt-row-name {
    font-weight: 600;
}

.vt-row.is-selected .vt-row-name {
    color: var(--vt-acc-strong);
    font-weight: 700;
}

.vt-row-name mark,
.vt-fact mark {
    background: rgba(255, 214, 10, 0.45);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

.vt-cont-flag {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    margin-right: 5px;
}

.vt-row.is-selected .vt-cont-flag,
.vt-row.is-ancestor .vt-cont-flag {
    color: var(--vt-acc);
}

.vt-hy-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--vt-acc);
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.vt-row:hover .vt-hy-dot,
.vt-row.is-selected .vt-hy-dot,
.vt-row.is-ancestor .vt-hy-dot {
    opacity: 1;
}

.vt-kid-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.3);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.vt-empty {
    font-size: 13px;
    color: var(--muted-strong);
    padding: 14px 6px;
    line-height: 1.55;
}

/* ---------- badges ---------- */

.vt-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 16px;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.vt-badge--level {
    background: rgba(15, 23, 42, 0.05);
    color: var(--muted-strong);
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-weight: 700;
}

.vt-row.is-selected .vt-badge--level,
.vt-row.is-ancestor .vt-badge--level {
    background: var(--vt-acc-tint);
    border-color: var(--vt-acc-line);
    color: var(--vt-acc-strong);
}

.vt-badge--tint {
    background: var(--vt-acc-tint);
    color: var(--vt-acc-strong);
    border: 1px solid var(--vt-acc-line);
}

.vt-badge--line {
    background: rgba(255, 255, 255, 0.8);
    color: var(--muted-strong);
    border: 1px solid var(--line);
}

.vt-badge--acc {
    background: var(--vt-acc);
    color: #fff;
}

/* ---------- detail panel ---------- */

.vt-detail-empty {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    max-width: 46ch;
}

.vt-detail-empty strong {
    color: var(--text);
}

.vt-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    font-size: 12px;
}

.vt-breadcrumb button {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-strong);
    cursor: pointer;
    border-bottom: 1px solid var(--vt-acc-line);
    transition: color 0.15s ease;
}

.vt-breadcrumb button:hover {
    color: var(--vt-acc);
}

.vt-breadcrumb span {
    color: var(--vt-acc);
    font-weight: 700;
}

.vt-detail-title {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--text);
}

.vt-detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.vt-facts {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.vt-fact-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--vt-rule);
}

.vt-fact-row dt {
    font-weight: 700;
    color: var(--muted-strong);
    font-size: 13px;
}

.vt-fact-row dd {
    margin: 0;
    color: var(--text);
}

.vt-subhead {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vt-acc);
}

.vt-subhead span {
    color: var(--muted);
    letter-spacing: 0.04em;
    font-weight: 700;
}

/* high-yield fact list */

.vt-hy-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.6;
}

.vt-hy-list li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--vt-rule);
}

.vt-hy-list li:first-child {
    border-top: none;
    padding-top: 2px;
}

.vt-fact-emoji {
    font-size: 15px;
    line-height: 22px;
}

.vt-fact-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vt-acc);
    margin-bottom: 2px;
}

.vt-fact {
    color: var(--text);
}

/* branch / tributary chips */

.vt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vt-chips button {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.vt-chips button:hover {
    border-color: var(--vt-acc);
    background: var(--vt-acc-tint);
}

.vt-chips button.is-cont {
    border-style: dashed;
    border-color: var(--vt-acc-line);
}

.vt-chip-level {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

/* topic pills */

.vt-topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.vt-topic-pills button {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.vt-topic-pills button:hover {
    color: var(--text);
    border-color: var(--vt-acc-line);
}

.vt-topic-pills button[aria-pressed="true"] {
    background: var(--vt-ink);
    border-color: var(--vt-ink);
    color: #fff;
}

.vascular-tree-page .vt-back-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-strong);
    cursor: pointer;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--vt-acc-line);
}

.vt-back-link:hover {
    color: var(--vt-acc);
}

/* ---------- abbreviation tooltips ---------- */

.vt-abbr {
    position: relative;
    border-bottom: 1px dotted var(--vt-acc);
    cursor: help;
}

.vt-abbr:focus {
    outline: none;
    background: var(--vt-acc-tint);
    border-radius: 3px;
}

/* The tooltip bubble is appended to <body> by the script, never nested
   inside the row, so a scrolling tree or a narrow panel can't clip it. */
.vt-tip {
    position: fixed;
    z-index: 1400;
    max-width: 260px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(17, 19, 24, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.vt-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- schematics ---------- */

.vt-schematic {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--vt-rule);
}

.vt-schematic-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vt-acc);
    margin-bottom: 10px;
}

.vt-schematic svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: inherit;
}

.vt-schematic ol {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text);
}

.vt-schematic-scroll {
    overflow-x: auto;
}

.vt-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    color: var(--text);
}

.vt-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--vt-acc-tint);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vt-acc-strong);
}

.vt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--vt-rule);
    vertical-align: top;
}

.vt-table tr.is-head td {
    background: var(--vt-acc-tint);
    font-weight: 800;
}

.vt-table td:first-child {
    font-weight: 700;
}

/* ---------- lookup mode ---------- */

.vt-lookup {
    padding: 22px 24px;
}

.vt-lookup-search {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 18px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    border-radius: 999px;
    outline: none;
    margin-bottom: 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vt-lookup-search:focus {
    border-color: var(--vt-acc-line);
    box-shadow: 0 0 0 4px var(--vt-acc-tint);
}

.vt-lookup-hint {
    font-size: 13px;
    color: var(--muted-strong);
    margin: 0 0 10px;
}

.vt-results {
    display: grid;
    gap: 4px;
}

.vt-result {
    padding: 14px 0;
    border-top: 1px solid var(--vt-rule);
}

.vt-result-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.vascular-tree-page .vt-result-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1.5px solid var(--vt-acc-line);
    transition: color 0.16s ease;
}

.vt-result-name:hover {
    color: var(--vt-acc);
}

.vt-result[data-sys="arteries"] { --vt-acc: #c8102e; --vt-acc-tint: rgba(200, 16, 46, 0.09); --vt-acc-line: rgba(200, 16, 46, 0.3); --vt-acc-strong: #a60c25; }
.vt-result[data-sys="veins"] { --vt-acc: #1f4fbf; --vt-acc-tint: rgba(31, 79, 191, 0.09); --vt-acc-line: rgba(31, 79, 191, 0.3); --vt-acc-strong: #17409e; }

.vt-result-parent {
    font-size: 12px;
    color: var(--muted-strong);
}

.vt-result-facts {
    margin-top: 6px;
}

.vt-more-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
}

/* ---------- recall mode ---------- */

.vt-recall {
    padding: 26px 28px;
    max-width: 620px;
}

.vt-score {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.vt-recall-prompt {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vt-acc);
    margin-bottom: 6px;
}

.vt-recall-stem {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--text);
}

.vt-options {
    display: grid;
    gap: 8px;
}

.vt-options button {
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.vt-options button:hover:not(:disabled) {
    border-color: var(--vt-acc-line);
    background: var(--vt-acc-tint);
}

.vt-options button:disabled {
    cursor: default;
}

.vt-options button.is-correct {
    background: var(--success-soft);
    border-color: rgba(52, 199, 89, 0.5);
    font-weight: 700;
}

.vt-options button.is-wrong {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--muted-strong);
}

.vt-verdict {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.vt-verdict-label {
    font-weight: 800;
    color: var(--vt-acc);
}

.vt-verdict-path {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted-strong);
}

.vascular-tree-page .vt-next {
    margin-top: 16px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1491ff, #0077ed);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(10, 132, 255, 0.22);
}

/* ---------- footnote ---------- */

.vt-footnote {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-strong);
    margin: 0;
    padding: 0 6px;
    max-width: 86ch;
}

/* ============================================================
   ENTRY ANIMATION
   The page fades up from slightly back, behind a full-bleed
   overlay that draws the tree once and then opens outward.
   Plays once per browser session, never under reduced motion.
   ============================================================ */

.vt-stage {
    display: grid;
    gap: 18px;
}

.vascular-tree-page.is-entering .vt-stage {
    opacity: 0;
    transform: scale(0.965);
    filter: blur(6px);
}

.vascular-tree-page.is-entered .vt-stage {
    animation: vt-settle 700ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}

@keyframes vt-settle {
    from { opacity: 0; transform: scale(0.965); filter: blur(6px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.vt-splash {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    gap: 0;
    background: radial-gradient(120% 90% at 50% 22%, #ffffff 0%, var(--bg) 48%, var(--bg-strong) 100%);
    cursor: pointer;
}

.vt-splash-inner {
    display: grid;
    justify-items: center;
    gap: 26px;
    padding: 24px;
    animation: vt-splash-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}

@keyframes vt-splash-rise {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.vt-splash-mark {
    width: min(250px, 60vw);
    height: auto;
    aspect-ratio: 1740 / 512;
    display: block;
}

.vt-splash-art {
    width: min(232px, 54vw);
    height: auto;
    aspect-ratio: 300 / 400;
    display: block;
    overflow: visible;
}

.vt-splash-art path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
}

/* added a frame after the lengths are measured */
.vt-splash-art.is-drawing path {
    animation: vt-draw 750ms cubic-bezier(0.33, 0.9, 0.4, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes vt-draw {
    to { stroke-dashoffset: 0; }
}

.vt-splash-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--muted);
    animation: vt-splash-label 480ms ease 260ms both;
}

@keyframes vt-splash-label {
    from { opacity: 0; letter-spacing: 0.42em; }
    to { opacity: 0.95; letter-spacing: 0.26em; }
}

.vt-splash-rule {
    width: min(280px, 64vw);
    height: 2px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.vt-splash-rule::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8102e, #1f4fbf);
    transform-origin: left center;
    animation: vt-splash-fill 1100ms cubic-bezier(0.3, 0.8, 0.35, 1) both;
}

@keyframes vt-splash-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* the overlay opens past the viewer rather than simply fading */
.vt-splash.is-leaving {
    animation: vt-splash-open 540ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes vt-splash-open {
    from { opacity: 1; transform: scale(1); filter: blur(0); }
    to { opacity: 0; transform: scale(1.14); filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .vt-splash,
    .vt-splash-inner,
    .vt-splash-art path,
    .vt-splash-art.is-drawing path,
    .vt-splash-rule::after,
    .vt-splash-label {
        animation: none !important;
    }

    .vt-splash-art path {
        stroke-dashoffset: 0;
    }

    .vascular-tree-page.is-entered .vt-stage,
    .vascular-tree-page.is-entering .vt-stage {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ============================================================
   LAUNCH BUTTON — lives in the Anatomy subject header
   Arterial crimson, deliberately NOT the app's --danger red,
   so it reads as "the blood-vessel tool" and not as a warning.
   ============================================================ */

/* The router sets .hidden on this button for every non-Anatomy subject, but
   `display: inline-flex` below is a class rule and the UA's `[hidden]` rule is
   not — so without this the button showed on Embryology, Pathology, every
   lane. Same trap as the mode panels inside the page, which have their own
   guard; this button lives in the module page, outside that scope, so it
   needs its own. */
.vt-launch[hidden] {
    display: none !important;
}

.vt-launch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(180deg, #d81733, #ab0c24);
    border: 1px solid rgba(126, 8, 27, 0.4);
    box-shadow: 0 14px 28px rgba(200, 16, 46, 0.26);
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.vt-launch:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 18px 34px rgba(200, 16, 46, 0.32);
}

.vt-launch:active {
    transform: translateY(0);
}

.vt-launch svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.vt-launch-note {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 7px;
    text-align: right;
}

/* right-hand column of the subject header: button over subtitle */
.subject-topic-header .vt-launch-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
    .vt-explore {
        grid-template-columns: minmax(0, 1fr);
    }

    .vt-tree-pane {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .vt-tree {
        max-height: 380px;
    }
}

@media (max-width: 720px) {
    .vt-hero {
        padding: 20px 18px 18px;
    }

    .vt-hero h1 {
        font-size: 27px;
    }

    .vt-detail-pane,
    .vt-lookup,
    .vt-recall {
        padding: 18px 16px;
    }

    .vt-tree-pane {
        padding: 14px 12px;
    }

    .vt-tree {
        padding-left: 12px;
    }

    .vt-tree-tools {
        flex-wrap: wrap;
    }

    .vt-search {
        flex: 1 1 100%;
    }

    .vt-fact-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .vt-controls {
        gap: 10px;
    }

    .vt-segment {
        width: 100%;
        justify-content: center;
    }

    .vt-regions {
        border-radius: var(--radius-md);
    }

    .subject-topic-header .vt-launch-slot {
        align-items: flex-start;
        width: 100%;
    }

    .vt-launch-note {
        text-align: left;
    }
}

/* subtitle sits under the launch button, sharing its right edge */
.subject-topic-header .vt-launch-slot p {
    text-align: right;
    max-width: 48ch;
}

@media (max-width: 720px) {
    .subject-topic-header .vt-launch-slot p {
        text-align: left;
    }
}

/* ============================================================
   REFERENCE STRIP
   The region tables (coronary territory, vertebral levels, Circle
   of Willis, portosystemic, pectinate) used to sit permanently
   open inside the detail pane, which made them look like part of
   whatever vessel you had clicked. They live here instead —
   closed, labelled, and opened only when you want one.
   ============================================================ */

.vt-reference {
    display: grid;
    gap: 10px;
}

.vt-reference-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-left: 4px;
}

.vt-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.vt-reference-item {
    flex: 1 1 320px;
    min-width: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.vt-reference-item[open] {
    flex-basis: 100%;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.vt-reference-item summary {
    list-style: none;
    cursor: pointer;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px;
    user-select: none;
}

.vt-reference-item summary::-webkit-details-marker {
    display: none;
}

/* a small vessel-coloured chevron that turns as it opens */
.vt-reference-item summary::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-right: 1.5px solid var(--vt-acc);
    border-bottom: 1.5px solid var(--vt-acc);
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
}

.vt-reference-item[open] summary::before {
    transform: rotate(45deg);
}

.vt-reference-item summary:hover {
    color: var(--vt-acc-strong);
}

.vt-reference-body {
    padding: 0 18px 16px;
}

/* the schematic inside the strip supplies its own spacing rules */
.vt-reference-body .vt-schematic {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.vt-reference-body .vt-schematic-title {
    display: none;
}

/* ---------- keyboard hint ---------- */

.vt-tree-hint {
    font-size: 11px;
    color: var(--muted);
    padding: 8px 6px 0;
    border-top: 1px solid var(--vt-rule);
    margin-top: 8px;
}

.vt-tree-hint kbd {
    font: inherit;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--muted-strong);
}

@media (max-width: 720px) {
    .vt-reference-item {
        flex-basis: 100%;
    }

    .vt-tree-hint {
        display: none;
    }
}

/* Phones fall back to plain frost. A displacement-mapped backdrop is cheap
   on a desktop GPU but not worth spending on a phone, and at that width the
   banner has almost nothing visible left to refract anyway. Same specificity
   as the per-look rules above, so placement at the end is what wins. */
@media (max-width: 720px) {
    .vascular-tree-page.vt-liquid[data-glass] .vt-hero,
    .vascular-tree-page.vt-liquid[data-glass] .vt-regions {
        backdrop-filter: blur(14px) saturate(1.6);
        -webkit-backdrop-filter: blur(14px) saturate(1.6);
    }
}

/* ---------- sticky "where am I" bar ---------- */

.vt-tree-context {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 -6px 0 -16px;
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border-bottom: 1px solid var(--vt-rule);
    transition: max-height 0.16s ease, opacity 0.16s ease;
}

.vt-tree-context.is-visible {
    max-height: 34px;
    padding: 8px 10px;
    opacity: 1;
}

.vascular-tree-page .vt-tree-context button {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted-strong);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.vascular-tree-page .vt-tree-context button:last-of-type {
    color: var(--vt-acc-strong);
}

.vascular-tree-page .vt-tree-context button:hover {
    color: var(--vt-acc);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vt-tree-context span {
    color: rgba(15, 23, 42, 0.3);
}