/* Styles for chart-kit.js. Uses the PreviewKit tokens (--ink, --muted, --line, --info) with fallbacks. */
.vz { display: block; overflow: visible; }
.vz text { font-family: var(--sans, system-ui, sans-serif); }
.vz-ax { font-size: 11.5px; fill: #6f7c82; font-variant-numeric: tabular-nums; }
.vz-cat { font-size: 13px; fill: var(--ink, #15181f); font-weight: 600; }
.vz-lab { font-size: 12px; fill: var(--ink-2, #2b3038); font-weight: 700; font-variant-numeric: tabular-nums; }
.vz-grid { stroke: #ebedec; stroke-width: 1; }
.vz-base { stroke: #c3c9c7; stroke-width: 1; }
.vz-target { stroke: var(--ink-2, #2b3038); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vz-cross { stroke: var(--ink-2, #2b3038); stroke-width: 1; }
.vz-leader { stroke: #b7bfc2; stroke-width: 1; }
.vz-hlrow { fill: var(--accent-soft, #f6e7da); }
.vz-hit { cursor: crosshair; outline: none; }
.vz-hit:focus-visible { outline: 2px solid var(--info, #2c5f8a); }
.vz-mark { cursor: default; outline: none; }
.vz-mark.on path, .vz-mark:hover path { filter: brightness(1.08); }
.vz-mark:focus-visible rect { stroke: var(--info, #2c5f8a); stroke-width: 2; }
.vz-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2, #2b3038); margin-bottom: 8px; }
.vz-legend span { display: inline-flex; gap: 7px; align-items: center; }
.vz-legend i { display: inline-block; flex: 0 0 auto; }
.vz-legend i.sq { width: 11px; height: 11px; border-radius: 3px; }
.vz-legend i.ln { width: 16px; height: 2.5px; border-radius: 2px; }
.vz-legend i.ln.dash { background: repeating-linear-gradient(90deg, #9aa6ac 0 5px, transparent 5px 8px) !important; }
.vz-tip { position: fixed; z-index: 600; background: #fff; color: var(--ink, #15181f); border: 1px solid var(--line, #e2ddd4); border-radius: 10px; box-shadow: 0 10px 30px rgba(2, 31, 45, .18); padding: 9px 11px; font-size: 13px; pointer-events: none; min-width: 150px; max-width: 280px; }
.vz-tip-h { font-size: 12px; color: var(--muted, #5e6470); font-weight: 700; margin-bottom: 4px; }
.vz-tip-r { display: grid; grid-template-columns: 14px auto 1fr; gap: 7px; align-items: center; padding: 1px 0; }
.vz-tip-r b { font-variant-numeric: tabular-nums; }
.vz-tip-r span { color: var(--muted, #5e6470); font-size: 12px; }
.vz-tip .k { width: 12px; height: 2.5px; border-radius: 2px; }
.vz-tip .k.rect { height: 10px; width: 10px; border-radius: 3px; }
.vz-tip .k.dash { background: repeating-linear-gradient(90deg, #9aa6ac 0 4px, transparent 4px 6px) !important; }
.spark { display: block; }
/* Card with Show table toggle */
.vz-card { background: #fff; border: 1px solid var(--line, #e2ddd4); border-radius: var(--radius, 14px); padding: 16px 18px; min-width: 0; }
.vz-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.vz-card-head h3 { margin: 0; font-size: 16px; }
.vz-card-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted, #5e6470); }
.vz-acts { display: flex; gap: 8px; align-items: center; }
.vz-tog { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--line, #e2ddd4); background: transparent; color: var(--ink, #15181f); cursor: pointer; }
.vz-tablebox { margin-top: 10px; }
/* Table view */
.tbl-wrap { overflow-x: auto; }
table.vz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vz-table th, .vz-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-2, #efebe4); text-align: left; }
.vz-table thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5e6470); font-weight: 800; border-bottom-color: var(--line, #e2ddd4); white-space: nowrap; }
.vz-table th[scope=row] { font-weight: 600; }
.vz-table .r { text-align: right; }
.vz-table .num { font-variant-numeric: tabular-nums; }