/* Fine-tuning topic: charts, rule table, heatmaps. Uses the colour tokens from ../common.css */
.chart{margin:18px 0 6px;min-width:0}
.plot{width:100%;height:auto;display:block;color:var(--fg);overflow:visible}
.plot.pickable{cursor:crosshair}
.plot .axis line{stroke:var(--muted);stroke-width:1}
.plot .axis line.grid{stroke:var(--line)}
.plot text{fill:var(--muted);font:13px var(--mono)}
.plot text.label{fill:var(--fg);font-size:13px}.plot text.label.small{font-size:10.5px}
.plot .ref{stroke:var(--muted);stroke-dasharray:2 4;stroke-width:1}
.plot .ref-label,.plot .pt-label{font-size:12px}
.plot .pt-label{fill:var(--fg)}
.plot .cursor{stroke:var(--hi);stroke-width:1.5;stroke-dasharray:5 3}
.plot .bar{fill:var(--s1);opacity:.55}
.plot .bar.over{fill:var(--s2);opacity:.75}
.series .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.series .ln.dash{stroke-dasharray:7 5}
.series .mk{stroke:var(--panel);stroke-width:1.5}
.series .mk.on{stroke:var(--fg);stroke-width:2.5}
.s1 .ln{stroke:var(--s1)}.s1 .mk{fill:var(--s1)}
.s2 .ln{stroke:var(--s2)}.s2 .mk{fill:var(--s2)}
.s3 .ln{stroke:var(--s3)}.s3 .mk{fill:var(--s3)}
.series.faint .ln{opacity:.35;stroke-width:2}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.72rem;color:var(--muted);margin:6px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend b{font-weight:400}
.map .cell rect{stroke:var(--line);stroke-width:1;fill:var(--bg)}
.map .cell.m0 rect{fill:color-mix(in srgb,var(--s1) 16%,var(--bg))}
.map .cell.m1 rect{fill:color-mix(in srgb,var(--s3) 18%,var(--bg))}
.map .cell.m2 rect{fill:color-mix(in srgb,var(--s2) 18%,var(--bg))}
.map .cell.on rect{stroke:var(--hi);stroke-width:3.5}
.map .cell{cursor:pointer}.map .cell:focus{outline:none}.map .cell:focus rect{stroke:var(--s1);stroke-width:3}
.map .cell-name{fill:var(--fg);font:600 16px var(--mono)}
.map .cell-score{fill:var(--muted);font:12px var(--mono)}
.ctl-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;align-items:center;font-size:.78rem;margin:16px 0}
.ctl-grid input[type=range]{width:100%;accent-color:var(--hi)}
.ctl-grid input[type=number]{width:120px}
.ctl-grid .val{font-family:var(--mono);min-width:4ch;text-align:right}
.metric.best{border-left-width:4px}
h4.mini{font-size:.8rem;margin:22px 0 6px}
.table-scroll{max-width:100%;overflow-x:auto}
table.rules td:nth-child(n+2),table.rules thead th:nth-child(n+2){text-align:right;font-family:var(--mono);width:5.5em}
table.rules thead th{white-space:nowrap}
table.rules tr.qrow th{white-space:normal;padding-top:14px;font-weight:600;color:var(--muted);border-bottom:0}
table.rules tr.sel td{background:color-mix(in srgb,var(--hi) 9%,transparent);font-weight:600}
table.rules tr.total td{border-top:2px solid var(--fg);font-weight:700}
table.rules td.pos{color:var(--s3)}table.rules td.neg{color:var(--s2)}
table.issues td:first-child{width:4em;font-family:var(--mono)}table.issues td:nth-child(2){width:11em;font-family:var(--mono);font-size:.72rem}
table.issues tr.bad td:nth-child(2){color:var(--s2)}
.label-bars{display:grid;gap:6px;margin:6px 0 10px}
.lbar{display:grid;grid-template-columns:7em minmax(0,1fr) 8em;gap:10px;align-items:center;font-size:.75rem}
.lbar code{font-family:var(--mono)}.lbar .budget-track{margin:0}.lbar span{font-family:var(--mono);text-align:right}
.heat-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 6px}
.heat-pair figure{margin:0}
.heat-pair canvas{width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border:1px solid var(--line);display:block}
.heat-pair figcaption{font:.72rem var(--mono);color:var(--muted);margin-top:6px;text-align:center}
.code-sample{border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.status[hidden]{display:none}
[data-big="1"] .plot text{font-size:17px}[data-big="1"] .map .cell-name{font-size:20px}[data-big="1"] .map .cell-score{font-size:15px}
@media(max-width:700px){table.issues td:nth-child(2){width:7.5em}table.rules td:nth-child(n+2),table.rules thead th:nth-child(n+2){width:3.4em;font-size:.7rem}.plot text{font-size:12px}.plot text.label{font-size:12px}.plot .ref-label,.plot .pt-label{font-size:11px}.map .cell-name{font-size:13px}.map .cell-score{font-size:11px}.ctl-grid{grid-template-columns:minmax(0,1fr) auto}.ctl-grid label{grid-column:1/-1}.lbar{grid-template-columns:5em minmax(0,1fr) 6.5em}.heat-pair{gap:8px}}
@media print{.plot.pickable{cursor:auto}.heat-pair canvas{max-width:180px}}