/* Hazard radar: flight paths converge on arrival airports, coloured by the
   same severity tiers as the route badges. Motion stops for reduced motion. */
.hz-section {
  --hz-ocean: #0e1316;
  --hz-extreme: #d03b3b;
  --hz-severe: #ec835a;
  --hz-moderate: #fab219;
  --hz-light: #0ca30c;
  margin: 0 0 1.25rem;
  scroll-margin-top: 70px;
}
.hz-section[hidden] { display: none; }
.hz-tier-extreme { --hz-c: var(--hz-extreme); --hz-core-ink: #fff; }
.hz-tier-severe { --hz-c: var(--hz-severe); --hz-core-ink: #0e1316; }
.hz-tier-moderate { --hz-c: var(--hz-moderate); --hz-core-ink: #0e1316; }
.hz-tier-light { --hz-c: var(--hz-light); --hz-core-ink: #0e1316; }

.hz-stage { position: relative; isolation: isolate; height: clamp(420px, 60vh, 580px); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--hz-ocean); }
.hz-map { position: absolute; inset: 0; z-index: 0; }
.hz-map.leaflet-container { background: var(--hz-ocean); font-family: var(--font-ui); }
.hz-map:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Edge vignette and a faint radar sweep, both above the map and below the HUD. */
.hz-overlay { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 95% at 50% 48%, transparent 58%, rgb(5 8 10 / .6) 100%); }
.hz-sweep { position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0deg, rgb(179 217 238 / 0) 4deg, rgb(179 217 238 / .045) 44deg, rgb(179 217 238 / .07) 48deg, transparent 52deg); mix-blend-mode: screen; animation: hz-sweep 10s linear infinite; }
@keyframes hz-sweep { to { rotate: 360deg; } }

/* HUD */
.hz-hud { position: absolute; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 1.05rem; pointer-events: none; }
.hz-hud-top { top: 0; align-items: flex-start; padding-bottom: 2.25rem; background: linear-gradient(to bottom, rgb(14 19 22 / .94), rgb(14 19 22 / 0)); }
.hz-hud-bottom { bottom: 0; align-items: flex-end; padding-top: 2.25rem; background: linear-gradient(to top, rgb(14 19 22 / .94), rgb(14 19 22 / 0)); }
.hz-hud button { pointer-events: auto; }
.hz-title-block { min-width: 0; }
.hz-eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--accent); font: 700 .7rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; }
.hz-eyebrow h3 { margin: 0; font: inherit; letter-spacing: inherit; }
.hz-live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hz-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: hz-live 2s ease-out infinite; }
@keyframes hz-live { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.hz-readout { min-height: 1.45em; max-width: 52ch; margin: .5rem 0 0; color: var(--muted); font: 500 .8rem/1.45 var(--font-ui); }
.has-active .hz-readout { color: var(--ink); }
.hz-stats { display: flex; gap: 1.4rem; margin: 0; }
.hz-stats > div { text-align: right; }
.hz-stats dt { color: var(--muted); font: 650 .6rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.hz-stats dd { margin: .35rem 0 0; color: var(--ink); font: 750 1.4rem/1 var(--font-ui); letter-spacing: -.02em; white-space: nowrap; }

.hz-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.hz-legend li { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font: 600 .72rem/1 var(--font-ui); }
.hz-legend-range { color: var(--muted); font-weight: 500; }
.hz-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--hz-c); box-shadow: 0 0 0 2px var(--hz-ocean), 0 0 9px var(--hz-c); }
.hz-credit { margin: .6rem 0 0; color: rgb(182 192 197 / .55); font: 500 .62rem/1.2 var(--font-ui); }

/* Airspace is quieter than even the lightest weather route. No animation or
   permanent labels; the weather selection further dims this background layer. */
