/* nx-viz.css — charts and data panels (VIZ-2026-10).
   Series colours are tokens built on the site palette (style.css), so a theme
   change re-colours every chart. s1 good/primary, s2 secondary, s3 money,
   s4 risk, s5 neutral/unconfirmed. Text inside SVG uses the same type scale
   as the page and never goes below 12px (the site's floor). */
:root {
  --vz-s1: var(--ok, #53F28D);
  --vz-s2: var(--accent, #16D9FF);
  --vz-s3: var(--warn, #FFBD4A);
  --vz-s4: var(--crit, #FF657A);
  --vz-s5: var(--faint, #5a6680);
  --vz-grid: color-mix(in srgb, var(--line, #1e2940) 80%, transparent);
  --vz-track: color-mix(in srgb, var(--line, #1e2940) 90%, transparent);
  --vz-card: color-mix(in srgb, var(--panel-2, #0e1420) 85%, transparent);
}
[data-theme="light"] { --vz-s5: #9aa6bb; }

.vz-panel { margin-bottom: 18px; border-color: color-mix(in srgb, var(--vz-s1) 35%, transparent); }
.vz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.vz-head-r { display: flex; align-items: center; gap: 10px; font-size: .75rem; }
.vz-title { margin: 4px 0 0; font-size: 1.15rem; }
.vz-h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.vz-h4 { margin: 14px 0 8px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.vz-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.vz-foot { font-size: .75rem; margin: 12px 0 0; }
.vz-empty { margin: 6px 0; font-size: .82rem; color: var(--faint); }

.vz-grid { display: grid; gap: 14px; }
.vz-g-live { grid-template-columns: minmax(170px, 210px) 1fr minmax(220px, 300px); align-items: stretch; }
.vz-g-growth { grid-template-columns: 1.7fr 1fr; }
.vz-g-int { grid-template-columns: repeat(4, 1fr); }
.vz-g-user { grid-template-columns: repeat(3, 1fr); }
.vz-g-user2 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 980px) {
  .vz-g-live, .vz-g-growth, .vz-g-user2 { grid-template-columns: 1fr; }
  .vz-g-user { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vz-g-int, .vz-g-user { grid-template-columns: 1fr 1fr; }
}

.vz-card { background: var(--vz-card); border: 1px solid var(--line, #1e2940); border-radius: 14px; padding: 16px; min-width: 0; }
.vz-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vz-sub { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }

.vz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .vz-kpis { grid-template-columns: 1fr 1fr; } }
.vz-kpi { background: var(--vz-card); border: 1px solid var(--line, #1e2940); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 78px; }
.vz-kpi b { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.vz-k-label { font-size: .75rem; color: var(--muted); }
.vz-c1 { color: var(--vz-s1); } .vz-c2 { color: var(--vz-s2); } .vz-c3 { color: var(--vz-s3); } .vz-c4 { color: var(--vz-s4); }

/* SVG */
.vz { display: block; max-width: 100%; overflow: visible; }
.vz-area, .vz-cols { width: 100%; height: auto; }
.vz-track { stroke: var(--vz-track); }
.vz-arc { transition: stroke-dasharray .6s ease; }
.vz-s1 { stroke: var(--vz-s1); } .vz-s2 { stroke: var(--vz-s2); } .vz-s3 { stroke: var(--vz-s3); } .vz-s4 { stroke: var(--vz-s4); } .vz-s5 { stroke: var(--vz-s5); }
.vz-stop-s1 { stop-color: var(--vz-s1); } .vz-stop-s2 { stop-color: var(--vz-s2); } .vz-stop-s3 { stop-color: var(--vz-s3); } .vz-stop-s4 { stop-color: var(--vz-s4); } .vz-stop-s5 { stop-color: var(--vz-s5); }
.vz-fill-s1 { fill: var(--vz-s1); } .vz-fill-s2 { fill: var(--vz-s2); } .vz-fill-s3 { fill: var(--vz-s3); } .vz-fill-s4 { fill: var(--vz-s4); } .vz-fill-s5 { fill: var(--vz-s5); }
.vz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-dash { stroke-dasharray: 5 4; }
.vz-dot { stroke-width: 2; fill: var(--panel, #111826); }
.vz-gridline { stroke: var(--vz-grid); stroke-width: 1; }
.vz-plot-svg rect { stroke: none; }
.vz-tick { fill: var(--faint, #5a6680); font-size: 12px; font-family: var(--mono, ui-monospace, monospace); }
.vz-big { fill: var(--ink, #e6edf6); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vz-cap { fill: var(--muted, #8a99b3); font-size: 12px; }
.vz-hit { fill: transparent; }
.vz-hit:hover { fill: color-mix(in srgb, var(--ink, #e6edf6) 7%, transparent); }

/* HTML bars, funnel, legend, pills */
.vz-bg-s1 { background: var(--vz-s1); } .vz-bg-s2 { background: var(--vz-s2); } .vz-bg-s3 { background: var(--vz-s3); } .vz-bg-s4 { background: var(--vz-s4); } .vz-bg-s5 { background: var(--vz-s5); }
.vz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-bars li { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr auto; align-items: center; gap: 10px; font-size: .8rem; }
.vz-b-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, ui-monospace, monospace); color: var(--muted); }
.vz-b-track, .vz-f-bar { height: 8px; border-radius: 99px; background: var(--vz-track); overflow: hidden; }
.vz-b-track i, .vz-f-bar i { display: block; height: 100%; border-radius: 99px; }
.vz-bars b { font-variant-numeric: tabular-nums; }
.vz-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vz-funnel li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b" "c c"; gap: 4px 10px; font-size: .82rem; }
.vz-f-label { grid-area: l; color: var(--muted); }
.vz-f-val { grid-area: v; font-variant-numeric: tabular-nums; font-size: 1rem; }
.vz-f-bar { grid-area: b; height: 12px; }
.vz-f-conv { grid-area: c; font-size: .75rem; color: var(--faint); min-height: 0; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: .78rem; color: var(--muted); }
.vz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vz-key { display: inline-block; width: 14px; height: 4px; border-radius: 3px; }
.vz-key-dash { background: repeating-linear-gradient(90deg, var(--vz-s2) 0 4px, transparent 4px 7px) !important; }
.vz-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vz-pill { font-size: .75rem; padding: 3px 9px; border-radius: 99px; }
.vz-bg-soft-1 { background: color-mix(in srgb, var(--vz-s1) 16%, transparent); color: var(--vz-s1); }
.vz-bg-soft-5 { background: color-mix(in srgb, var(--vz-s5) 30%, transparent); color: var(--muted); }
.vz-data { margin-top: 10px; font-size: .8rem; }
.vz-data summary { cursor: pointer; color: var(--muted); }
.vz-table-wrap { max-height: 240px; overflow: auto; margin-top: 8px; }

/* Integrity status */
.vz-status { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.vz-lvl-normal .vz-status { background: color-mix(in srgb, var(--vz-s1) 16%, transparent); color: var(--vz-s1); }
.vz-lvl-elevated { border-color: color-mix(in srgb, var(--vz-s4) 55%, transparent); }
.vz-lvl-elevated .vz-status { background: color-mix(in srgb, var(--vz-s4) 18%, transparent); color: var(--vz-s4); }

/* User dashboard hero */
.vz-user { margin-top: 14px; }
.vz-user-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 560px) { .vz-user-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.vz-meter { margin-top: 8px; }
.vz-meter-row { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.vz-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: .82rem; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--panel, #111826) 70%, transparent); }
.vz-grade { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 700; font-size: .85rem; }
.vz-grade-A, .vz-grade-B { background: color-mix(in srgb, var(--vz-s1) 18%, transparent); color: var(--vz-s1); }
.vz-grade-C { background: color-mix(in srgb, var(--vz-s3) 18%, transparent); color: var(--vz-s3); }
.vz-grade-D, .vz-grade-E, .vz-grade-F { background: color-mix(in srgb, var(--vz-s4) 18%, transparent); color: var(--vz-s4); }
.vz-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, ui-monospace, monospace); }
.vz-cta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .vz-arc { transition: none; } }

/* Chart frame: HTML axis labels + stretchable SVG plot (labels never scale). */
.vz-chart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 4px 8px; }
.vz-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-width: 1.6em;
  font: 12px/1 var(--mono, ui-monospace, monospace); color: var(--faint, #5a6680); margin: -6px 0; }
.vz-plot { position: relative; height: 200px; }
.vz-plot-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vz-x { display: flex; justify-content: space-between; font: 12px/1 var(--mono, ui-monospace, monospace); color: var(--faint, #5a6680); }
@media (max-width: 560px) { .vz-plot { height: 160px; } }
.vz-hit { fill: var(--ink, #e6edf6); fill-opacity: 0; }
.vz-hit:hover { fill-opacity: .07; }
.vz-g-growth .vz-plot { height: 280px; }
@media (max-width: 980px) { .vz-g-growth .vz-plot { height: 200px; } }

/* Plan features and usage (USAGE-2026-10) */
.pu-list { list-style: none; margin: 0; padding: 0; }
.pu-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line, #1e2940); }
.pu-list li:first-child { border-top: 0; }
.pu-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--vz-s1) 18%, transparent); color: var(--vz-s1); }
.pu-list li.is-planned .pu-mark { background: var(--vz-track); color: var(--faint); }
.pu-list li.is-planned b { color: var(--muted); font-weight: 500; }
.pu-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .88rem; }
.pu-use { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
.pu-meter { flex-basis: 100%; max-width: 360px; height: 6px; }
.pu-go { padding: 5px 12px; min-height: 34px; font-size: .8rem; white-space: nowrap; }
@media (max-width: 560px) { .pu-list li { grid-template-columns: 22px 1fr; } .pu-go { grid-column: 2; justify-self: start; } }
.pau-table td, .pau-table th { vertical-align: middle; font-size: .82rem; }
.pau-table td:nth-child(n+5):nth-child(-n+9) { font-variant-numeric: tabular-nums; text-align: right; }
.pau-eng { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.pau-active { background: color-mix(in srgb, var(--vz-s1) 16%, transparent); color: var(--vz-s1); }
.pau-quiet { background: color-mix(in srgb, var(--vz-s3) 16%, transparent); color: var(--vz-s3); }
.pau-risk { background: color-mix(in srgb, var(--vz-s4) 16%, transparent); color: var(--vz-s4); }
.pau-table th { white-space: nowrap; font-size: .75rem; letter-spacing: .02em; }
.pau-table td:first-child { word-break: break-all; }