/* Northstar Capital — chart styles (pairs with charts.js) */
.vz { position: relative; width: 100%; --vz-surface: var(--surface); }
.vz-svg { display: block; overflow: visible; max-width: 100%; outline: none; }
.vz-svg:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 6px; }
.vz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.vz-axis { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.vz-tick { fill: var(--text-3); font: 400 11px/1 var(--font-mono); letter-spacing: 0; }
.vz-label { fill: var(--text); font: 500 11.5px/1 var(--font-sans); paint-order: stroke; stroke: var(--vz-surface); stroke-width: 4px; stroke-linejoin: round; }
.vz-dot { stroke: var(--vz-surface); stroke-width: 2; }
.vz-fc { fill: var(--line-soft); opacity: .55; }
.vz-today { stroke: var(--text-3); stroke-width: 1; shape-rendering: crispEdges; }
.vz-wedge { fill: var(--mark-accent); }
.vz-today-t { fill: var(--text-3); font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; }
.vz-cross { stroke: var(--text-3); stroke-width: 1; opacity: .7; shape-rendering: crispEdges; }
.vz-hit, .vz-bhit { cursor: crosshair; }

.vz-reveal { animation: vz-reveal 1.1s var(--ease) both; }
@keyframes vz-reveal { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px -6px -6px -6px); } }
.vz-grow .vz-bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: vz-grow .7s var(--ease) both; }
.vz-grow .vz-bar-g:nth-child(2) { animation-delay: 30ms; } .vz-grow .vz-bar-g:nth-child(3) { animation-delay: 60ms; }
.vz-grow .vz-bar-g:nth-child(4) { animation-delay: 90ms; } .vz-grow .vz-bar-g:nth-child(5) { animation-delay: 120ms; }
.vz-grow .vz-bar-g:nth-child(6) { animation-delay: 150ms; } .vz-grow .vz-bar-g:nth-child(n+7) { animation-delay: 180ms; }
@keyframes vz-grow { from { transform: scaleY(.02); opacity: 0; } }
.vz-bar-g { transition: opacity var(--dur-2) var(--ease); }
.vz-svg.is-hover .vz-bar-g { opacity: .42; }
.vz-svg.is-hover .vz-bar-g.is-on { opacity: 1; }

/* legend + keys (line keys for lines, rects for bars) */
.vz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: .8125rem; color: var(--text-2); }
.vz-legend__i { display: inline-flex; align-items: center; gap: 8px; }
.vz-key { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--k, var(--c1)); flex: none; }
.vz-key.is-rect { width: 10px; height: 10px; border-radius: 3px; }
.vz-key.is-dash { background: repeating-linear-gradient(90deg, var(--k) 0 2px, transparent 2px 5px); }

/* tooltip */
.vz-tip { position: absolute; left: 0; top: 0; z-index: 5; min-width: 168px; max-width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); pointer-events: none; opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.vz-tip.is-on { opacity: 1; }
.vz-tip__t { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.vz-tip__r { display: flex; align-items: center; gap: 8px; font-size: .8125rem; line-height: 1.7; }
.vz-tip__l { color: var(--text-2); flex: 1; }
.vz-tip__v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vz-tip__f { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: .75rem; color: var(--text-3); line-height: 1.4; }

/* horizontal ranked bars (emphasis: one hue) */
.vz-hb { display: grid; gap: 14px; }
.vz-hb__r { display: grid; grid-template-columns: minmax(96px, 1.1fr) 2fr auto; align-items: center; gap: 14px; }
.vz-hb__r.has-d { grid-template-columns: minmax(96px, 1.1fr) 2fr auto 52px; }
.vz-hb__l { display: grid; gap: 2px; min-width: 0; font-size: .875rem; color: var(--text); }
.vz-hb__l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-hb__l small { color: var(--text-3); font-size: .75rem; }
.vz-hb__t { height: 8px; border-radius: 8px; background: var(--line-soft); overflow: hidden; }
.vz-hb__t i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--k, var(--c1)); transition: width .8s var(--ease); }
.vz-hb.is-pre .vz-hb__t i { width: 0 !important; }
.vz-hb__v { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; text-align: right; min-width: 64px; }
.vz-hb__d { font: 500 .75rem/1 var(--font-sans); font-style: normal; text-align: right; color: var(--text-3); }
.vz-hb__d.pos { color: var(--pos); } .vz-hb__d.neg { color: var(--neg); }

/* stacked single bar */
.vz-stack { display: flex; gap: 2px; height: 12px; }
.vz-stack i { background: var(--k); min-width: 3px; }
.vz-stack i:first-child { border-radius: 4px 0 0 4px; } .vz-stack i:last-child { border-radius: 0 4px 4px 0; } .vz-stack i:only-child { border-radius: 4px; }
.vz-stack__l { display: grid; gap: 10px; margin-top: 16px; }
.vz-stack__l > div, .vz-donut__l li { display: grid; grid-template-columns: 1fr auto 44px; gap: 12px; align-items: center; font-size: .875rem; }
.vz-stack__l b, .vz-donut__l b { font-weight: 600; letter-spacing: -.01em; }
.vz-stack__l em, .vz-donut__l em { font-style: normal; color: var(--text-3); text-align: right; font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* donut */
.vz-donut { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.vz-donut__g { position: relative; flex: none; }
.vz-donut__g svg { display: block; }
.vz-seg { transition: opacity var(--dur-2) var(--ease); }
.vz-donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 3px; }
.vz-donut__c b { font: 600 1.5rem/1 var(--font-sans); letter-spacing: -.035em; }
.vz-donut__c span { font-size: .75rem; color: var(--text-3); }
.vz-donut__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 190px; }
.vz-donut__l li { transition: opacity var(--dur-2) var(--ease); }

.vz-spark { display: block; overflow: visible; }