/* =========================================================
   keel/replay.css -- keel's window replaying the benchmark
   (hero.js), for any page that shows it
   ========================================================= */

/* inside the drawing: keel's deep green card; amber while steering is off */
svg.kh[hidden], #hero-art[hidden], #keel-replay[hidden] { display: none; }

.kh { --kh-good: #3fd68a; --kh-state: var(--kh-good); font-family: Inter, system-ui, sans-serif; }
.kh.kh-off { --kh-state: #f5a524; }
.kh-window { fill: #0b1716; stroke: rgba(255, 255, 255, 0.08); }
.kh-title { fill: #c9d6d2; font-size: 12px; font-weight: 600; text-anchor: middle; }
.kh-card { fill: url(#kh-teal) #10302c; stroke: rgba(255, 255, 255, 0.06); }
.kh-badge { fill: color-mix(in srgb, var(--kh-state) 20%, transparent); stroke: var(--kh-state); stroke-width: 1.5; transition: fill 300ms, stroke 300ms; }
.kh-mark { fill: none; stroke: var(--kh-state); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kh-head { fill: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.kh-line, .kh-small, .kh-cap { fill: #9fb8b1; font-size: 12px; }
.kh-label { fill: #7f9a93; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; }
.kh-big { fill: var(--kh-state); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: fill 300ms; }
.kh-mid { fill: #fff; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kh-track { fill: var(--kh-good); transition: fill 300ms; }
.kh.kh-off .kh-track { fill: #4a5a57; }
.kh-knob { fill: #fff; }
.kh-axis { stroke: rgba(255, 255, 255, 0.12); }
/* the side not shown is outlined, not dimmed: dimmed amber on teal reads as mud */
.kh-bar { fill-opacity: 0.1; stroke-width: 1.5; stroke-opacity: 0.6; transition: fill-opacity 300ms, stroke-opacity 300ms; }
.kh-bar.on { fill: var(--kh-good); stroke: var(--kh-good); }
.kh-bar.off { fill: #f5a524; stroke: #f5a524; }
.kh-barv { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.6; transition: opacity 300ms; }
.kh-barv.on { fill: var(--kh-good); }
.kh-barv.off { fill: #f5a524; }
.kh:not(.kh-off) .kh-bar.on, .kh.kh-off .kh-bar.off { fill-opacity: 1; stroke-opacity: 0; }
.kh:not(.kh-off) .kh-barv.on, .kh.kh-off .kh-barv.off { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kh-badge, .kh-big, .kh-track, .kh-bar, .kh-barv { transition: none; }
}