/* History: the night map with a timeline under it, then charts. */

.hist-hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.hist-hero .hero-scrim { height: 70%; }
.hist-copy { position: absolute; left: var(--edge); bottom: 150px; z-index: 2; max-width: min(640px, calc(100% - 2 * var(--gutter))); }
.history-page h1 { font-size: clamp(32px, 4.2vw, 58px); }
.hist-copy .dek { max-width: 50ch; }
.readout { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.readout .when { font: 700 22px/1.2 var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.readout .what { color: var(--paper-2); font-size: 15px; font-variant-numeric: tabular-nums; }

/* the timeline: an area of outages per ten minutes, with the slider on top */
.scrubber {
  position: absolute; left: var(--edge); right: var(--edge); bottom: 34px; z-index: 3;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center;
}
.play {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong); background: rgba(5, 7, 12, 0.7);
  color: var(--paper); cursor: pointer; display: grid; place-items: center;
}
.play:hover { border-color: var(--paper-2); }
.play svg { width: 16px; height: 16px; fill: currentColor; }
.play .i-pause, body.playing .play .i-play { display: none; }
body.playing .play .i-pause { display: inline; }
.track { position: relative; height: 64px; }
.timeline { position: absolute; inset: 0 0 18px 0; width: 100%; height: calc(100% - 18px); overflow: visible; --x: 100%; }
.timeline .tl-area { fill: rgba(255, 90, 60, 0.16); }
.timeline .tl-line { fill: none; stroke: rgba(255, 90, 60, 0.75); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.track input {
  position: absolute; inset: 0 0 18px 0; width: 100%; height: calc(100% - 18px); margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize;
}
.track input::-webkit-slider-runnable-track { height: 100%; background: transparent; border-bottom: 1px solid var(--rule-strong); }
.track input::-moz-range-track { height: 100%; background: transparent; border-bottom: 1px solid var(--rule-strong); }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 46px; background: var(--paper); box-shadow: 0 0 0 4px rgba(239, 232, 219, 0.12); border: 0; }
.track input::-moz-range-thumb { width: 2px; height: 46px; background: var(--paper); border: 0; border-radius: 0; }
.track input:focus-visible { outline: 1px solid var(--lights); outline-offset: 4px; }
.ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.ticks span { position: absolute; transform: translateX(4px); font: 500 10.5px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; border-left: 1px solid var(--rule); padding-left: 5px; }

/* charts (the .hchart frame is in place.css) */
.bigchart .hchart { height: 220px; margin-top: 24px; }
.hchart .line.dashed { stroke-dasharray: 4 4; opacity: 0.8; }
.hchart.mini { height: 56px; margin: 8px 0 0; }
.hchart.mini .peak { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.empty { color: var(--faint); font-size: 14px; }

.multiples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.multiple { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-decoration: none; padding-top: 10px; border-top: 1px solid var(--rule); }
.multiple .m-name { font: 600 16px/1.3 var(--sans); }
.multiple .m-peak { font: 600 14px/1.3 var(--sans); color: var(--paper-2); font-variant-numeric: tabular-nums; }
.multiple .hchart { grid-column: 1 / -1; }
.multiple:hover .m-name { text-decoration: underline; text-decoration-color: var(--cut); text-underline-offset: 4px; }

.longview { grid-template-columns: 1fr; }

@media (max-width: 900px) { .multiples { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .hist-hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hist-hero .map { position: relative; height: 46svh; inset: auto; order: 2; }
  .hist-hero .hero-scrim { display: none; }
  .hist-copy { position: relative; left: auto; bottom: auto; max-width: none; padding: 84px var(--gutter) 10px; order: 1; }
  .scrubber { position: relative; left: auto; right: auto; bottom: auto; order: 3; padding: 14px var(--gutter) 6px; }
  .multiples { grid-template-columns: 1fr; }
}
.history-page .maplibregl-ctrl-bottom-right, .history-page .maplibregl-ctrl-top-right { bottom: 118px; top: auto; }
@media (max-width: 640px) { .history-page .maplibregl-ctrl-bottom-right, .history-page .maplibregl-ctrl-top-right { bottom: 10px; } }