/* Chart structure shared by the landing-page concepts. Each concept themes it by setting these on :root:
   --viz-surface --viz-ink --viz-ink-2 --viz-muted --viz-grid --viz-axis --viz-zone
   --viz-s1..3 (+ -text) --viz-deemph --viz-critical --viz-critical-wash --viz-seq-1..5 (+ -text)
   --viz-font --viz-mono --viz-radius
   Marks follow the dataviz spec: >= 8px markers with a 2px surface ring, bars <= 24px with a 4px rounded data end,
   hairline solid grid, 2px surface gap between stacked segments, text in ink tokens never series colour. */

.viz { position: relative; font-family: var(--viz-font); color: var(--viz-ink); min-width: 0; }
.viz svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.viz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Positioned so visually hidden (absolute) labels inside scrolled tables stay clipped instead of widening the page. */
.viz-table-scroll, .viz-matrix-scroll { position: relative; }

/* SVG chrome */
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-baseline { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz-frame { fill: none; stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-tick { fill: var(--viz-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-tick.is-term { fill: var(--viz-ink-2); font-size: 12px; font-weight: 500; }
.viz-axis-title { fill: var(--viz-muted); font-size: 12px; }
.viz-axis-title.is-strong { fill: var(--viz-ink); font-weight: 600; }
.viz-zone { fill: var(--viz-zone); }
.viz-zone-review { fill: var(--viz-critical-wash); }
.viz-zone-label { fill: var(--viz-muted); font-size: 11px; font-weight: 500; }
.viz-guide { fill: var(--viz-ink-2); font-size: 12px; font-weight: 500; paint-order: stroke; stroke: var(--viz-surface); stroke-width: 4px; stroke-linejoin: round; }
.viz-guide.is-muted { fill: var(--viz-muted); font-weight: 400; }
.viz-guide.is-review { fill: var(--viz-ink); stroke: var(--viz-critical-wash); }

.viz-dot { fill: var(--viz-s1); stroke: var(--viz-surface); stroke-width: 2; pointer-events: none; }
.viz-dot.is-flag { fill: var(--viz-critical); }
.viz-bar { fill: var(--viz-s1); pointer-events: none; }
.viz-bar.is-neg { fill: var(--viz-critical); }
/* A surface-coloured halo keeps direct labels legible where they cross gridlines or zones. */
.viz-label { fill: var(--viz-ink); font-size: 12px; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--viz-surface); stroke-width: 4px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.viz-label.is-sm { font-size: 11px; }
.viz-note { fill: var(--viz-muted); font-size: 11px; pointer-events: none; }
.viz-note.is-strong { fill: var(--viz-ink); font-weight: 600; }
.viz-callout { pointer-events: none; }
.viz-hit { fill: transparent; cursor: pointer; outline: none; }
.viz-hit:hover, .viz-hit:focus-visible { fill: var(--viz-ink); fill-opacity: 0.06; stroke: var(--viz-ink); stroke-opacity: 0.3; stroke-width: 1; }

.viz-flag { width: 12px; height: 12px; flex: none; fill: var(--viz-critical); vertical-align: -1px; }
.viz-flag.is-lg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -1px; }
.viz-flag-mark { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.viz-pencil { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vertical-align: -1px; }

/* Meters */
.viz-sep { display: inline-flex; align-items: center; vertical-align: middle; }
.viz-sep-track { position: relative; display: block; width: 84px; height: 8px; background: var(--viz-zone); border-radius: 4px; }
.viz-sep.is-sm .viz-sep-track { width: 64px; height: 6px; }
.viz-sep-zero { position: absolute; top: -3px; bottom: -3px; width: 1.5px; margin-left: -0.75px; background: var(--viz-muted); border-radius: 1px; }
.viz-sep-fill { position: absolute; top: 0; bottom: 0; background: var(--viz-s1); border-radius: 0 4px 4px 0; }
.viz-sep-fill.is-neg { background: var(--viz-critical); border-radius: 4px 0 0 4px; }
.viz-avg { display: inline-block; width: 64px; height: 8px; margin-right: 8px; vertical-align: middle; background: var(--viz-zone); border-radius: 4px; overflow: hidden; }
.viz-avg-fill { display: block; height: 100%; background: var(--viz-seq-3); border-radius: 0 4px 4px 0; }
.viz-meter-value { display: inline-block; min-width: 36px; font-variant-numeric: tabular-nums; }

/* Topic tag, version pill, chips */
.viz-topic { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--viz-ink-2); }
.viz-topic::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--viz-s1); }
.viz-topic.s2::before { background: var(--viz-s2); }
.viz-topic.s3::before { background: var(--viz-s3); }
.viz-vpill { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 500; line-height: 18px; color: var(--viz-ink-2); background: var(--viz-zone); border-radius: 999px; }
.viz-vpill.is-rewrite { color: var(--viz-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--viz-axis); background: var(--viz-surface); }
.viz-chip { padding: 2px 9px; font-size: 12px; font-weight: 500; color: var(--viz-ink-2); background: var(--viz-zone); border-radius: 999px; }
.viz-qname { margin: 0; font-size: 14px; font-weight: 600; color: var(--viz-ink); }
.viz-qtitle { margin: 0; color: var(--viz-ink-2); }
.viz-id { font-family: var(--viz-mono); font-size: 11px; color: var(--viz-muted); }

/* Tooltip */
.viz-tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 300px; padding: 10px 12px; font: 12.5px/1.45 var(--viz-font); color: var(--viz-ink); background: var(--viz-surface); border: 1px solid rgb(15 23 42 / 0.12); border-radius: 10px; box-shadow: 0 10px 30px rgb(15 23 42 / 0.15); }
.viz-tip[hidden] { display: none; }
.viz-tip-row { display: flex; align-items: center; gap: 7px; color: var(--viz-ink-2); }
.viz-tip-row + .viz-tip-row { margin-top: 2px; }
.viz-tip-row.is-strong { margin-bottom: 3px; font-size: 14px; font-weight: 600; color: var(--viz-ink); }
.viz-tip-label { min-width: 66px; }
.viz-tip-num { font-variant-numeric: tabular-nums; color: var(--viz-muted); }
.viz-tip-key { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--viz-s1); }
.viz-tip-key.s2 { background: var(--viz-s2); }
.viz-tip-key.s3 { background: var(--viz-s3); }

