/* Backtest check: two heatmaps of the same 24 settings, tuning years beside held-back years */
.heat-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.heat-block { display: grid; gap: 8px; min-width: 0; align-content: start; }
.heat-block h4 { margin: 0; font-size: 13px; font-weight: 600; }
table.heat { border-collapse: separate; border-spacing: 2px; }
table.heat th, table.heat td { border: 0; padding: 7px 4px; text-align: center; }
table.heat thead th { padding-bottom: 4px; }
table.heat tbody th { text-align: right; padding-right: 8px; color: var(--ink-2); font-weight: 500; }
table.heat td { color: var(--ink); font-weight: 500; border-radius: 3px; min-width: 46px; }
/* Each cell sets --pole (red or blue) and --k (0 to 1); the theme caps the fill so the value keeps 4.5:1 contrast. */
table.heat td, .key-heat { background: color-mix(in oklab, var(--pole) calc(var(--k) * var(--div-max)), var(--div-mid)); }
.key-heat { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
table.heat td.best { box-shadow: inset 0 0 0 2px var(--ink); }
table.heat td.hl { outline: 2px dashed var(--ink-2); outline-offset: -5px; }
.key-scale { width: 64px; height: 10px; border-radius: 2px; flex: none; display: inline-block; background: linear-gradient(to right, var(--div-neg), var(--div-mid), var(--div-pos)); }
.key-ring { width: 16px; height: 12px; border-radius: 2px; flex: none; display: inline-block; background: var(--div-mid); box-shadow: inset 0 0 0 2px var(--ink); }
.seeds-note { font-size: 12.5px; color: var(--muted); max-width: 80ch; }
@media (max-width: 900px) { .heat-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { table.heat td { min-width: 0; padding: 6px 1px; font-size: 12px; } table.heat th { padding-inline: 2px; } }