/* Replay page: type set directly on the map, no cards. */
html, body.replay { height: 100%; overflow: hidden; }
#map { position: absolute; inset: 0; background: var(--land); }

.top, .readout, .timeline { position: absolute; text-shadow: var(--halo); }

.top { top: 26px; left: 30px; max-width: min(520px, calc(100% - 60px)); }

.fire { margin-top: 34px; position: relative; }
.fire-name {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  font: 400 40px/1.05 var(--serif); letter-spacing: -0.012em; text-shadow: var(--halo);
}
.fire-name svg { color: var(--ink-soft); transform: translateY(-4px); }
.fire-name:hover svg { color: var(--ink); }
.fire-range { margin: 8px 0 0; font: 400 16px/1.3 var(--sans); color: var(--ink-soft); }

.fire-list {
  list-style: none; margin: 10px 0 0; padding: 6px 0;
  position: absolute; z-index: 5; min-width: 320px;
  background: rgba(20, 23, 26, 0.94);
  text-shadow: none;
}
.fire-list button {
  display: flex; justify-content: space-between; gap: 24px; width: 100%;
  background: none; border: 0; padding: 7px 14px; cursor: pointer; text-align: left;
  font: 400 19px/1.25 var(--serif); color: var(--ink-soft);
}
.fire-list button:hover, .fire-list button:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.fire-list button[aria-selected="true"] { color: var(--ink); }
.fire-list .when { font: 400 15px/1.6 var(--sans); color: var(--ink-faint); white-space: nowrap; }

.readout { left: 30px; bottom: 96px; }
.date {
  margin: 0; font: 400 64px/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}
.stat { margin: 10px 0 0; font: 500 18px/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.key { display: flex; gap: 16px; margin: 8px 0 0; font: 400 14px/1.3 var(--sans); color: var(--ink-soft); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.sw.amber { background: var(--amber); }
.sw.copper { background: var(--copper); }
.sw.ash { background: var(--ash); opacity: 0.8; }

.timeline {
  left: 22px; right: 30px; bottom: 30px;
  display: flex; align-items: center; gap: 12px;
}
.play {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(15, 18, 21, 0.9));
}
.play .icon-pause { display: none; }
.play.is-playing .icon-play { display: none; }
.play.is-playing .icon-pause { display: block; }
.play:hover { color: #fff; }

.track { position: relative; flex: 1; height: 44px; }
#bars { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Native range on top of the bar chart: drag, keyboard and screen readers. */
#slider {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
#slider::-webkit-slider-runnable-track { height: 100%; background: transparent; }
#slider::-moz-range-track { height: 100%; background: transparent; }
#slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 44px; background: transparent; border: 0; }
#slider::-moz-range-thumb { width: 14px; height: 44px; background: transparent; border: 0; }
#slider:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

/* Scale bar sits above the timeline at the right; attribution is one quiet
   line under it, so neither overlaps the bars. */
.maplibregl-ctrl-bottom-right { right: 30px; bottom: 84px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { display: none; }
.attribution {
  position: absolute; left: 76px; right: 30px; bottom: 8px; margin: 0;
  font: 400 11px/1.3 var(--sans); color: var(--ink-faint); text-shadow: var(--halo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attribution a { color: inherit; text-decoration: none; }
.attribution a:hover { color: var(--ink-soft); text-decoration: underline; }
.maplibregl-ctrl-scale {
  background: transparent; color: var(--ink-soft); border-color: var(--ink-soft);
  font: 400 12px var(--sans); text-shadow: var(--halo);
}
.maplibregl-ctrl-attrib { background: transparent !important; font: 400 11px var(--sans); }
.maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib-inner { color: var(--ink-faint) !important; text-shadow: var(--halo); }
.maplibregl-ctrl-attrib-button { filter: invert(0.75); }

@media (max-width: 760px) {
  .top { left: 18px; top: 18px; }
  .fire { margin-top: 22px; }
  .fire-name { font-size: 30px; }
  .readout { left: 18px; bottom: 86px; }
  .date { font-size: 42px; }
  .key { display: none; }
  .timeline { left: 10px; right: 10px; bottom: 34px; }
}