/* Legend */
.viz-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: 12px; color: var(--viz-ink-2); }
.viz-legend-title { font-weight: 600; color: var(--viz-ink); }
.viz-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.viz-sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--viz-s1); }
.viz-sw.s2 { background: var(--viz-s2); }
.viz-sw.s3 { background: var(--viz-s3); }
.viz-sw.is-empty { background: var(--viz-surface); box-shadow: inset 0 0 0 1px var(--viz-grid); }
.seq-1 { background: var(--viz-seq-1); color: var(--viz-seq-1-text); }
.seq-2 { background: var(--viz-seq-2); color: var(--viz-seq-2-text); }
.seq-3 { background: var(--viz-seq-3); color: var(--viz-seq-3-text); }
.seq-4 { background: var(--viz-seq-4); color: var(--viz-seq-4-text); }
.seq-5 { background: var(--viz-seq-5); color: var(--viz-seq-5-text); }

/* Table view */
.viz-table { margin-top: 14px; font-size: 13px; }
.viz-table summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--viz-ink-2); list-style: none; }
.viz-table summary::-webkit-details-marker { display: none; }
.viz-table summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.viz-table[open] summary::before { transform: rotate(45deg); }
.viz-table table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.viz-table caption { padding-bottom: 6px; text-align: left; font-size: 12px; color: var(--viz-muted); }
.viz-table th, .viz-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--viz-grid); white-space: nowrap; }
.viz-table thead th { font-size: 11px; font-weight: 600; color: var(--viz-muted); }
.viz-table tbody th { font-weight: 500; }

/* Usage grid */
.viz-matrix-scroll { overflow-x: auto; }
.viz-matrix { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; font-variant-numeric: tabular-nums; }
.viz-matrix thead th { padding: 0 8px 6px; font-size: 12px; font-weight: 600; text-align: left; color: var(--viz-ink); white-space: nowrap; vertical-align: bottom; }
.viz-matrix thead th span { display: block; font-size: 11px; font-weight: 400; color: var(--viz-muted); }
.viz-matrix th.is-exam { text-align: center; min-width: 92px; }
.viz-matrix .viz-group th { padding: 14px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-align: left; color: var(--viz-ink-2); }
.viz-matrix tbody:first-of-type .viz-group th { padding-top: 4px; }
.viz-matrix .viz-group .viz-sw { width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; }
.viz-matrix tbody th[scope='row'] { padding: 4px 16px 4px 0; text-align: left; font-weight: 400; min-width: 230px; }
.viz-matrix .viz-qname { display: block; font-size: 13px; }
.viz-matrix .viz-qtitle { display: block; font-size: 12px; line-height: 1.35; }
.viz-cell { height: 42px; padding: 0 6px; text-align: center; border-radius: var(--viz-radius, 6px); cursor: default; outline: none; }
.viz-cell:not(.is-empty):hover, .viz-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--viz-ink); }
.viz-cell.is-empty { color: var(--viz-muted); background: var(--viz-surface); box-shadow: inset 0 0 0 1px var(--viz-grid); }
.viz-cell-inner { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.viz-matrix td.is-num, .viz-matrix td.is-last { padding: 0 10px; color: var(--viz-ink-2); white-space: nowrap; }
.viz-matrix td.is-num, .viz-matrix th.is-num { text-align: center; }

/* Topic coverage */
.viz-cov { display: grid; gap: 14px; }
.viz-cov-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 68px; align-items: center; gap: 12px; }
.viz-cov-label { font-size: 13px; font-weight: 500; color: var(--viz-ink); }
.viz-cov-total { font-size: 12px; color: var(--viz-muted); text-align: right; font-variant-numeric: tabular-nums; }
.viz-cov-bar { display: flex; gap: 2px; height: 28px; }
.viz-cov-seg { display: flex; align-items: center; min-width: 0; padding: 0 9px; flex-basis: 0; background: var(--viz-s1); color: var(--viz-s1-text); outline: none; }
.viz-cov-seg:last-child { border-radius: 0 4px 4px 0; }
.viz-cov-seg.s2 { background: var(--viz-s2); color: var(--viz-s2-text); }
.viz-cov-seg.s3 { background: var(--viz-s3); color: var(--viz-s3-text); }
.viz-cov-seg:hover, .viz-cov-seg:focus-visible { filter: brightness(1.08); box-shadow: inset 0 0 0 2px var(--viz-ink); }
.viz-cov-text { font-size: 12px; font-weight: 600; white-space: nowrap; }
.viz-cov-text.is-hidden { display: none; }