.hz-atc-control { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .6rem; }
.hz-atc-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .3rem .6rem; border: 1px solid rgb(130 168 188 / .25); border-radius: 6px; background: rgb(14 19 22 / .85); color: #a8bac4; font: 550 .7rem/1.2 var(--font-ui); cursor: pointer; }
.hz-atc-toggle > span { width: 9px; height: 9px; border: 1px dashed #82a8bc; background: rgb(130 168 188 / .18); }
.hz-atc-toggle[aria-pressed="false"] { border-color: var(--line); color: var(--muted); }
.hz-atc-toggle[aria-pressed="false"] > span { background: none; opacity: .4; }
.hz-atc-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hz-atc-toggle:hover { border-color: #82a8bc; }
.hz-atc-status { color: #94a4ad; font: 500 .65rem/1.3 var(--font-ui); }
.has-active .hz-atc-pane { opacity: .4; }
.hz-atc-pane path:focus-visible { outline: none; stroke-opacity: .9; stroke-width: 2; }
.hz-atc-tooltip, .hz-atc-popup .leaflet-popup-content-wrapper, .hz-atc-popup .leaflet-popup-tip { border-color: #35454e; background: #151e24; color: #d5e0e6; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.hz-atc-tooltip { padding: .55rem .7rem; font: 500 .72rem/1.5 var(--font-ui); }
.hz-atc-tooltip::before { display: none; }
.hz-atc-tooltip span, .hz-atc-tooltip strong, .hz-atc-popup span, .hz-atc-popup strong, .hz-atc-popup small { display: block; }
.hz-atc-kind { color: #9aadb8; font-size: .65rem; margin-bottom: .25rem; }
.hz-atc-popup small { margin-top: .5rem; color: #9aadb8; line-height: 1.5; }
.hz-atc-credit { margin: .4rem .2rem 0; color: var(--muted); font: 400 .62rem/1.4 var(--font-ui); }
.hz-atc-credit[hidden] { display: none; }
.hz-atc-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.hz-controls { display: flex; align-items: center; gap: .55rem; }
.hz-pick { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .45rem .95rem .45rem .8rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .8rem/1 var(--font-ui); box-shadow: 0 8px 26px -10px rgb(179 217 238 / .8); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.hz-pick:hover { background: var(--accent-hover); transform: translateY(-1px); }
.hz-pick:focus-visible, .hz-zoom button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hz-pick iconify-icon { font-size: 1.15rem; }
.hz-pick.is-rolling iconify-icon { animation: hz-roll .55s cubic-bezier(.3, .7, .3, 1); }
@keyframes hz-roll { from { rotate: -220deg; scale: .6; } to { rotate: 0deg; scale: 1; } }
.hz-zoom { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgb(34 38 41 / .92); }
.hz-zoom button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); font: 500 1.1rem/1 var(--font-ui); cursor: pointer; }
.hz-zoom button + button { border-left: 1px solid var(--line); }
.hz-zoom button:hover { background: var(--control-hover); }

.hz-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; color: var(--muted); font: 500 .9rem/1.4 var(--font-ui); pointer-events: none; }
.hz-empty[hidden] { display: none; }

/* Arrival beacons */
.hz-beacon-icon { background: none; border: 0; transition: opacity .25s ease; }
.hz-beacon-icon:focus-visible { outline: none; }
.hz-beacon-icon:focus-visible .hz-core { outline: 2px solid var(--ink); outline-offset: 3px; }
.hz-beacon { position: relative; display: block; width: 100%; height: 100%; }
.hz-core { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: var(--hz-c); color: var(--hz-core-ink); font: 750 .72rem/1 var(--font-ui); box-shadow: 0 0 0 2px var(--hz-ocean), 0 0 18px 3px color-mix(in srgb, var(--hz-c) 45%, transparent); transition: transform .2s ease; }
.hz-tier-moderate .hz-core, .hz-tier-light .hz-core { box-shadow: 0 0 0 2px var(--hz-ocean), 0 0 10px 1px color-mix(in srgb, var(--hz-c) 30%, transparent); }
.hz-pulse { position: absolute; inset: 0; border: 1.5px solid var(--hz-c); border-radius: 50%; opacity: 0; animation: hz-pulse 2.6s cubic-bezier(.2, .6, .35, 1) infinite; }
.hz-pulse-2 { animation-delay: 1.3s; }
@keyframes hz-pulse { from { transform: scale(1); opacity: .75; } to { transform: scale(2.8); opacity: 0; } }
.hz-beacon-icon:hover .hz-core, .hz-beacon-icon.is-active .hz-core { transform: scale(1.14); }
.hz-tag { position: absolute; left: calc(100% + 7px); top: 50%; display: none; translate: 0 -50%; padding: .16rem .42rem; border-radius: 5px; background: rgb(14 19 22 / .88); color: var(--ink); font: 700 .66rem/1.3 var(--font-ui); letter-spacing: .06em; white-space: nowrap; pointer-events: none; }
.hz-beacon-icon.show-tag .hz-tag, .hz-beacon-icon:hover .hz-tag, .hz-beacon-icon.is-active .hz-tag, .hz-beacon-icon:focus-visible .hz-tag, .hz-departure .hz-tag { display: block; }
.has-active .hz-beacon-icon.show-tag:not(.is-active) .hz-tag { display: none; }
.hz-departure-icon { background: none; border: 0; pointer-events: none; }
.hz-departure { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--hz-ocean); box-shadow: 0 0 0 2px var(--hz-ocean); }
.hz-departure .hz-tag { left: calc(100% + 5px); color: var(--muted); }
.has-active .hz-beacon-icon:not(.is-active) { opacity: .3; }

/* Flight paths: a quiet line with a tracer flowing towards the arrival. */
.hz-arc, .hz-tracer { transition: stroke-opacity .25s ease, stroke-width .25s ease; }
.hz-tracer { stroke-dasharray: 6 94; animation: hz-flow var(--hz-dur, 3.6s) linear infinite; animation-delay: var(--hz-delay, 0s); }
@keyframes hz-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.has-active .hz-arc:not(.is-active) { stroke-opacity: .07; }
.has-active .hz-tracer:not(.is-active) { stroke-opacity: 0; }
.hz-arc.is-active { stroke-opacity: .95; stroke-width: 2.4px; }
.hz-tracer.is-active { stroke-width: 3.4px; stroke-dasharray: 16 84; animation-duration: 1.5s; }
.hz-origin { transition: opacity .25s ease; }
.has-active .hz-origin { opacity: .25; }

/* Lock-on reticle around the selected arrival */
.hz-reticle-icon { background: none; border: 0; pointer-events: none; }
.hz-reticle { position: absolute; inset: 0; animation: hz-lock .6s cubic-bezier(.2, .9, .25, 1) both, hz-breathe 2.4s ease-in-out .6s infinite; }
.hz-reticle span { position: absolute; width: 9px; height: 9px; border: 0 solid var(--ink); }
.hz-reticle span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hz-reticle span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hz-reticle span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hz-reticle span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
@keyframes hz-lock { from { transform: scale(2.4) rotate(45deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hz-breathe { 50% { transform: scale(1.12); } }

/* Briefing card */
.hz-briefing { position: absolute; z-index: 3; top: 5.4rem; right: 1rem; width: min(312px, calc(100% - 2rem)); max-height: calc(100% - 10.75rem); overflow: auto; padding: 1rem 1.05rem 1.05rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 14px; background: rgb(24 29 32 / .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .85); animation: hz-slide .3s cubic-bezier(.2, .8, .2, 1); }
.hz-briefing[hidden] { display: none; }
.hz-briefing:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes hz-slide { from { transform: translateX(14px); opacity: 0; } }
.hz-briefing-close { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.hz-briefing-close:hover { background: var(--control); color: var(--ink); }
.hz-card-eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--muted); font: 700 .62rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.hz-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem .2rem .2rem; border-radius: 999px; background: color-mix(in srgb, var(--hz-c) 18%, transparent); color: var(--ink); letter-spacing: .1em; }
.hz-chip-score { display: grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--hz-c); color: var(--hz-core-ink); font-size: .72rem; letter-spacing: 0; }
.hz-card-route { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; color: var(--ink); font: 750 1.6rem/1.1 var(--font-ui); letter-spacing: .01em; }
.hz-card-route span { color: var(--muted); font-weight: 400; }
.hz-card-names { margin: .3rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.hz-card-hazards { margin: .75rem 0 0; color: var(--ink); font: 600 .84rem/1.4 var(--font-ui); }
.hz-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); }
.hz-card-stats dt { color: var(--muted); font: 650 .58rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.hz-card-stats dd { margin: .38rem 0 0; color: var(--ink); font: 650 .92rem/1.2 var(--font-ui); }
.hz-card-atc { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; color: var(--ink); font-size: .76rem; }
.hz-card-atc iconify-icon { color: var(--accent); }
.hz-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.hz-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--control); color: var(--ink); font: 650 .8rem/1 var(--font-ui); text-decoration: none; cursor: pointer; }
.hz-btn:hover { background: var(--control-hover); }
.hz-btn-primary { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.hz-btn-primary:hover { background: var(--accent-hover); }
.hz-card-subhead { margin: .95rem 0 .45rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--muted); font: 650 .6rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.hz-inbound-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hz-inbound { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; width: 100%; min-height: 40px; padding: .35rem .55rem .35rem .4rem; border: 1px solid transparent; border-radius: 9px; background: var(--surface-raised); color: var(--ink); font: 650 .82rem/1 var(--font-ui); text-align: left; cursor: pointer; }
.hz-inbound:hover { border-color: var(--selected-line); background: var(--selected); }
.hz-inbound-sev { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--hz-c); color: var(--hz-core-ink); font-size: .72rem; font-weight: 750; }
.hz-inbound-time { color: var(--muted); font-size: .75rem; font-weight: 500; }
.hz-card-more { margin: .55rem 0 0; color: var(--muted); font-size: .72rem; }

/* Map toggle in the results toolbar */
.results-toolbar-actions { display: flex; align-items: center; gap: .25rem; }
#toggle-hazard-map[hidden] { display: none; }
#toggle-hazard-map { min-height: 36px; background: transparent; border-color: transparent; font-size: .75rem; }
#toggle-hazard-map:hover { background: var(--surface); }
.map-picked-route { animation: map-picked 2.4s ease-out; }
@keyframes map-picked { from { background: rgb(179 217 238 / .22); } to { background: transparent; } }

@media (max-width: 640px) {
  .hz-stage { height: 460px; border-radius: 12px; }
  .hz-hud { padding: .75rem .8rem; }
  .hz-hud-top { padding-bottom: 1.75rem; }
  .hz-readout { max-width: 26ch; font-size: .72rem; }
  .hz-stats { gap: .9rem; }
  .hz-stats > div:last-child { display: none; }
  .hz-stats dd { font-size: 1.1rem; }
  .hz-atc-toggle { min-height: 44px; }
  .hz-atc-control { gap: .25rem; margin-top: .35rem; }
  .hz-atc-status { flex-basis: 100%; }
  .hz-hud-bottom { flex-direction: column; align-items: stretch; gap: .65rem; }
  .hz-legend { gap: .35rem .75rem; }
  .hz-legend li { font-size: .68rem; }
  .hz-legend-range, .hz-credit { display: none; }
  .hz-controls { justify-content: space-between; }
  .hz-zoom button { width: 44px; height: 44px; }
  .hz-pick { min-height: 44px; }
  .hz-briefing { top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-height: 62%; padding: .8rem .85rem .85rem; border-radius: 12px; }
  .hz-card-route { margin-top: .55rem; font-size: 1.3rem; }
  .hz-card-hazards { margin-top: .5rem; }
  .hz-card-stats { margin-top: .6rem; padding-top: .6rem; }
  .hz-card-atc { margin-top: .55rem; }
  .hz-card-actions { margin-top: .7rem; }
  .hz-btn { min-height: 44px; }
  .has-briefing .hz-hud-bottom { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-sweep { display: none; }
  .hz-pulse, .hz-live-dot::after { display: none; }
  .hz-tracer { animation: none; stroke-dasharray: none; stroke-opacity: 0; }
  .hz-reticle, .hz-briefing, .hz-pick.is-rolling iconify-icon, .map-picked-route { animation: none; }
  .hz-pick, .hz-core, .hz-arc, .hz-beacon-icon, .hz-origin { transition: none; }
}