/* Chart chrome: containers, SVG element classes, tooltip, bullet rows. */

.chart {
  position: relative;
}
.chart .chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; min-width: 0; }
.chart .chart-head .chart-title { font-size: var(--fs-13); font-weight: 600; color: var(--ink); min-width: 0; }
.chart .chart-head > .row { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.chart svg { display: block; width: 100%; overflow: visible; }

/* SVG primitives (styled via class on elements) */
.ax-line { stroke: var(--axis); stroke-width: 1; }
.grid-line { stroke: var(--hairline); stroke-width: 1; }
.ax-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ax-title { fill: var(--muted); font-size: 11px; }
.series-line { fill: none; stroke-width: 2; }
.series-dot { stroke: var(--surface); stroke-width: 1.5; }
.end-label { font-size: 11px; font-weight: 600; }
.val-label { font-size: 11px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }

/* Tooltip */
.chart-tip {
  position: fixed; pointer-events: none; z-index: 80;
  background: var(--ink); color: #fff; border-radius: var(--r-sm);
  padding: 8px 10px; font-size: var(--fs-12); line-height: 1.5;
  box-shadow: var(--shadow-pop); max-width: min(280px, calc(100vw - 24px));
  overflow-wrap: anywhere; opacity: 0; transition: opacity .08s;
}
.chart-tip.show { opacity: 1; }
.chart-tip .tip-title { font-weight: 700; margin-bottom: 4px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; min-width: 0; }
.chart-tip .tip-row .tk { display: inline-flex; align-items: center; gap: 6px; color: #d9d9d6; min-width: 0; }
.chart-tip .tip-row .sw { width: 9px; height: 9px; border-radius: 2px; }
.chart-tip .tip-row .tv { font-weight: 700; font-variant-numeric: tabular-nums; }
.crosshair { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 0; }

/* Bullet row (LQDF) */
.bullet-row { display: grid; align-items: center; }
.bullet-svg .range-bar { fill: #e9e8e1; }
.bullet-svg .board-avg { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.bullet-svg .cluster-tick { stroke: var(--ink-2); stroke-width: 2; }
.bullet-svg .target-tick { stroke: var(--critical); stroke-width: 1.5; }
.bullet-svg .practice-diamond { fill: var(--cat-1); stroke: #fff; stroke-width: 1; }

/* Dumbbell */
.dumbbell .range-bar { fill: #e9e8e1; }
.dumbbell .dot-entity { stroke: #fff; stroke-width: 1.2; }
.dumbbell .dot-you { fill: var(--cat-1); }
.dumbbell .avg-tick { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 2; }

/* Percentile strip */
.pctile-track { height: 26px; border-radius: var(--r-sm); overflow: hidden; display: flex; border: 1px solid var(--hairline); }
.pctile-track .q { flex: 1; }
.pctile-q1 { background: var(--seq-200); } .pctile-q2 { background: var(--seq-300); }
.pctile-q3 { background: var(--seq-400); } .pctile-q4 { background: var(--seq-500); } .pctile-q5 { background: var(--seq-600); }
.pctile-wrap { position: relative; }
.pctile-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); }
.pctile-marker::after { content: ""; position: absolute; top: -5px; left: -4px; border: 5px solid transparent; border-top-color: var(--ink); }

/* Heatmap */
.heatmap { border-collapse: separate; border-spacing: 3px; }
.heatmap th { font-size: var(--fs-12); color: var(--ink-2); font-weight: 600; padding: 4px 8px; text-align: left; }
.heatmap th.rot { text-align: center; }
.heatmap td.cell { text-align: center; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 6px; min-width: 56px; }
.heatmap td.rowhead { font-size: var(--fs-12); font-weight: 600; color: var(--ink); white-space: nowrap; padding-right: var(--s3); }
.heatmap td.boardcol { border-left: 2px solid var(--hairline); }
.heatmap td.cell.drill-cell { cursor: pointer; }
.heatmap td.cell.drill-cell:hover { outline: 2px solid var(--ink); outline-offset: -2px; filter: brightness(1.05); }

/* Funnel */
.funnel .limit-2 { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.funnel .limit-3 { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.funnel .center-line { stroke: var(--ink-2); stroke-width: 1; }
.funnel .dot { stroke: #fff; stroke-width: 1.2; }
.funnel .dot.out { fill: var(--critical); }
.funnel .dot.norm { fill: var(--cat-1); }

/* Pyramid */
.pyramid .bar-m { fill: var(--cat-1); }
.pyramid .bar-f { fill: var(--cat-7); }
.pyramid .outline { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-dasharray: 3 2; }
.pyramid .mid-label { fill: var(--muted); font-size: 10px; }

/* Histogram */
.hist .bar { fill: var(--cat-1); }
.hist .bar.hi { fill: var(--cat-6); }
.hist .threshold { stroke: var(--critical); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* SIMD stacked bar */
.simd-bar { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--hairline); }
.simd-bar .seg { display: grid; place-items: center; font-size: 11px; font-weight: 600; }

/* "View as table" toggle area */
.chart-table-view { margin-top: var(--s3); overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.chart-table-view table.dt { font-size: var(--fs-12); min-width: max-content; }