/* Stat tiles */
.viz-kpi-label { font-size: 13px; font-weight: 500; color: var(--viz-ink-2); }
.viz-kpi-value { display: flex; align-items: center; margin-top: 4px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--viz-ink); }
.viz-kpi-note { margin-top: 2px; font-size: 12px; color: var(--viz-muted); }

/* Review list */
.viz-rv-group + .viz-rv-group { margin-top: 20px; }
.viz-rv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 6px; }
.viz-rv-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--viz-ink); }
.viz-rv-hint { font-size: 12px; color: var(--viz-muted); }
.viz-rv-empty { margin: 0; font-size: 13px; color: var(--viz-ink-2); }
.viz-rv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--viz-grid); outline: none; }
/* Side shadows extend the hover wash past the text without widening the layout. */
.viz-rv-row:hover, .viz-rv-row:focus-visible { background: var(--viz-zone); box-shadow: -8px 0 0 var(--viz-zone), 8px 0 0 var(--viz-zone); }
.viz-rv-text { min-width: 0; }
.viz-rv-row .viz-qtitle { margin-top: 1px; font-size: 12px; line-height: 1.35; }
.viz-rv-value { flex: none; display: grid; justify-items: end; gap: 4px; }
.viz-rv-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--viz-muted); }
.viz-rv-sub.is-flag { font-weight: 600; color: var(--viz-ink); }
.viz-rv-key { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding-top: 12px; font-size: 12px; line-height: 1.4; color: var(--viz-muted); border-top: 1px solid var(--viz-grid); }
.viz-rv-key .viz-sep { flex: none; }

/* Rewrite cards */
.viz-rw-note { margin: 0 0 14px; font-size: 13px; color: var(--viz-ink-2); }
.viz-rw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.viz-rw-card { padding: 16px 16px 14px; background: var(--viz-surface); border: 1px solid var(--viz-grid); border-radius: 10px; min-width: 0; }
.viz-rw-head { display: flex; flex-direction: column; gap: 2px; }
.viz-rw-head .viz-qname { font-size: 16px; }
.viz-rw-card > .viz-qtitle { margin-top: 2px; min-height: 2.9em; font-size: 13px; line-height: 1.45; } /* two lines reserved so sibling charts align */
.viz-rw-chart { margin-top: 10px; }
.viz-rw-story { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--viz-ink); }

/* Question record */
.viz-qr-meta { display: flex; align-items: center; gap: 10px; }
.viz-qr-title { margin: 6px 0 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--viz-ink); }
.viz-qr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.viz-qr-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.viz-qr-table th, .viz-qr-table td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--viz-grid); white-space: nowrap; }
.viz-qr-table thead th { padding-top: 0; font-size: 11px; font-weight: 600; color: var(--viz-muted); border-top: 0; }
.viz-qr-table tbody th { padding-left: 0; font-weight: 500; }
.viz-qr-table td .viz-flag { margin-left: 6px; }
.viz-qr-table tr.is-empty td { color: var(--viz-muted); }
.viz-qr-chart { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--viz-grid); }
.viz-qr-chart-title { font-size: 12px; font-weight: 600; color: var(--viz-ink-2); }

/* Segmented controls rendered by showcase.js */
[data-term-control], [data-outcome-control] { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Phones keep every exam column and the separation column in view; secondary columns move to tooltips/tables. */
@media (max-width: 560px) {
  .viz-cov-row { grid-template-columns: 1fr auto; }
  .viz-cov-bar { grid-column: 1 / -1; grid-row: 2; }
  .viz-matrix { font-size: 12px; }
  .viz-matrix tbody th[scope='row'] { min-width: 0; padding-right: 6px; }
  .viz-matrix .viz-qtitle, .viz-matrix .is-num, .viz-matrix .is-last { display: none; }
  .viz-matrix th.is-exam { min-width: 62px; padding: 0 2px 6px; }
  .viz-cell { padding: 0 2px; }
  .viz-avg { width: 36px; margin-right: 6px; }
  .viz-sep-track { width: 60px; }
  .viz-qr-table th, .viz-qr-table td { padding-left: 4px; padding-right: 4px; }
}