/* ===========================================================
     WORLD MAP STYLES
  =========================================================== */
  .wm-root {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; background: #c0c0c0;
    font-family: Verdana, sans-serif; font-size: 11px;
  }
  .wm-toolbar {
    background: #c0c0c0; border-bottom: 2px groove #ffffff;
    padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center; flex-shrink: 0;
  }
  .wm-toolbar .group {
    display: flex; gap: 2px; padding: 0 4px; align-items: center;
    border-left: 1px solid #808080; border-right: 1px solid #ffffff;
  }
  .wm-toolbar .group:first-child { border-left: none; }
  .wm-toolbar .group:last-child { border-right: none; }
  .wm-btn {
    background: #c0c0c0; border: 2px outset #ffffff;
    padding: 2px 8px; font-family: Verdana, sans-serif;
    font-size: 11px; cursor: pointer; color: #000; white-space: nowrap;
  }
  .wm-btn:active, .wm-btn.pressed { border: 2px inset #ffffff; padding: 3px 7px 1px 9px; }
  .wm-toolbar input[type=text] {
    font-family: Verdana, sans-serif; font-size: 11px;
    border: 2px inset #ffffff; background: #ffffff; padding: 1px 4px;
  }
  .wm-toolbar label { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }

  .wm-body {
    flex: 1; display: flex; overflow: hidden; gap: 4px; padding: 4px; min-height: 0;
  }
  .wm-map-pane {
    flex: 1; display: flex; flex-direction: column;
    background: #c0c0c0; border: 2px inset #ffffff; min-width: 0;
  }
  .wm-side-pane {
    width: 280px; display: flex; flex-direction: column;
    background: #c0c0c0; border: 2px inset #ffffff;
  }
  .wm-pane-title {
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff; padding: 2px 6px; font-size: 11px; font-weight: bold;
    flex-shrink: 0;
  }
  .wm-pane-body { flex: 1; overflow: auto; background: #002040; min-height: 0; position: relative; }
  .wm-side-pane .wm-pane-body { background: #ffffff; padding: 6px; }

  .wm-svg { display: block; width: 100%; height: 100%; background: #001830; cursor: crosshair; }

  /* graticule lines */
  .wm-svg .grat { stroke: #003860; stroke-width: 0.3; fill: none; }
  /* continents */
  .wm-svg .land { fill: #2d5a3d; stroke: #4a7d5a; stroke-width: 0.5; }
  /* night overlay */
  .wm-svg .night { fill: #000820; fill-opacity: 0.5; }
  /* city dots */
  .wm-svg .city { fill: #ffcc00; stroke: #000; stroke-width: 0.3; cursor: pointer; }
  .wm-svg .city.tracked { fill: #ff4040; stroke: #ffffff; stroke-width: 0.6; }
  .wm-svg .city:hover { fill: #ffffff; }
  .wm-svg .city-label {
    fill: #ffffff; font-family: Verdana, sans-serif; font-size: 9px;
    pointer-events: none; text-shadow: 0 0 2px #000;
  }
  .wm-svg .city-label-bg {
    fill: rgba(0,0,0,0.6); pointer-events: none;
  }
  .wm-svg .equator { stroke: #608080; stroke-width: 0.4; stroke-dasharray: 2 1; }

  .wm-tooltip {
    position: absolute; pointer-events: none;
    background: #ffffe1; border: 1px solid #000;
    padding: 4px 8px; font-size: 11px;
    font-family: Verdana, sans-serif; color: #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    z-index: 100; display: none; white-space: nowrap;
  }
  .wm-tooltip.visible { display: block; }
  .wm-tooltip .t-city { font-weight: bold; }
  .wm-tooltip .t-time {
    font-family: "Courier New", monospace; color: #000080;
    font-size: 13px; font-weight: bold;
  }
  .wm-tooltip .t-meta { color: #404040; font-size: 10px; }

  .wm-legend {
    padding: 6px;
  }
  .wm-legend h3 {
    background: #000080; color: #fff; font-size: 11px;
    padding: 2px 6px; margin: 0 0 4px 0;
  }
  .wm-legend .lrow {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0; font-size: 11px;
  }
  .wm-legend .swatch {
    width: 14px; height: 14px; border: 1px solid #000;
    flex-shrink: 0;
  }
  .wm-legend p { font-size: 10px; color: #404040; margin: 4px 0; }

  /* timezone bands */
  .wm-svg .tzband { stroke: none; pointer-events: none; }
  .wm-svg .tzband.tz-0 { fill: rgba(120, 160, 200, 0.10); }
  .wm-svg .tzband.tz-1 { fill: rgba(120, 160, 200, 0.04); }
  .wm-svg .tz-meridian { stroke: rgba(180, 220, 255, 0.45); stroke-width: 0.5; stroke-dasharray: 1 2; }
  .wm-svg .tz-label {
    fill: rgba(220, 240, 255, 0.85); font-family: "Courier New", monospace;
    font-size: 9px; font-weight: bold; pointer-events: none;
    paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 2;
  }

  /* city picker */
  .wm-picker {
    display: flex !important; flex-direction: column;
    padding: 0 !important; min-height: 0; height: 100%;
  }
  .wm-picker-search {
    padding: 6px; border-bottom: 1px solid #808080;
    background: #c0c0c0; flex-shrink: 0;
  }
  .wm-picker-search input[type=text] {
    width: 100%; box-sizing: border-box;
    font-family: Verdana, sans-serif; font-size: 11px;
    padding: 3px 6px; border: 2px inset #ffffff; background: #ffffff;
    margin-bottom: 4px;
  }
  .wm-picker-actions { display: flex; gap: 4px; }
  .wm-picker-actions .wm-btn { flex: 1; padding: 2px 4px; font-size: 11px; }
  .wm-picker-list {
    flex: 1; overflow-y: auto; background: #ffffff;
    padding: 2px 0; min-height: 0;
  }
  .wm-picker-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 8px; cursor: pointer; font-size: 11px;
    border-bottom: 1px dotted #e8e8e8;
  }
  .wm-picker-row:hover { background: #ffffe1; }
  .wm-picker-row input[type=checkbox] { margin: 0; flex-shrink: 0; }
  .wm-picker-row .wm-pn { font-weight: bold; flex-shrink: 0; }
  .wm-picker-row .wm-pm { color: #808080; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-picker-info {
    padding: 4px 8px; border-top: 1px solid #808080;
    background: #c0c0c0; flex-shrink: 0;
  }

  /* airline routes + dots */
  .wm-svg .airline-route {
    fill: none; stroke-width: 0.6; stroke-opacity: 0.45;
    pointer-events: none;
  }
  .wm-svg .city.avelo { fill: #4488ff; stroke: #ffffff; stroke-width: 0.6; }
  .wm-svg .city.copa  { fill: #ff8844; stroke: #ffffff; stroke-width: 0.6; }
  .wm-svg .city.both-airlines { fill: #cc66cc; stroke: #ffffff; stroke-width: 0.6; }
  /* tracked overrides airline color, since the user explicitly cares about it */
  .wm-svg .city.tracked.avelo,
  .wm-svg .city.tracked.copa,
  .wm-svg .city.tracked.both-airlines { fill: #ff4040; }

  /* ISS overlay */
  .wm-svg .iss-marker {
    fill: #ffffff; stroke: #ff0040; stroke-width: 2;
    cursor: pointer;
  }
  .wm-svg .iss-marker:hover { fill: #ffff00; }
  .wm-svg .iss-track {
    fill: none; stroke: #ff4060; stroke-width: 0.8;
    stroke-dasharray: 2 2; stroke-opacity: 0.7;
    pointer-events: none;
  }
  .wm-svg .iss-label {
    fill: #ffffff; font-family: Verdana, sans-serif;
    font-size: 10px; font-weight: bold;
    paint-order: stroke; stroke: #800020; stroke-width: 2;
    pointer-events: none;
  }

  /* Side panel tabs */
  .wm-side-tabs {
    display: flex; background: #c0c0c0;
    border-bottom: 1px solid #808080; padding: 4px 4px 0;
    flex-shrink: 0;
  }
  .wm-side-tab {
    background: #c0c0c0; border: 2px outset #ffffff; border-bottom: none;
    padding: 3px 10px; margin-right: 2px;
    font-family: Verdana, sans-serif; font-size: 11px; cursor: pointer;
    color: #404040; position: relative; top: 1px;
  }
  .wm-side-tab.active {
    color: #000; font-weight: bold; top: 0;
    padding-bottom: 5px; z-index: 2;
  }
  .wm-side-tab:hover:not(.active) { background: #d4d0c8; color: #000; }

  .wm-airline-swatch {
    display: inline-block; width: 14px; height: 14px;
    border: 1px solid #000; flex-shrink: 0; margin-left: 4px;
  }