/* ==========================================================================
   Skylark — Ireland's sky, remembered

   Builds on /stats.css (direction B, DESIGN.md), which carries the tokens,
   the tiles, the bar lists and the chart marks. Only what this page adds is
   here, and every value comes from those tokens. Amber is arrivals and the
   low end of the altitude scale, green departures, red emergencies.
   ========================================================================== */

.pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  padding: 0 0 var(--sp-6);
}
.pick label { display: grid; gap: var(--sp-1); }
.pick select,
.local-actions button {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raise);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: var(--fs-sm) var(--font-mono);
}
.local-actions button { cursor: pointer; }
.local-actions button:hover, .local-actions button:focus-visible { border-color: var(--text-dim); }

.live .tile .num.is-alert { color: var(--alert); }
.live .tile .num.is-accent { color: var(--accent); }
.local-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-5); }
@media (min-width: 900px) { .local-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Event rows: what happened on the left, the numbers on the right. */
.events li { align-items: flex-start; }
.events .what { display: grid; gap: var(--sp-1); min-width: 0; }
.events .what strong { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.events .what .dim { color: var(--muted); font-size: var(--fs-xs); }
.events .facts { text-align: right; color: var(--text-dim); font-size: var(--fs-xs); display: grid; gap: var(--sp-1); justify-items: end; }
.events .facts a { color: var(--text-dim); }
.events .code { color: var(--alert); font-weight: 600; }
.events .rwy { color: var(--accent); font-weight: 600; }

.card .sub-head { margin: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.card .estimate {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--accent);
  font-family: var(--font-prose);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.local-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin: var(--sp-5) 0; }
.quiet-inline { font-size: var(--fs-sm); color: var(--muted); }

.map {
  height: 320px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-sunk);
}
@media (min-width: 900px) { .map { height: 420px; } }
.map .leaflet-container { background: var(--bg-sunk); }
.leaflet-control-attribution { font-size: var(--fs-micro); }

/* Altitude bands: one hue, stepped by opacity, lowest the strongest. */
.chart .band-0 { fill: var(--accent); }
.chart .band-1 { fill: var(--accent); fill-opacity: 0.7; }
.chart .band-2 { fill: var(--accent); fill-opacity: 0.45; }
.chart .band-3 { fill: var(--neutral); fill-opacity: 0.6; }
.chart .arr { fill: var(--accent); }
.chart .dep { fill: var(--live); }
.legend .sw--b0 { background: var(--accent); }
.legend .sw--b1 { background: var(--accent); opacity: 0.7; }
.legend .sw--b2 { background: var(--accent); opacity: 0.45; }
.legend .sw--b3 { background: var(--neutral); opacity: 0.6; }

details.method { margin-top: var(--sp-6); border-top: 1px solid var(--line); padding-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-dim); }
details.method summary { cursor: pointer; color: var(--text); min-height: 44px; display: flex; align-items: center; }
details.method p { font-family: var(--font-prose); max-width: 70ch; margin: var(--sp-3) 0 0; }
.card .summary + .summary { margin-top: var(--sp-3); }