/* FLY-LAX.COM · flying times: the hour map, city chips and hover card. Shared by flying_times.html and the homepage section. */
/* Hour map: polar plot, LAX at the centre */
#hourMap{display:block;width:100%;height:auto}
#hourMap .land path{fill:rgba(148,163,184,.10);stroke:rgba(148,163,184,.45);stroke-width:1;stroke-linejoin:round}
#hourMap .ring{fill:none;stroke:rgba(56,189,248,.18);stroke-width:1}
#hourMap .ringLabel{fill:#94a3b8;font-size:15px;font-weight:700}
#hourMap .compass{fill:#64748b;font-size:16px;font-weight:700}
#hourMap .dot{r:var(--dot-r,6px);stroke:#020617;stroke-width:var(--dot-stroke,1.5px);pointer-events:none;transition:r .15s}
/* The hit circle in front of each dot is the thing you hover or tap: 16 px on screen whatever the zoom */
#hourMap .hit{r:var(--hit-r,14px);fill:transparent;stroke:none;cursor:pointer;outline:none}
#hourMap .hit:hover + .dot,#hourMap .hit[aria-expanded="true"] + .dot,#hourMap .hit:focus-visible + .dot{r:var(--dot-hover,9px)}
#hourMap .mapLabel{fill:#e2e8f0;font-size:14px;pointer-events:none}
#hourMap .mapLabel.capital{font-weight:700}
#hourMap .mapLabel.nolabel{display:none}
/* Zoom buttons, top-right of the map */
.mapZoom{position:absolute;top:.75rem;right:.75rem;z-index:2;display:flex;flex-direction:column;gap:.25rem}
.mapZoom button{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:.5rem;background:#0f172a;color:#7dd3fc;border:1px solid rgba(56,189,248,.4);font-size:14px;transition:background .15s,border-color .15s}
.mapZoom button:hover{background:rgba(14,165,233,.2);border-color:#38bdf8}
.mapZoom button:disabled{opacity:.35;cursor:not-allowed}
.mapZoom button:focus-visible{outline:2px solid #38bdf8;outline-offset:1px}
/* "Zoom to" region selector, top-left of the map */
.mapRegion{position:absolute;top:.75rem;left:.75rem;z-index:2;display:flex;align-items:center;gap:.5rem;font-size:14px;color:#94a3b8}
.mapRegion select{background:#0f172a;color:#7dd3fc;border:1px solid rgba(56,189,248,.4);border-radius:.5rem;padding:.45rem .6rem;font-size:14px;font-weight:600;color-scheme:dark}
.mapRegion select:focus-visible{outline:2px solid #38bdf8;outline-offset:1px}
@media (max-width:639px){.mapRegion span{display:none}}
#hourMap .lax{font-size:22px;font-weight:900;fill:#38bdf8}
/* Phones: the polar map is unreadable at that width, so only its heading stays and the list below does the work */
@media (max-width:639px){#map > p,#map > div{display:none}#hourMap:not(.zoomed) .mapLabel{display:none}#hourMap .ringLabel,#hourMap .compass{font-size:22px}}
@media print{#hourMap .mapLabel{fill:#000}#hourMap .dot{stroke:#fff}#hourMap .land path{fill:#eee;stroke:#888}.mapZoom,.mapRegion{display:none}}
/* City chip: name on the left, flying time on the right, one line. */
.city{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;
      padding:.5rem .75rem;border-radius:.5rem;border:1px solid rgba(56,189,248,.18);
      background:rgba(12,74,110,.28);text-align:left;transition:border-color .15s,background .15s}
.city:hover,.city:focus-visible,.city[aria-expanded="true"]{border-color:rgba(56,189,248,.6);background:rgba(14,165,233,.14);outline:none}
.city .t{font-variant-numeric:tabular-nums;white-space:nowrap;color:#7dd3fc;font-weight:700}
.city.capital .n::before{content:"\2605";color:#fbbf24;margin-right:.4rem;font-size:.8em}
.hidden-by-filter{display:none}
/* Hover card */
#card{position:fixed;z-index:60;width:min(22rem,calc(100vw - 2rem));pointer-events:none}
@media (hover:none){#card{pointer-events:auto}}
@media print{
    body{background:#fff;color:#000}
    header,#filterRow,#card,.no-print{display:none !important}
    .city{border-color:#999;background:none;color:#000;break-inside:avoid}
    .city .t{color:#000}
    .cityBlurb{display:block !important;color:#333;font-size:12px;margin:0 0 .25rem .75rem}
    main{max-width:none}
}