/* GoalHeatmap — SVG heat-histogram of goal timing */
.wc-heat { width: 100%; }
.wc-heat-skel { padding: 2rem; text-align: center; color: oklch(var(--bc) / 0.6); font-size: 0.9rem; }
.wc-heat-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; color: oklch(var(--bc)); }
.wc-heat-svg { width: 100%; height: auto; display: block; }

.wc-heat-grid { stroke: oklch(var(--b3)); stroke-width: 1; stroke-dasharray: 2 3; }
.wc-heat-axis { stroke: oklch(var(--bc) / 0.45); stroke-width: 1.2; }
.wc-heat-ytick, .wc-heat-xtick { fill: oklch(var(--bc) / 0.55); font-size: 11px; font-weight: 600; }
.wc-heat-xlab { fill: oklch(var(--bc) / 0.5); font-size: 11px; font-weight: 600; }
.wc-heat-val { fill: oklch(var(--bc) / 0.75); font-size: 10px; font-weight: 700; }
.wc-heat-ht { stroke: var(--wc-gold); stroke-width: 1.4; stroke-dasharray: 4 3; }
.wc-heat-htlab { fill: var(--wc-gold); font-size: 10px; font-weight: 800; }
.wc-heat-bar rect { transition: opacity 0.15s; }
.wc-heat-bar:hover rect { opacity: 0.78; }

.wc-heat-caption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
  margin-top: 0.6rem; font-size: 0.78rem; color: oklch(var(--bc) / 0.7);
}
.wc-heat-caption b { color: oklch(var(--bc)); }
.wc-heat-peak { color: var(--wc-red); font-weight: 600; }
[data-theme="dark"] .wc-heat-peak { color: #ff8aa0; }
.wc-heat-scale { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-style: italic; opacity: 0.85; }
.wc-heat-grad {
  display: inline-block; width: 110px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, rgb(220,231,245), rgb(46,111,201) 45%, rgb(255,199,44) 75%, rgb(228,0,43));
}