/* The instruments' shared parts (NEXT-LEVEL.md N9): the one readout (static/js/instrument.js vgReadout) and the legend in
   words. The app loads this after arctic.css; the home page loads it with its live components (static/js/home_live.mjs),
   whose own tokens come from static/css/vg_live.css. Moved here from arctic.css unchanged. */
/* A legend that says what each mark is in words, its swatch only a reminder. */
.vg-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--vg-ink-2); font-size: var(--vg-num-sm); }
.vg-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.vg-legend i { flex: 0 0 auto; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
.vg-legend .is-plan i { background: var(--vg-plan); }
.vg-legend .is-traded i { background: var(--vg-traded); }
.vg-legend .is-gap i { height: 10px; border-radius: 2px; background: var(--vg-hatch), var(--vg-break-tint); }
.vg-legend .is-break i { width: 8px; height: 8px; border: 2px solid var(--vg-break); border-radius: 50%; background: var(--vg-surface-1); }

/* The one readout (static/js/instrument.js vgReadout): an anchored chip with a leader line to its point. */
.vg-ro-chip {
    position: absolute; z-index: 30; left: 0; top: 0;
    min-width: 11rem; max-width: 17rem; margin: 0; padding: 0.55rem 0.75rem;
    border: 1px solid var(--vg-hairline-strong); border-radius: var(--vg-radius-inner);
    background: var(--vg-surface-raised); box-shadow: var(--vg-elev-raised);
    color: var(--vg-ink-1); font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums;
    pointer-events: none; white-space: normal;
}
.vg-ro-chip[hidden] { display: none; }
.vg-ro-chip p { margin: 0; }
.vg-ro-chip.is-anchored {
    inset: auto; position-area: block-start; position-try-fallbacks: flip-block; margin-block: 14px;
}
.vg-ro-chip.is-docked { position: static; max-width: none; margin-top: 10px; box-shadow: none; }
.vg-ro-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 29; }
.vg-ro-leader line { stroke: var(--vg-ink-2); stroke-width: 1.25; stroke-dasharray: 3 2; }
.vg-ro-point {
    position: absolute; z-index: 30; width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border: 2px solid var(--vg-ink-1); border-radius: 50%; background: var(--vg-surface-raised);
    opacity: 0; pointer-events: none;
}
.vg-ro-point.is-on { opacity: 1; }
/* The equity curve draws its own crosshair marker: the readout's point there is only the chip's anchor. */
#widget-equitycurve .vg-ro-point { opacity: 0 !important; }