/* Facility map page — the chart itself renders on a white ground like a real map */

.map-main {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2rem;
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.map-toolbar h2 { margin: 0; font-size: 1.3rem; }
.map-toolbar .hint { color: var(--text-dim); font-size: 0.85rem; }

.map-controls {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.map-toggle-actions { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.map-toggle-actions .btn { padding: 0.3rem 0.8rem; font-size: 0.78rem; }
.map-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.35rem 1rem;
}
.map-toggles .toggle {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.map-toggles .toggle input { accent-color: var(--green); }

.map-frame {
  background: #ffffff;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  padding: 8px;
  overflow-x: auto;
}
.zae-map { width: 100%; height: auto; display: block; min-width: 900px; }

/* airways */
.vic { fill: none; stroke: #1247d6; stroke-width: 1.6; }
.jet { fill: none; stroke: #b8b8b8; stroke-width: 6; stroke-linecap: round; }

/* NAVAID symbols */
.vor { fill: #fff; stroke: #000; stroke-width: 1.3; }
.vor-tab { fill: #000; stroke: none; }
.vor-in { fill: #000; stroke: none; }
.vordme { fill: #fff; stroke: #000; stroke-width: 1.3; }
.ndb { fill: none; stroke: #2b7a2b; stroke-width: 1; }
.ndb-dot { fill: #2b7a2b; }

/* MRA flag */
.flagpole { stroke: #000; stroke-width: 1.2; }
.flag { fill: #000; stroke: none; }

/* HEZ radial line to VKS */
.thinline { stroke: #1247d6; stroke-width: 0.9; }

/* holding patterns / shaded areas */
.hold { fill: #d9d9d9; stroke: #bdbdbd; stroke-width: 0.6; opacity: 0.9; }

/* fixes: compulsory = filled, non-compulsory = open triangle */
.fix-c { fill: #000; stroke: #000; }
.fix-nc { fill: #fff; stroke: #000; stroke-width: 1.4; }

/* airports */
.apt { fill: none; stroke: #2b7a2b; stroke-width: 1.3; }
.apt-t { stroke: #2b7a2b; stroke-width: 1.3; }

/* mileage boxes (route mileages) */
.milebox { fill: #fff; stroke: #000; stroke-width: 1; }
.milebox-t { font: 700 11px "Consolas", monospace; text-anchor: middle; fill: #000; }

/* boundary diamonds */
.diamond { fill: #fff; stroke: #000; stroke-width: 1.2; }
.diamond-t { font: 700 11px "Consolas", monospace; text-anchor: middle; fill: #000; }

/* radial ticks */
.radial { font: 8px "Consolas", monospace; text-anchor: middle; fill: #333; }

/* airway + MEA labels */
.awy { font: italic 700 12px "Segoe UI", sans-serif; text-anchor: middle; fill: #1247d6; }
.mea { font: 11px "Consolas", monospace; text-anchor: middle; fill: #1247d6; }

/* node names */
.nname { font: 700 13px "Segoe UI", sans-serif; fill: #000; }
.nname-sm { font: 600 10px "Segoe UI", sans-serif; fill: #000; }

/* jet route labels */
.jetlbl { font: italic 700 12px "Segoe UI", sans-serif; text-anchor: middle; fill: #6b6b6b; }

/* exits */
.exit-lbl { font: italic 700 12px "Segoe UI", sans-serif; text-anchor: middle; fill: #555; }

/* notes */
.note-sm { font: 9px "Consolas", monospace; fill: #a00; }

/* MOAs */
.moa { fill: none; stroke: #d40000; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.moa-lbl { font: 700 10px "Segoe UI", sans-serif; text-anchor: middle; fill: #a00; }
.moa-sub { font: 8px "Segoe UI", sans-serif; text-anchor: middle; fill: #a00; }

/* boundaries */
.bnd-apch { fill: none; stroke: #2b7a2b; stroke-width: 1.4; stroke-dasharray: 10 4 2 4; }
.bnd-artcc { fill: none; stroke: #000; stroke-width: 2; }
.bnd-sector { fill: none; stroke: #000; stroke-width: 1; stroke-dasharray: 7 5; }

/* sector legend */
.sec-num { font: 800 17px "Segoe UI", sans-serif; fill: #000; }
.sec-name { font: 600 14px "Segoe UI", sans-serif; fill: #000; }
.sec-freq { font: 13px "Consolas", monospace; fill: #000; }
.sec-name-sm { font: 700 11px "Segoe UI", sans-serif; fill: #000; }
.sec-freq-sm { font: 10px "Consolas", monospace; fill: #000; }

/* MIA chart */
.mia-box { fill: #fff; stroke: #000; stroke-width: 1.4; }
.mia-title { font: 800 18px "Segoe UI", sans-serif; fill: #000; }
.mia-val { font: 800 16px "Segoe UI", sans-serif; text-anchor: middle; fill: #1a1acc; }
.mia-line { stroke: #000; stroke-width: 1; }
.mia-nn { font: 600 12px "Segoe UI", sans-serif; fill: #000; }
.mia-awy { font: 10px "Segoe UI", sans-serif; text-anchor: middle; fill: #000; }

/* legend */
.map-legend {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.8rem; color: var(--text-dim);
}
.map-legend .li { display: flex; align-items: center; gap: 0.45rem; }
.map-legend svg { flex: none; }
.map-legend b { color: var(--text); font-weight: 600; }