/* The value-gap embed (content/embeds/value-gap.html): the gap slider, a navy card like the charts. */
.gap { margin-block: 2em; padding: 24px; border-radius: 10px; background: #0F1B2D; color: #E9EDF2; border: 1px solid var(--rule); }
.gap-kick { display: flex; align-items: center; gap: 10px; font: 500 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8D97A3; }
.gap-kick::before { content: ""; width: 8px; height: 8px; background: #E0452F; }
.gap-controls { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 28px; grid-auto-flow: column; grid-template-rows: auto auto; }
.gap-controls label { font-size: .92rem; color: #C3CBD5; display: flex; justify-content: space-between; gap: 8px; }
.gap-controls output { font: 600 .9rem var(--mono); color: #fff; }
.gap input[type="range"] { width: 100%; height: 32px; accent-color: #E0452F; cursor: pointer; }
.gap input[type="range"]:focus-visible { outline: 2px solid #E9EDF2; outline-offset: 2px; }
.gap svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.gap svg text { font: 500 12px var(--mono); fill: #8D97A3; }
.gap-base { stroke: #3A4A64; stroke-width: 1; }
.gap-area { fill: rgba(224, 69, 47, .16); }
.gap-lead { fill: none; stroke: #E0452F; stroke-width: 3; }
.gap-lag { fill: none; stroke: #7C8BA3; stroke-width: 3; }
.gap-now { stroke: #E9EDF2; stroke-width: 1; stroke-dasharray: 3 5; }
.gap-dot-lead { fill: #E0452F; } .gap-dot-lag { fill: #7C8BA3; }
.gap-legend { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .88rem; color: #C3CBD5; }
.gap-k { display: inline-flex; align-items: center; gap: 8px; }
.gap-k::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: #7C8BA3; }
.gap-k--lead::before { background: #E0452F; }
.gap-summary { margin-top: 14px; font-size: 1.02rem; line-height: 1.5; }
.gap-summary b { color: #fff; }
.gap-summary .gap-red { color: #FF7A63; }
figure.gap figcaption { color: #8D97A3; }
@media (max-width: 560px) { .gap { padding: 18px; } .gap svg text { font-size: 22px; } .gap-controls { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; } }