/* chart_views.css — CVW view chips + grid renderers (web/chart_views.js, lane p2-core 2026-10-23). Page tokens only, so
   light / dark / every skin follow the site. Prefix cvw-. */

/* the one line of chips: primary first and marked with a dot; the chosen view filled */
.cvw { position: relative; min-width: 0; }
.cvw-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: nowrap; margin: 0 0 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cvw-row::-webkit-scrollbar { display: none; }
.cvw-bar { display: inline-flex; flex: none; align-items: center; gap: 4px; font-size: 11px; line-height: 1.5; }
.cvw-chip {
  font: inherit; padding: 1px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.cvw-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* selected chip: body text on a light accent tint — white on the accent read 1.18:1 in neon dark skins (sweep 2026-10-24) */
.cvw-chip.on { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color: var(--accent); color: var(--text); font-weight: 600; }
.cvw-chip.cvw-prim::after {
  content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-radius: 50%;
  background: currentColor; vertical-align: middle; opacity: .75;
}
.cvw-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cvw-extra { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; }
.cvw-view[hidden] { display: none !important; }
/* "↺ Best angle" (lane p3-best-angle 2026-10-24): on a phone the row keeps one line as "↺ Best" */
@media (max-width: 520px) { .cvw-best-l { display: none; } }

/* renderers */
.cvw-plot { position: relative; min-width: 0; }
.cvw-svg { display: block; width: 100%; height: auto; overflow: visible; font-variant-numeric: tabular-nums; }
.cvw-svg text { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
.cvw-tk { font-size: 10px; fill: var(--muted); }
.cvw-at { font: 600 10.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important; fill: var(--text); }
.cvw-val { font-size: 9.5px; fill: var(--text); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.cvw-num { font-size: 9.5px; pointer-events: none; }
.cvw-reft { font-size: 9.5px; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.cvw-gl { stroke: var(--row-border, var(--border)); stroke-width: 1; }
.cvw-ax { stroke: var(--border); stroke-width: 1; }
.cvw-ref { stroke-width: 1.2; stroke-dasharray: 4 3; }
.cvw-meas { stroke: var(--panel); stroke-width: .8; }
.cvw-ring { fill: none; stroke: var(--text); stroke-width: 1.6; pointer-events: none; }
.cvw-svg .cvw-ln { transition: opacity .12s; }
.cvw-svg.cvw-dim .cvw-ln { opacity: .22; }
.cvw-svg.cvw-dim .cvw-ln.cvw-hot { opacity: 1; }
.cvw-svg .cvw-ln.cvw-hot polyline { stroke-width: 2.8; }
.cvw-hframe { fill: none; stroke: var(--row-border, var(--border)); stroke-width: 1; }
.cvw-cell { stroke: var(--panel); stroke-width: .6; }
.cvw-hcur { fill: none; stroke: var(--text); stroke-width: 1.5; pointer-events: none; }

/* legend + colour scale: one wrapped line above / below the chart */
.cvw-leg, .cvw-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 4px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.cvw-scale { margin: 4px 0 0; gap: 2px 6px; }
.cvw-leg-t { color: var(--text); font-weight: 600; }
.cvw-li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: default; border-radius: 4px; padding: 0 2px; }
.cvw-li i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.cvw-li.cvw-hot { color: var(--text); background: var(--hover, transparent); }
.cvw-grad { display: inline-block; width: 90px; height: 8px; border-radius: 4px; border: 1px solid var(--border); }
.cvw-scale b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cvw-leg-n { opacity: .8; }
.cvw-empty { margin: 0; padding: 32px 8px; text-align: center; font-size: 12px; color: var(--muted); }

.cvw-tip {
  display: none; position: absolute; z-index: 40; pointer-events: none; white-space: nowrap;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
  font-size: 11px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .cvw-grad { width: 60px; }
  .cvw-bar { font-size: 11.5px; }
}