* { margin: 0; padding: 0; box-sizing: border-box; }

/* Visually hidden but kept in the accessibility/render tree (crawlable). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #231F20;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #e8e8e8;
}

#map {
  position: absolute;
  inset: 0;
  background: #231F20;
}
#map.add { cursor: crosshair; }
/* Non-edit (select) mode reads as an arrow — markers are clickable, not a
   grab/pan hand. Crosshair in add/note mode; grabbing while actively panning. */
#map .leaflet-grab,
#map .leaflet-interactive { cursor: default; }
#map.add .leaflet-grab,
#map.add .leaflet-interactive { cursor: crosshair; }
#map.leaflet-dragging .leaflet-grab { cursor: grabbing; }
/* Flight-plan VOR Radial/DME columns collapse when no reference VOR is set. */
.flight-table.no-vor .fp-vor-col { display: none; }
.flight-table .fp-col-hidden { display: none !important; }
.fp-vor { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.fp-vor-freq { color: #9ad; font-size: 12px; }
.fp-leg-vor { font-size: 10px; max-width: 56px; margin-inline-end: 3px; vertical-align: middle;
  background: #2f2b2b; color: #e8e8e8; border: 1px solid #443f3f; border-radius: 3px; }
.fp-radial-val { white-space: nowrap; }

#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;          /* Leaflet handles pan/zoom underneath */
  z-index: 400;
}

.leaflet-container { background: #231F20; }

#toolbar {
  position: absolute;
  z-index: 1100;
  top: 12px;
  left: 12px;
  width: 240px;
  /* Double-clicking a label/section head used to select its text — useless and
     ugly. Inputs/textareas opt back in below. */
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);       /* dynamic viewport on iOS Safari */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;     /* momentum scroll on iOS */
  overscroll-behavior: contain;          /* don't chain scroll to the map */
  touch-action: pan-y;                   /* allow vertical swipe to scroll */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  background: rgba(20, 18, 18, 0.92);
  border: 1px solid #3a3636;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

#toolbar button {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#toolbar button:hover { background: #3c3737; }
#toolbar button.tool.active,
#toolbar button[aria-pressed="true"] {
  background: #1d6fe0;
  border-color: #1d6fe0;
  color: #fff;
}
#toolbar button.danger {
  color: #e88;
  border-color: #5a3a3a;
}
#toolbar button.danger:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
#toolbar .sep {
  width: auto;
  height: 1px;
  background: #443f3f;
  margin: 4px 2px;
}

/* IMS PWX wind/temp overlay: the chart's white background is made transparent
   in the data pipeline, so its dark footer text/strokes disappear against the
   dark map. A translucent white plate behind the image restores contrast.
   Off in light mode, where the light map already provides it. */
.leaflet-image-layer.ims-pwx-layer {
  background: var(--navaid-ims-pwx-backdrop, rgba(255, 255, 255, 0.5));
}
body.theme-light .leaflet-image-layer.ims-pwx-layer {
  background: transparent;
}

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px;
  margin: 2px 0;
  border: 1px solid #3a3636;
  border-radius: 5px;
  background: rgba(47, 43, 43, 0.72);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.map-legend.dragging { cursor: grabbing; }
.map-legend-title {
  color: #b9b3b3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.map-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  color: #e8e8e8;
  font-size: 12px;
}
/* App version under the legend — only on the desktop layout (mobile shows it
   in the toolbar via #app-version). */
.map-legend-version {
  display: none;
  margin-top: 1px;
  padding-top: 5px;
  border-top: 1px solid #3a3636;
  color: #8a8484;
  font-size: 11px;
  letter-spacing: 0.3px;
}
@media (min-width: 681px) {
  .map-legend-version { display: block; }
}
.legend-symbol {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.legend-airfield::before,
.legend-airfield::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}
.legend-airfield::before {
  top: 1px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 15px solid #0a1a2a;
}
.legend-airfield::after {
  top: 4px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #2f6fd0;
}
.legend-waypoint::before,
.legend-atc::before {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.legend-waypoint::before {
  left: 4px;
  top: 4px;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid #161412;
}
.legend-atc::before {
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid #e74c3c;
}

/* --- collapsible sections ------------------------------------------ */
.tb-section {
  border-top: 1px solid #3a3636;
  padding-top: 2px;
  margin-top: 2px;
}
.tb-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.tb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #8a8484;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}
.tb-section-head:hover { color: #e0d8d8; background: rgba(255,255,255,0.06); }
.tb-section-head::after {
  content: '▶';
  font-size: 8px;
  display: inline-block;
  transition: transform 0.15s ease;
  margin-inline-start: 6px;
}
.tb-section.open .tb-section-head::after { transform: rotate(90deg); }
.tb-section-body {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}
.tb-section.open .tb-section-body { display: flex; }
/* Sub-group label inside a section body (layout A): thin divider + caption. */
/* Grouping box for a toggle + its dependent controls (e.g. IMS PWX overlay). */
.tb-group-box {
  border: 1px solid #3a3636;
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 4px;
}
.tb-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #8a8484;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 5px 2px 0;
}
.tb-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #33302f;
}

#toolbar .drag-handle {
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  color: #8a8484;
  cursor: grab;
  padding: 0 6px 4px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#toolbar .drag-handle:hover { color: #e8e8e8; }
#toolbar.dragging { opacity: 0.92; }
#toolbar.dragging .drag-handle { cursor: grabbing; }

#toolbar-toggle {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 13px;
  cursor: pointer;
  padding: 4px 12px;
  box-sizing: content-box;
  color: #b9b3b3;
  user-select: none;
  -webkit-user-select: none;
}
#toolbar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
#toolbar-toggle:hover { color: #fff; }
/* Collapsed: keep the drag handle, the toggle, the language picker, and the footer links visible. */
#toolbar.collapsed > *:not(#toolbar-handle):not(#toolbar-toggle):not(#lang-toggle):not(#footer-links) {
  display: none;
}

/* Always-visible language picker — small separator from the sections below. */
#toolbar > #lang-toggle {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid #3a3636;
}

#toolbar .navtoggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #e8e8e8;
  padding: 0 6px;
  cursor: pointer;
  white-space: nowrap;
}
#toolbar .navtoggle input { cursor: pointer; margin: 0; }
#toolbar .navtoggle input[type="range"] { flex: 1; width: 0; min-width: 0; }
#toolbar #vor-ref-row {
  align-items: stretch;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#toolbar .slider-val { width: 3em; text-align: right; font-size: 11px; color: #ccc; flex-shrink: 0; }
#toolbar .slider-reset {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: #b9b3b3;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 1px 5px;
  cursor: pointer;
}
#toolbar .slider-reset:hover { color: #fff; }
#toolbar .navtoggle .hint { color: #8a8484; font-size: 12px; }
#toolbar .navtoggle input[type="number"] {
  width: 56px;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: text;
}
#toolbar #wpname-rot {
  font-size: 13px;
  line-height: 1;
  color: #b9b3b3;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
#toolbar #wpname-rot:hover { color: #fff; }

/* Desktop menu bar: the same toolbar sections become top-level dropdown
   menus. Phone/tablet-narrow viewports keep the floating column below. */
@media (min-width: 681px) {
  /* Map fills the whole viewport; the menu bar floats over it. */
  #map,
  #overlay {
    top: 0;
  }

  /* Floating menu bar: a rounded pill detached from the screen edges,
     hovering over the map (not a docked, full-width Windows-style bar). */
  #toolbar {
    position: fixed;
    /* Above the inspector (z 2320) so an open menu covers it, not vice-versa. */
    z-index: 2330;
    top: 12px;
    left: 12px;
    right: auto;
    width: auto;
    /* Never wider than the viewport: on narrow desktops the section heads would
       otherwise run off the right edge and disappear (overflow is visible for
       the dropdowns, so there's no scrollbar to reach them). Cap the width and
       let the bar wrap onto a second row instead of clipping. */
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: none;
    min-height: 34px;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 0 4px;
    border-width: 1px;
    border-radius: 9px;
    background: rgba(20, 18, 18, 0.92);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    touch-action: auto;
  }

  /* The floating menu bar sits in the top band (top 12px, ~36px tall). Shift
     the Zulu clock below it so the bar never covers it at narrow desktop widths
     or in RTL. transform (not margin) keeps the tunable clock margin intact. */
  .leaflet-control.zulu-clock {
    transform: translateY(46px);
  }

  #toolbar-toggle,
  #info,
  #app-version {
    display: none;
  }

  /* Hebrew (RTL): float the menu to the top-right, above the clock. */
  html[dir="rtl"] #toolbar {
    left: auto;
    right: 12px;
  }

  /* Hebrew (RTL): default the inspector to the LEFT (English keeps it on the
     right). Keeps it clear of the right-side menu bar + clock in RTL. Desktop
     only — on mobile the inspector is a full-width bottom sheet. */
  html[dir="rtl"] #inspector {
    right: auto;
    left: 12px;
  }

  /* Drag grip at the leading edge of the bar (left in LTR, right in RTL —
     flex row order flips with direction). Drag it to reposition the bar.
     Double-id selector to outrank `#toolbar .drag-handle` (the mobile ⋯
     styling) so font-size:0 hides the original glyph and only ⠿ shows. */
  #toolbar #toolbar-handle {
    display: flex;
    align-items: center;
    order: -1;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    font-size: 0;
    border-bottom: 0;
    border-inline-end: 1px solid #3a3636;
    cursor: grab;
  }
  #toolbar-handle::before {
    content: '⠿';
    font-size: 15px;
    line-height: 1;
    color: #8a8484;
  }
  #toolbar-handle:hover::before { color: #e8e8e8; }
  #toolbar.dragging #toolbar-handle { cursor: grabbing; }

  #toolbar > #lang-toggle {
    order: 30;
    align-self: stretch;
    margin: 0;
    margin-inline-start: auto;
    padding: 0 0 0 10px;
    border-bottom: 0;
    border-inline-start: 1px solid #3a3636;
  }

  #toolbar > #lang-toggle select {
    max-width: 96px;
  }

  .tb-section {
    position: relative;
    flex: 0 0 auto;
    border-top: 0;
    margin: 0;
    padding: 0;
  }

  .tb-section:first-of-type {
    margin-inline-start: 0;
  }

  .tb-section-head {
    height: 33px;
    padding: 0 12px;
    justify-content: center;
    border-radius: 0;
    color: #e8e8e8;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 33px;
    text-transform: none;
  }

  .tb-section-head::after {
    display: none;
  }

  .tb-section-head:hover,
  .tb-section.open .tb-section-head {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .tb-section-body {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2340;
    min-width: 238px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 42px);
    max-height: calc(100dvh - 42px);
    overflow-y: auto;
    gap: 2px;
    padding: 6px;
    border: 1px solid #3a3636;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: rgba(20, 18, 18, 0.98);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  }

  .tb-section[data-sec="export"] .tb-section-body,
  .tb-section[data-sec="sim"] .tb-section-body,
  .tb-section[data-sec="print"] .tb-section-body {
    right: 0;
    left: auto;
  }

  html[dir="rtl"] .tb-section-body {
    right: 0;
    left: auto;
  }

  html[dir="rtl"] .tb-section[data-sec="export"] .tb-section-body,
  html[dir="rtl"] .tb-section[data-sec="sim"] .tb-section-body,
  html[dir="rtl"] .tb-section[data-sec="print"] .tb-section-body {
    right: auto;
    left: 0;
  }

  .tb-section[data-sec="print"] .tb-section-body {
    min-width: 260px;
    gap: 6px;
  }

  .tb-print-submenu {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
  }

  .tb-section[data-sec="print"] .tb-print-label {
    display: block;
    color: #b9b3b3;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .tb-section[data-sec="print"] .tb-print-separator {
    display: block;
    height: 1px;
    margin: 1px 4px;
    background: #33302f;
  }

  .tb-section[data-sec="print"] #page-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    min-width: 0;
  }

  .tb-section[data-sec="print"] #page-orient {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-height: 30px;
    font-size: 15px;
  }

  .tb-section[data-sec="print"] .page-orient-label {
    display: inline;
  }

  html[dir="rtl"] .tb-section[data-sec="print"] #page-orient {
    justify-content: flex-start;
  }

  #toolbar.multi-open .tb-section-body {
    position: fixed;
    top: 34px;
    right: auto;
    left: auto;
    width: calc(14.285vw - 2px);
    min-width: 0;
    max-width: none;
    border-top: 1px solid #3a3636;
    border-radius: 0 0 6px 6px;
    pointer-events: none;
  }

  #toolbar.multi-open .tb-section-body > * {
    pointer-events: auto;
  }

  #toolbar.multi-open .tb-section[data-sec="build"] .tb-section-body { left: 8px; }
  #toolbar.multi-open .tb-section[data-sec="view"] .tb-section-body { left: calc(14.285vw + 6px); }
  #toolbar.multi-open .tb-section[data-sec="display"] .tb-section-body { left: calc(28.57vw + 4px); }
  #toolbar.multi-open .tb-section[data-sec="charts"] .tb-section-body { left: calc(42.855vw + 2px); }
  #toolbar.multi-open .tb-section[data-sec="export"] .tb-section-body { left: 57.14vw; }
  #toolbar.multi-open .tb-section[data-sec="sim"] .tb-section-body { left: calc(71.425vw - 2px); }
  #toolbar.multi-open .tb-section[data-sec="print"] .tb-section-body { left: calc(85.71vw - 4px); }

  #toolbar .tb-section-body button,
  #toolbar #export-select {
    width: 100%;
    min-height: 28px;
    padding: 5px 10px;
    border-color: transparent;
    border-radius: 3px;
    background: transparent;
    text-align: start;
  }

  #toolbar .tb-section-body button:hover,
  #toolbar #export-select:hover,
  #toolbar .tb-section-body .navtoggle:hover {
    background: rgba(255, 255, 255, 0.10);
  }

  #toolbar button.tool.active,
  #toolbar button[aria-pressed="true"] {
    background: #1d6fe0;
    border-color: #1d6fe0;
  }

  #toolbar .tb-section-body .navtoggle {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 3px;
  }

  #toolbar .tb-section-body .navtoggle select,
  #toolbar .tb-section-body .navtoggle input[type="number"],
  #toolbar .tb-section-body .navtoggle input[type="text"] {
    min-height: 24px;
  }

  #toolbar .tb-section-body input[type="range"] {
    min-width: 96px;
  }

  .tb-group {
    margin-top: 7px;
  }

}

/* rotate dial — Google-Maps-style compass needle by the zoom buttons */
.rotate-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.coord-readout, .zoom-readout {
  font: bold 11px/1 monospace;
  color: #231F20;
  background: rgba(255,255,255,0.9);
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
.leaflet-control.zulu-clock {
  display: block;
  min-width: var(--navaid-zulu-clock-min-width, 82px);
  padding: var(--navaid-zulu-clock-pad-y, 5px) var(--navaid-zulu-clock-pad-x, 8px);
  margin: var(--navaid-zulu-clock-margin-top, 12px) var(--navaid-zulu-clock-margin-right, 12px) 0 0;
  color: var(--navaid-zulu-clock-text-color, #fff);
  background: var(--navaid-zulu-clock-bg, rgba(20, 18, 18, 0.88));
  border: var(--navaid-zulu-clock-border, 1px solid #3a3636);
  border-radius: var(--navaid-zulu-clock-border-radius, 5px);
  box-shadow: var(--navaid-zulu-clock-shadow, 0 2px 8px rgba(0, 0, 0, 0.45));
  font-family: monospace;
  font-size: var(--navaid-zulu-clock-font-size, 13px);
  font-weight: var(--navaid-zulu-clock-font-weight, 800);
  line-height: var(--navaid-zulu-clock-line-height, 1);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  /* Draggable: must receive pointer events (was none). */
  pointer-events: auto;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  direction: ltr;
  unicode-bidi: isolate;
}
.leaflet-control.zulu-clock.dragging { cursor: grabbing; }

/* Hebrew (RTL): the floating menu bar lives top-right on desktop, so default
   the Zulu clock to the top-LEFT corner instead of stacking beneath the bar.
   (English keeps it in the Leaflet top-right control flow.) A saved drag
   position or an active drag still overrides this via inline styles. */
html[dir="rtl"] .leaflet-control.zulu-clock {
  position: fixed;
  top: var(--navaid-zulu-clock-margin-top, 12px);
  left: 12px;
  right: auto;
  margin: 0;
  /* Same vertical drop English uses (below the top band) so it clears the menu
     bar and matches the English placement. */
  transform: translateY(46px);
}
.coord-readout.show { display: block; }
.zoom-readout {
  display: block;
  padding: 2px 4px;
  margin-bottom: 2px;
  text-align: center;
  min-width: 34px;
  /* Always LTR so the `z… · …×` readout reads the same in Hebrew as in
     English (otherwise RTL reorders the × / middle dot). Matches
     .satellite-zoom-readout. */
  direction: ltr;
  unicode-bidi: isolate;
}
.coord-readout.interactive { pointer-events: auto; cursor: pointer; }
/* Satellite-modal zoom readout — same chip as the main map's .zoom-readout,
   sat as a bottom-left Leaflet control. */
.satellite-zoom-readout {
  font: bold 11px/1 monospace;
  color: #231F20;
  background: rgba(255,255,255,0.9);
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  padding: 3px 6px;
  margin: 0 0 10px 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
  direction: ltr;
}
/* Float the readout to the LEFT of the bottom-right zoom +/- + rotate-dial
   column (~44px wide) instead of stacking under it (#526). The leaflet
   corner div is the positioning context. */
.leaflet-bottom.leaflet-right .coord-readout {
  position: absolute;
  right: 52px;
  bottom: 26px;            /* clears the Leaflet attribution row */
  margin: 0;
}
.leaflet-bottom.leaflet-right .vor-readout {
  bottom: 46px;
}
.leaflet-bottom.leaflet-right .wind-readout {
  bottom: 66px;
}
.wind-readout {
  color: #fff;
  background: rgba(11, 94, 215, 0.92);   /* matches the per-leg wind arrow */
  border-color: #0b5ed7;
}
.leaflet-bottom.leaflet-right .sigmet-readout { bottom: 86px; }
.sigmet-readout {
  color: #fff;
  background: rgba(200, 30, 30, 0.92);
  border-color: #a11;
  cursor: help;
  pointer-events: auto;
  max-width: 220px;
  white-space: normal;
  direction: ltr;          /* SIGMET text is always left-to-right */
  text-align: left;
}
.sigmet-readout.sigmet-none {
  background: rgba(70, 70, 70, 0.9);
  border-color: #777;
  cursor: default;
}
/* The count badge ("⚠ n SIGMET") stays LTR (rule above). But the "no SIGMET in
   effect" message is a full sentence — in Hebrew the forced direction:ltr made
   it read backwards. Flip just that message to RTL on Hebrew pages (the literal
   "SIGMET" token stays LTR via bidi). CSS direction overrides the dir attribute,
   so this must be done here, not only in JS. */
html[dir="rtl"] .sigmet-readout.sigmet-none {
  direction: rtl;
  text-align: right;
}
.coord-readout.editing { cursor: text; }
.coord-readout.error { border-color: #c0392b; background: rgba(231, 76, 60, 0.12); }
.coord-readout.editing .goto-num {
  font: inherit;
  color: inherit;
  border: none;
  border-bottom: 1px solid currentColor;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: center;
  -moz-appearance: textfield;
}
.coord-readout.editing .goto-sep {
  opacity: 0.7;
  padding: 0 1px;
  -webkit-user-select: none;
  user-select: none;
}
#rotate-hdg {
  font: bold 11px/1 monospace;
  color: #231F20;
  background: rgba(255,255,255,0.9);
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  padding: 2px 3px;
  width: 38px;
  text-align: center;
  -moz-appearance: textfield;
}
#rotate-hdg::-webkit-inner-spin-button,
#rotate-hdg::-webkit-outer-spin-button { -webkit-appearance: none; }
#rotate-dial {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid #9a9a9a;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: none;
}
#rotate-dial.dragging { cursor: grabbing; }
#rotate-needle {
  position: absolute;
  inset: 0;
  transform: rotate(0deg);
}
#rotate-needle::before {            /* red north triangle */
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid #c0392b;
}
#rotate-needle::after {             /* grey south triangle */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #9a9a9a;
}

/* Satellite-modal rotation dial — same look as the main map's dial. */
.satellite-rotate-dial {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid #9a9a9a;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: none;
}
.satellite-rotate-dial.dragging { cursor: grabbing; }
.satellite-rotate-needle {
  position: absolute;
  inset: 0;
  transform: rotate(0deg);
}
.satellite-rotate-needle::before {   /* red north triangle */
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid #c0392b;
}
.satellite-rotate-needle::after {    /* grey south triangle */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #9a9a9a;
}

/* nav-waypoint search */
.navsearch { position: relative; padding: 0 6px; }
#wp-search {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 5px 8px;
}
#wp-search-results {
  position: absolute;
  left: 6px;
  right: 6px;
  z-index: 1200;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: #2a2626;
  border: 1px solid #3a3636;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
#wp-search-results.hidden { display: none; }
.search-hint {
  display: block;
  margin: 4px 6px 0;
  font-size: 11px;
  line-height: 1.3;
  color: #9a9a9a;
}
.wp-search-item {
  padding: 6px 10px;
  font-size: 13px;
  color: #e8e8e8;
  cursor: pointer;
  white-space: nowrap;
}
.wp-search-item:hover,
.wp-search-item.active { background: #1d6fe0; color: #fff; }
#toolbar .navtoggle select {
  font: inherit;
  font-size: 11px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #3a3636;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
}
#toolbar #export-select {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-align-last: center;
}
#toolbar #vor-ref-row select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
#aircraft-custom {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 0 0 0 8px;
  align-items: center;
}
#aircraft-custom label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
#aircraft-custom span {
  white-space: nowrap;
}
#aircraft-custom input {
  font: inherit;
  font-size: 11px;
  width: 64px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #3a3636;
  border-radius: 4px;
  padding: 2px 4px;
  text-align: center;
}
/* Light theme — the #id selector above outranks the .fp-aircraft input
 * light rule, so the GPH / Taxi inputs need their own light override. */
body.theme-light #aircraft-custom input {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}

#inspector {
  position: absolute;
  /* Below the desktop menu bar + its dropdowns (z 2330/2340): an open menu
     should cover the inspector, not sit behind it. */
  z-index: 2320;
  top: var(--navaid-inspector-default-top, 96px);
  right: 12px;
  width: 280px;
  background: rgba(20, 18, 18, 0.95);
  border: 1px solid #3a3636;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Cap to the viewport so a tall inspector (big airports with many charts)
     scrolls instead of overflowing off-screen. */
  max-height: calc(100dvh - var(--navaid-inspector-max-height-offset, 96px));
}
/* The header stays put; only the body scrolls. */
#insp-body { overflow-y: auto; }
#inspector.hidden { display: none; }

#insp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 12px;
  background: #2f2b2b;
  border-bottom: 1px solid #3a3636;
  cursor: move;
}
#insp-title {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #e8e8e8;
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  unicode-bidi: plaintext;
}
#insp-title::placeholder { color: #8a8484; }
#insp-title:read-only { cursor: move; }
#insp-title.editable {
  background: #241f1f;
  border: 1px solid #5a5353;
  border-radius: 5px;
  padding: 4px 7px;
  cursor: text;
}
#insp-title.editable:hover,
#insp-title.editable:focus {
  color: #fff;
  border-color: #7a706f;
  background: #2b2626;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#insp-close {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  color: #b9b3b3;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#insp-close:hover { background: #443f3f; color: #fff; }

#insp-body { padding: 10px 12px; }

#magnifier-settings {
  position: absolute;
  z-index: 1100;
  bottom: 12px;
  right: 12px;
  width: 200px;
  background: rgba(20, 18, 18, 0.95);
  border: 1px solid #3a3636;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#magnifier-settings.hidden { display: none; }
#mag-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 12px;
  background: #2f2b2b;
  border-bottom: 1px solid #3a3636;
}
#mag-settings-title {
  font-weight: 600;
  font-size: 13px;
  color: #e8e8e8;
}
#mag-settings-close {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  color: #b9b3b3;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#mag-settings-close:hover { background: #443f3f; color: #fff; }
#mag-settings-body { padding: 10px 12px; }
#mag-settings-body .navtoggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #e8e8e8;
  margin-bottom: 6px;
  white-space: nowrap;
}
#mag-settings-body .navtoggle:last-child { margin-bottom: 0; }
#mag-settings-body .navtoggle input[type="range"] { flex: 1; width: 0; min-width: 0; }
#mag-settings-body .slider-val { width: 3em; text-align: right; font-size: 11px; color: #ccc; flex-shrink: 0; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.row:last-child { margin-bottom: 0; }
.row label { color: #b9b3b3; }
/* Wind-effect readout (#722): label on its own line, value on a single
   non-wrapping line below it (HDG/GS/WCA/time stay together). */
.row.wind-fx-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.row.wind-fx-row .val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.row input[type="number"],
.row input[type="text"],
.row select {
  width: 110px;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 4px 6px;
}
.row select { cursor: pointer; }
.vor-radial-row {
  justify-content: flex-start;
  gap: 10px;
}
.vor-radial-row label {
  flex: 0 0 auto;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.vor-radial-controls {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 6px;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
}
.vor-radial-row select {
  width: 58px;
}
.row .val.vor-radial-val {
  min-width: 92px;
  direction: ltr;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
/* Re-enable selection inside actual text fields (the toolbar disables it). */
#toolbar input, #toolbar textarea,
.row input, .row textarea {
  -webkit-user-select: text;
  user-select: text;
}
/* Resettable fields still holding their default read muted, so a typed
   override stands out (#722 follow-up). */
.wind-fetch-status { font-size: 11px; color: #9a948f; padding: 0 2px; min-height: 14px; }
.row input.is-default,
.charts-alt-input.is-default,
.charts-freq-input.is-default {
  color: #8a8480;
  font-style: italic;
}
.row input.is-default::placeholder,
.charts-alt-input.is-default::placeholder,
.charts-freq-input.is-default::placeholder {
  color: #8a8480;
  opacity: 1;
}
body.theme-light .row input.is-default,
body.theme-light .charts-alt-input.is-default,
body.theme-light .charts-freq-input.is-default {
  color: #9aa1ab;
}
body.theme-light .row input.is-default::placeholder,
body.theme-light .charts-alt-input.is-default::placeholder,
body.theme-light .charts-freq-input.is-default::placeholder {
  color: #9aa1ab;
  opacity: 1;
}
.row-reset {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  color: #b9b3b3;
  background: #2a2626;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 2px;
}
.row-reset:hover { color: #fff; background: #3a3636; }
body.theme-light .row-reset {
  color: #555;
  background: #f0f0f0;
  border-color: #bbb;
}
body.theme-light .row-reset:hover { color: #111; background: #e0e0e0; }
.row .val {
  color: #e8e8e8;
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}
.row .freq-control { display: inline-flex; align-items: center; gap: 4px; }
.row .freq-input.invalid,
.charts-freq-input.invalid {
  border-color: #c0392b;
  background: rgba(231, 76, 60, 0.12);
}
.row .freq-unit { color: #b9b3b3; font-size: 11px; }

.row.col {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.row textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 6px 8px;
}

.insp-btn {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: #fff;
  background: #b03636;
  border: none;
  border-radius: 5px;
  padding: 7px;
  cursor: pointer;
  margin-top: 4px;
}
.insp-btn:hover { background: #c44141; }
.insp-btn:disabled {
  opacity: 0.48;
  cursor: default;
}
.insp-btn:disabled:hover { background: #b03636; }
/* Route summary — a footer section at the bottom of the toolbar. */
#info {
  margin-top: 4px;
  padding: 6px 6px 2px;
  border-top: 1px solid #443f3f;
  font-size: 12px;
  color: #b9b3b3;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
}
#info:empty { display: none; }
#app-version {
  display: block;
  text-align: right;
  font-size: 10px;
  color: #6b6565;
  padding: 2px 6px 4px;
  user-select: none;
}

/* Footer links row — small repo / wiki links below the route-info totals. */
#toolbar > #footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 2px;
  padding: 4px 6px 6px;
  border-top: 1px solid #3a3636;
}
#toolbar .footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8a8484;
  text-decoration: none;
  white-space: nowrap;
}
#toolbar .footer-link:hover { color: #e8e8e8; }
#toolbar .footer-link .footer-link-icon { flex: none; opacity: 0.85; }
#toolbar .footer-link:hover .footer-link-icon { opacity: 1; }
/* In-page action variant (issue #420 Help): button styled to match the
   anchor links beside it. Override the generic #toolbar button skin
   (padded pill background) so the Shortcuts trigger looks like its
   neighbours. */
#toolbar button.footer-link {
  font: inherit;
  font-size: 11px;
  color: #8a8484;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
#toolbar button.footer-link:hover {
  background: transparent;
  color: #e8e8e8;
}

@media (min-width: 681px) {
  #info,
  #app-version {
    display: none;
  }

  #toolbar > #footer-links {
    order: 40;
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin: 0;
    margin-inline-start: 4px;
    padding: 0 0 0 4px;
    border-top: 0;
    border-inline-start: 1px solid #3a3636;
  }

  #toolbar .footer-link {
    width: 30px;
    height: 33px;
    justify-content: center;
    gap: 0;
    border-radius: 0;
    color: #c6c0c0;
  }

  #toolbar button.footer-link {
    width: 30px;
    height: 33px;
  }

  #toolbar .footer-link:hover,
  #toolbar button.footer-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  #toolbar .footer-link-text {
    display: none;
  }
}

/* Keyboard-shortcuts cheat-sheet (issue #420) ---------------------- */
.shortcuts-help-modal {
  min-width: 320px;
  max-width: min(420px, 92vw);
  padding: 18px 20px 16px;
}
.modal-back.shortcuts-help {
  z-index: 2400;
}
/* SIGWX significant-weather chart viewer. */
.sigwx-modal .sigwx-time {
  margin: 4px 0 8px;
  font: inherit;
  font-size: 13px;
}
.sigwx-modal .sigwx-img {
  display: block;
  max-width: min(90vw, 900px);
  max-height: 78vh;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: 4px;
}
.shortcuts-help-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 13px;
}
.shortcuts-help-group {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b9b3b3;
  border-bottom: 1px solid #3a3636;
  padding-bottom: 2px;
}
.shortcuts-help-group:first-of-type { margin-top: 2px; }
.shortcuts-help-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  color: #e8e8e8;
  font-weight: 700;
}
.shortcuts-help-keys kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #f1ece4;
  background: #1f1c1c;
  border: 1px solid #4a4444;
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.shortcuts-help-plus,
.shortcuts-help-sep {
  color: #8a8484;
  font-weight: 400;
  padding: 0 1px;
}
.shortcuts-help-desc {
  margin: 0;
  align-self: center;
  color: #d4cfcf;
  font-weight: 400;
}

/* Print (browser Cmd+P): drop the UI, keep the map + route overlay. */
@media print {
  #toolbar, #inspector, #tuning-panel, .leaflet-control-container { display: none !important; }
  #map, #overlay { position: fixed; inset: 0; }
}

/* Flight-plan print: hide everything except the table modal. */
@media print {
  body.printing-plan {
    color: #111;
    background: #fff;
  }
  body.printing-plan #map,
  body.printing-plan #overlay,
  body.printing-plan #toolbar,
  body.printing-plan #inspector,
  body.printing-plan #tuning-panel,
  body.printing-plan .leaflet-control-container { display: none !important; }
  body.printing-plan .modal-back.flight-plan {
    display: block;
    position: static;
    inset: auto;
    background: none;
    pointer-events: auto;
  }
  body.printing-plan .modal-back.flight-plan > .modal,
  body.printing-plan .modal.wide {
    display: block;
    position: static;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    color: #111;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  body.printing-plan .modal-title {
    margin: 0 0 12px;
    color: #111;
    font-size: 18px;
    text-align: start;
    cursor: default;
  }
  body.printing-plan .modal-btns,
  body.printing-plan .modal-close-x,
  body.printing-plan .fp-aircraft,
  body.printing-plan .fp-columns { display: none !important; }
  body.printing-plan .modal.wide .fp-scroll {
    display: block;
    overflow: visible;
  }
  body.printing-plan .flight-plan-sub {
    margin: 14px 0 6px;
    padding: 0;
    color: #111;
    border: none;
  }
  body.printing-plan .flight-table {
    width: 100%;
    table-layout: fixed;
    margin: 0 0 12px;
    color: #111;
    background: #fff;
    font-size: 8px;
    line-height: 1.12;
    page-break-inside: auto;
  }
  body.printing-plan .flight-table thead {
    display: table-header-group;
  }
  body.printing-plan .flight-table tfoot {
    display: table-row-group;
  }
  body.printing-plan .flight-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.printing-plan .flight-table th,
  body.printing-plan .flight-table td {
    padding: 1px 2px;
    color: #111;
    background: #fff;
    border: 1px solid #555;
    text-align: start;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.printing-plan .flight-table th {
    position: static;
    font-weight: 700;
  }
  body.printing-plan .flight-table tfoot td {
    background: #f3f3f3;
    border-top: 2px solid #111;
  }
  body.printing-plan .flight-table th:last-child,
  body.printing-plan .flight-table td.fp-del,
  body.printing-plan .flight-table td:last-child:empty {
    display: none !important;
  }
  body.printing-plan .flight-table .fp-vor-col {
    display: table-cell !important;
    font-size: inherit;
    padding: 1px 2px;
  }
  body.printing-plan .flight-table .fp-col-hidden {
    display: none !important;
  }
  body.printing-plan .flight-table .fp-vor-col select {
    display: none !important;
  }
  body.printing-plan .flight-table th:nth-child(1) { width: 3%; }
  body.printing-plan .flight-table th:nth-child(2),
  body.printing-plan .flight-table th:nth-child(3) { width: 10%; }
  body.printing-plan .flight-table th:nth-child(4) { width: 7%; }
  body.printing-plan .flight-table th:nth-child(5) { width: 7%; }
  body.printing-plan .flight-table th:nth-child(6) { width: 8%; }
  body.printing-plan .flight-table th:nth-child(7) { width: 7%; }
  body.printing-plan .flight-table th:nth-child(8) { width: 7%; }
  body.printing-plan .flight-table th:nth-child(9) { width: 8%; }
  body.printing-plan .flight-table th:nth-child(10),
  body.printing-plan .flight-table th:nth-child(11) { width: 8%; }
  body.printing-plan .flight-table th:nth-child(12) { width: 9%; }
  body.printing-plan .flight-table th:nth-child(13) { width: 7%; }
  body.printing-plan .fp-radial-val {
    white-space: normal;
  }
  body.printing-plan .plan-name,
  body.printing-plan .plan-num {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: #111;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Mobile: bigger touch targets, roomier toolbar. */
@media (max-width: 680px) {
  #toolbar { gap: 6px; top: 8px; left: 8px;
             max-height: calc(100vh - 16px);
             max-height: calc(100dvh - 16px); }
  #toolbar button { padding: 9px 12px; font-size: 14px; }
  #toolbar .navtoggle { font-size: 14px; }
  #toolbar .navtoggle input { width: 18px; height: 18px; }
  /* Inspector as a bottom sheet: full width, capped height, so the map stays
     visible above it instead of a tall side panel blanketing the chart. */
  #inspector {
    left: 8px; right: 8px; width: auto;
    top: auto; bottom: 8px;
    max-height: 45dvh;
  }
  .row input[type="number"],
  .row input[type="text"] { padding: 8px 6px; font-size: 15px; }
  #info { font-size: 12px; }
  /* Flight-plan table is wider than a phone — scroll sideways instead of
     truncating columns. */
  .fp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* While a modal is open, the floating map legend and toolbar would overlap
     it on a small screen — hide them until it closes. */
  body:has(.modal-back) .map-legend,
  body:has(.modal-back) #toolbar { display: none; }
}

/* Orientation picker modal */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
/* Flight Plan variant: transparent backdrop that doesn't capture events,
   so the map underneath stays draggable / pannable while the plan is open. */
.modal-back.flight-plan {
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
.modal-back.flight-plan > .modal {
  pointer-events: auto;
  position: absolute;
  margin: 0;
}
/* Export modal while placing the flight-plan card: clear the backdrop so the
   map (and the draggable card) stays reachable underneath the dialog. */
.modal-back.export-place {
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
.modal-back.export-place > .modal { pointer-events: auto; }
.modal {
  min-width: 240px;
  padding: 16px;
  background: #2a2626;
  border: 1px solid #3a3636;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  /* Double-clicking labels/table cells used to select their text — useless in
     the export / charts dialogs. Inputs/textareas opt back in below. */
  -webkit-user-select: none;
  user-select: none;
}
.modal input, .modal textarea, .modal select,
.modal [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
.modal-title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #e8e8e8;
  text-align: center;
  cursor: grab;
  user-select: none;
}
.modal-title:active { cursor: grabbing; }
.modal-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.modal-btns button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #1d6fe0;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
}
.modal-btns button:hover { background: #2f7fee; }
.modal-btns .modal-cancel { background: #443f3f; }
.modal-btns .modal-cancel:hover { background: #555050; }

.point-choice-modal {
  min-width: 260px;
  max-width: min(360px, 92vw);
}
.point-choice-list {
  display: grid;
  gap: 8px;
}
.point-choice-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  color: #e8e8e8;
  text-align: start;
  background: #332f2f;
  border: 1px solid #443f3f;
  border-radius: 6px;
  cursor: pointer;
}
.point-choice-option:hover,
.point-choice-option:focus {
  color: #fff;
  background: #1d6fe0;
  border-color: #2f7fee;
  outline: none;
}
.point-choice-primary {
  font-size: 13px;
  font-weight: 700;
}
.point-choice-meta {
  font-size: 11px;
  color: #b9b3b3;
}
.point-choice-option:hover .point-choice-meta,
.point-choice-option:focus .point-choice-meta {
  color: #e9f1ff;
}

.route-template-modal {
  min-width: 320px;
  max-width: min(440px, 92vw);
}
/* Route library (#677) */
.route-library-modal {
  min-width: 320px;
  max-width: min(460px, 92vw);
}
.route-library-body {
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.route-library-saverow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.route-library-name {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 5px 7px;
  min-width: 0;
  unicode-bidi: plaintext;
}
.route-library-list {
  display: grid;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.route-library-empty { color: #b9b3b3; margin: 4px 0; }
/* Match every library button to the standard toolbar/app button look. */
.route-library-saverow > button,
.route-library-actions button,
.route-library-tools button {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.route-library-saverow > button:hover,
.route-library-actions button:hover,
.route-library-tools button:hover { background: #3c3737; }
.route-library-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Drive sync status sits on its own line below the Sync button. */
.route-library-gdrive-status {
  flex-basis: 100%;
  text-align: center;
  color: #b9b3b3;
  font-size: 12px;
}
body.theme-light .route-library-gdrive-status { color: #647184; }
body.theme-light .route-library-saverow > button,
body.theme-light .route-library-actions button,
body.theme-light .route-library-tools button {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .route-library-saverow > button:hover,
body.theme-light .route-library-actions button:hover,
body.theme-light .route-library-tools button:hover { background: #eef3f9; }
.route-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #443f3f;
  border-radius: 6px;
  padding: 6px 8px;
}
.route-library-open {
  display: grid;
  gap: 2px;
  text-align: start;
  background: none;
  border: none;
  cursor: pointer;
  color: #e8e8e8;
  min-width: 0;
}
.route-library-row-name {
  font-weight: 600;
  unicode-bidi: plaintext;
}
.route-library-row-meta {
  color: #b9b3b3;
  direction: ltr;
  font-size: 12px;
  unicode-bidi: isolate;
}
.route-library-actions { display: flex; gap: 4px; flex-wrap: wrap; }
/* Load is the primary row action — make it obvious (clicking the name also loads). */
.route-library-actions .route-library-load,
body.theme-light .route-library-actions .route-library-load {
  color: #fff;
  background: #1d6fe0;
  border-color: #1d6fe0;
}
.route-library-actions .route-library-load:hover,
body.theme-light .route-library-actions .route-library-load:hover {
  background: #2f7fee;
}
.route-template-body {
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.route-template-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(0, 190px);
  gap: 10px;
  align-items: center;
  color: #b9b3b3;
}
.route-template-row select,
.route-template-row input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 5px 7px;
}
.route-template-row input[aria-invalid="true"] {
  border-color: #c0392b;
  background: rgba(231, 76, 60, 0.12);
}
.route-template-path {
  margin: 2px 0 0;
  color: #e8e8e8;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.route-template-description,
.route-template-empty {
  margin: 0;
  color: #b9b3b3;
  line-height: 1.35;
}
/* Light theme — the route-templates modal had no light overrides, so its
 * near-white text/inputs were invisible on the light modal. */
body.theme-light .route-template-row { color: #647184; }
body.theme-light .route-template-row select,
body.theme-light .route-template-row input {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .route-template-path { color: #1f252c; }
body.theme-light .route-template-description,
body.theme-light .route-template-empty { color: #647184; }
/* Per-leg VOR override dropdown in the flight-plan table — was dark on light. */
body.theme-light .fp-leg-vor {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
/* Saved-route name field — was dark on the light modal. */
body.theme-light .route-library-name {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
/* Saved-route row text — near-white was too faint on the light modal. */
body.theme-light .route-library-open { color: #1f252c; }
body.theme-light .route-library-row-meta,
body.theme-light .route-library-empty { color: #647184; }
body.theme-light .route-library-row { border-color: #c6ccd6; }

/* Flight-plan table modal */
.modal.wide {
  display: flex;
  flex-direction: column;
  min-width: 520px;
  max-width: 92vw;
  max-height: 84vh;
  padding: 14px;
}
.fp-aircraft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  font-size: 13px;
  color: #b9b3b3;
  border-bottom: 1px solid #3a3636;
  margin-bottom: 8px;
}
.fp-aircraft select {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 5px;
}
.fp-aircraft input {
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 5px;
}
.modal.wide .fp-scroll {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.modal.wide.charts-alt-modal {
  width: min(760px, 92vw);
  height: min(560px, 84vh);
  min-height: 220px;
  resize: both;
  overflow: hidden;
}
/* Vertical profile strip (#672) */
.fp-profile { margin: 4px 0 8px; }
.fp-profile-label { font-size: 11px; color: #b9b3b3; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.fp-profile-vs { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; }
.fp-profile-vs-input {
  width: 56px; font-size: 11px; padding: 1px 4px;
  color: #e8e8e8; background: #2f2b2b; border: 1px solid #443f3f; border-radius: 4px;
}
.fp-profile-vs-input:focus { outline: 1px solid #1d6fe0; }
.fp-profile-dir {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: #9fb3c8; margin: 2px 2px 3px;
}
.fp-profile-dir .fp-dir-arrow { flex: 1; text-align: center; letter-spacing: 1px; color: #7fa8d0; }
.fp-profile-canvas { width: 100%; height: 104px; display: block; border-radius: 4px; }
.fp-columns {
  position: relative;
  align-self: flex-start;
  margin: 0 0 8px;
  font-size: 13px;
  color: #b9b3b3;
}
.fp-columns summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 5px 9px;
  cursor: pointer;
  user-select: none;
}
.fp-columns summary::-webkit-details-marker { display: none; }
.fp-columns summary::after {
  content: '▾';
  font-size: 10px;
  color: #b9b3b3;
}
.fp-columns[open] summary {
  border-color: #1d6fe0;
  background: #332f2f;
}
.fp-columns-menu {
  position: absolute;
  z-index: 1600;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px 8px;
  min-width: 300px;
  max-width: min(440px, calc(92vw - 28px));
  padding: 8px;
  color: #e8e8e8;
  background: #2b2727;
  border: 1px solid #443f3f;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.fp-columns-all {
  grid-column: 1 / -1;
  justify-self: start;
  font: inherit;
  font-size: 12px;
  color: #e8e8e8;
  background: #342f2f;
  border: 1px solid #4a4444;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
.fp-columns-all:hover { background: #3d3737; }
.fp-column-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 4px;
  white-space: nowrap;
}
.fp-column-option input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.flight-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}
.flight-table th,
.flight-table td {
  padding: 6px 10px;
  text-align: start;
  border-bottom: 1px solid #3a3636;
  white-space: nowrap;
}
.flight-table th {
  position: sticky;
  top: 0;
  color: #b9b3b3;
  background: #2f2b2b;
  font-weight: 600;
}
.flight-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.plan-name {
  width: 96px;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 5px;
}
.plan-name:focus { outline: 1px solid #1d6fe0; }
.plan-num {
  width: 64px;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 5px;
}
.plan-num:focus { outline: 1px solid #1d6fe0; }
.flight-table tfoot td {
  font-weight: 700;
  border-top: 2px solid #443f3f;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
}
.fp-del {
  width: 20px;
  padding: 2px 2px !important;
  text-align: center;
}
.fp-del button {
  background: none;
  border: none;
  color: #b06464;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}
.fp-del button:hover { color: #e06060; background: rgba(255, 80, 80, 0.1); }
.flight-plan-sub {
  font-size: 13px;
  font-weight: 600;
  color: #e8e8e8;
  padding: 16px 12px 4px;
  border-top: 1px solid #3a3636;
  margin-top: 12px;
}

/* Airfield plates */
.plates-section { margin-top: 12px; border-top: 1px solid #3a3636; padding-top: 10px; }
.plates-section .row { flex-wrap: wrap; gap: 4px; }
.plate-chip {
  display: inline-block;
  font: inherit;
  font-size: 11px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.plate-chip:hover { background: #3a3636; border-color: #1d6fe0; }

.plate-chip-small { font-size: 10px; padding: 2px 5px; background: none; border-color: transparent; color: #1d6fe0; cursor: pointer; }
.plate-chip-small:hover { text-decoration: underline; }

/* Inspector satellite preview */
.satellite-snippet-section {
  margin: 10px 0 12px;
  padding-top: 10px;
  border-top: 1px solid #3a3636;
}
.satellite-snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.satellite-snippet-head label {
  color: #b9b3b3;
}
.satellite-expand-hint {
  font: inherit;
  font-size: 11px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
}
.satellite-expand-hint:hover {
  color: #fff;
  background: #3a3636;
  border-color: #1d6fe0;
}
.satellite-snippet {
  position: relative;
  width: min(100%, var(--sat-width, 214px));
  height: var(--sat-height, 118px);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #443f3f;
  border-radius: 6px;
  background: #141212;
  cursor: zoom-in;
}
.satellite-snippet:focus {
  outline: 2px solid #1d6fe0;
  outline-offset: 2px;
}
.satellite-snippet-tiles {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}
.satellite-snippet img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.satellite-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 218, 76, 0.96);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 2;
}
.satellite-crosshair::before,
.satellite-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(255, 218, 76, 0.96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.62);
}
.satellite-crosshair::before {
  left: 50%;
  top: -12px;
  bottom: -12px;
  width: 2px;
  transform: translateX(-50%);
}
.satellite-crosshair::after {
  left: -12px;
  right: -12px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
.satellite-attribution {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 3;
  padding: 1px 4px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.58);
  border-radius: 3px;
  font-size: 9px;
  line-height: 1.3;
  pointer-events: none;
}
.satellite-preview-modal {
  max-width: calc(100vw - 32px);
}
.satellite-preview-body {
  display: grid;
  gap: 8px;
}
/* Expanded view is a real Leaflet map: pan, zoom (the main map's black-on-white
 * bottom-right control), a layer switcher, and a reset-to-centre button. */
.satellite-preview-map {
  width: min(82vw, 720px);
  height: min(68vh, 480px);
  border: 1px solid #443f3f;
  border-radius: 6px;
  overflow: hidden;
  background: #141212;
}
/* Reset-to-centre button — sits below the zoom bar, same Leaflet bar look. */
.satellite-reset-control a {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}
/* Layer picker dropdown — mirrors the main app's view-menu selector. */
.satellite-layer-control {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  padding: 3px;
}
.satellite-layer-select {
  font: inherit;
  font-size: 13px;
  color: #222;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
}
.satellite-caption {
  color: #b9b3b3;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Comm-change inspector badge (issue #399) */
.commchange-row {
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.45);
  border-radius: 4px;
  padding: 6px 8px;
  gap: 4px;
}
/* MSA row flagged when the planned altitude is below the minimum safe alt. */
.msa-low .val {
  color: #ff6b6b;
  font-weight: 700;
  animation: msa-blink 1s step-start infinite;
}
@keyframes msa-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
body.theme-light .msa-low .val { color: #c0392b; }
.commchange-row .commchange-label {
  color: #ffb1a8;
  font-weight: 700;
  font-size: 12px;
}
.commchange-row .commchange-freq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #fff;
}
.commchange-row .commchange-note {
  font-size: 11px;
  color: #d8d8d8;
  white-space: normal;
  line-height: 1.35;
}
.commchange-options-title {
  color: #d8d8d8;
  font-size: 11px;
  font-weight: 700;
}
.commchange-options {
  display: grid;
  gap: 4px;
}
.commchange-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}
.commchange-option-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.commchange-option-code {
  color: #b9b3b3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
.commchange-option-freq {
  grid-column: 1 / -1;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.commchange-template {
  margin-top: -3px;
  font-size: 11px;
  color: #a9a2a2;
}
.commchange-template .val {
  color: #ffd966;
}
.commchange-name-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.commchange-auto-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b9b3b3;
  font-size: 12px;
  white-space: nowrap;
}
.commchange-auto-inline .commchange-auto-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #2f80ed;
}
.commchange-freq-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  unicode-bidi: isolate;
}
.commchange-freq-controls .freq-input {
  width: 96px;
  direction: ltr;
  text-align: right;
}
.commchange-freq-reset {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: #b9b3b3;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
}
.commchange-freq-reset:hover:not(:disabled) {
  color: #fff;
}
.commchange-freq-reset:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Airfield runways (#231) */
.runways-row { flex-wrap: wrap; gap: 4px; align-items: center; }
.runway-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.runway-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Airfield METAR/TAF (#670) */
.wx-section { margin: 8px 0 2px; border-top: 1px solid #3a3636; padding-top: 6px; }
.wx-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: #b9b3b3; margin-bottom: 4px;
}
.wx-refresh {
  font: inherit; font-size: 13px; line-height: 1; color: #9fd0ff;
  background: none; border: none; cursor: pointer; padding: 0 2px;
}
.wx-refresh:disabled { opacity: 0.5; cursor: default; }
/* METAR/TAF codes read left-to-right even in the RTL (Hebrew) layout. */
.wx-body { font-size: 12px; color: #e8e8e8; direction: ltr; text-align: left; }
.wx-block { margin-bottom: 6px; }
.wx-label {
  display: inline-block; font-size: 10px; font-weight: 700; color: #231F20;
  background: #ffd966; border-radius: 3px; padding: 0 5px; margin-bottom: 2px;
}
.wx-line { line-height: 1.4; }
.wx-line.wx-raw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #c9c4c4; }
.wx-toggle {
  font: inherit; font-size: 11px; color: #9fd0ff; background: none; border: none;
  padding: 2px 0; cursor: pointer; text-decoration: underline;
}

/* Charts modal */
.charts-modal-body {
  padding: 2px 0;
}
.charts-freq-section {
  margin: 0 2px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #443f3f;
}
.charts-freq-section-only {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.charts-alt-section {
  margin: 0 2px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #443f3f;
}
.charts-alt-section-only {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.charts-freq-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px;
}
.charts-alt-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px;
}
.charts-freq-title h3 {
  margin: 0;
  font-size: 13px;
  color: #e8e8e8;
}
.charts-alt-title h3 {
  margin: 0;
  font-size: 13px;
  color: #e8e8e8;
}
.charts-alt-title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.charts-freq-restore-all {
  flex-shrink: 0;
  font: inherit;
  font-size: 12px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
.charts-alt-copy,
.charts-alt-reset-all {
  flex-shrink: 0;
  font: inherit;
  font-size: 12px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
.charts-freq-restore-all:hover:not(:disabled) {
  color: #fff;
  background: #3a3636;
}
.charts-alt-copy:hover:not(:disabled),
.charts-alt-reset-all:hover:not(:disabled) {
  color: #fff;
  background: #3a3636;
}
.charts-alt-pin.is-pinned {
  color: #ffd966;
  background: rgba(255, 217, 102, 0.16);
  border-color: #b8941f;
}
.charts-freq-restore-all:disabled,
.charts-alt-reset-all:disabled {
  opacity: 0.45;
  cursor: default;
}
.charts-freq-empty {
  margin: 4px 6px 0;
  color: #b9b3b3;
  font-size: 12px;
}
.charts-alt-empty {
  margin: 4px 6px 0;
  color: #b9b3b3;
  font-size: 12px;
}
.charts-freq-search-row {
  padding: 0 4px 8px;
}
.charts-alt-search-row {
  padding: 0 4px 8px;
}
.charts-freq-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 5px 8px;
}
.charts-alt-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 5px 8px;
}
.charts-freq-search:focus {
  outline: 1px solid #1d6fe0;
}
.charts-alt-search:focus {
  outline: 1px solid #1d6fe0;
}
.charts-freq-table-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid #393434;
  border-radius: 4px;
}
.charts-alt-table-wrap {
  max-height: 340px;
  overflow: auto;
  border: 1px solid #393434;
  border-radius: 4px;
}
.charts-freq-table {
  margin-bottom: 0;
}
.charts-alt-table {
  margin-bottom: 0;
}
.charts-freq-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #302c2c;
}
.charts-alt-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #302c2c;
}
.charts-alt-table tr.one-way,
.charts-alt-table tbody tr.one-way:hover {
  background: rgba(255, 217, 102, 0.1);
}
.charts-alt-table tr.unknown,
.charts-alt-table tbody tr.unknown:hover {
  background: rgba(160, 170, 190, 0.08);
}
.charts-alt-table tr.overridden,
.charts-alt-table tbody tr.overridden:hover {
  background: rgba(255, 217, 102, 0.14);
}
.charts-alt-pair {
  color: #fff2a8;
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  unicode-bidi: isolate;
}
.charts-alt-pair-button {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.charts-alt-pair-button:focus {
  outline: 1px solid #1d6fe0;
  outline-offset: 2px;
}
.charts-alt-status,
.charts-alt-distance {
  color: #b9b3b3;
  direction: ltr;
  font-size: 12px;
  unicode-bidi: isolate;
}
.charts-alt-actions {
  width: 28px;
  text-align: center;
}
.charts-alt-cell-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  unicode-bidi: isolate;
}
.charts-alt-table .blocked {
  color: #ffb4b4;
}
.charts-alt-input {
  width: 74px;
  box-sizing: border-box;
  direction: ltr;
  font: inherit;
  font-size: 12px;
  color: #e8e8e8;
  background: #2a2626;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 3px 5px;
  unicode-bidi: isolate;
}
.charts-alt-input::placeholder {
  color: #b9b3b3;
  opacity: 1;
}
.charts-alt-input:focus {
  outline: 1px solid #1d6fe0;
}
.charts-alt-input[aria-invalid="true"] {
  border-color: #b00020;
  box-shadow: 0 0 0 1px rgba(176, 0, 32, 0.35);
}
.charts-alt-cell-reset {
  flex: 0 0 auto;
}
.charts-freq-table tr.overridden,
.charts-freq-table tbody tr.overridden:hover {
  background: rgba(255, 217, 102, 0.16);
}
.charts-freq-table tr.overridden td:first-child {
  box-shadow: inset 3px 0 0 #ffd966;
}
.charts-freq-table tr.overridden .charts-freq-label {
  color: #fff2a8;
  font-weight: 600;
}
.charts-freq-label,
.charts-freq-code {
  display: block;
}
.charts-freq-code {
  direction: ltr;
  margin-top: 2px;
  color: #8a8484;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  unicode-bidi: isolate;
}
.charts-freq-template {
  color: #ffd966;
  direction: ltr;
  unicode-bidi: isolate;
}
.charts-freq-input {
  width: 96px;
  direction: ltr;
  font: inherit;
  font-size: 13px;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 4px;
  padding: 2px 5px;
  unicode-bidi: isolate;
}
.charts-freq-table tr.overridden .charts-freq-input {
  background: #3a3422;
  border-color: #ffd966;
}
.charts-freq-input:focus {
  outline: 1px solid #1d6fe0;
}
.charts-freq-actions {
  width: 28px;
  text-align: center;
}
.charts-airport {
  margin: 0 2px;
  padding-bottom: 2px;
}
.charts-airport + .charts-airport {
  border-top: 1px solid #3a3636;
}
.charts-airport-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #8a8484;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 8px;
  border-radius: 4px;
  user-select: none;
}
.charts-airport-header::before {
  content: '▶';
  font-size: 8px;
  display: inline-block;
  transition: transform 0.15s ease;
}
.charts-airport-header.open::before {
  transform: rotate(90deg);
}
.charts-airport-header:hover {
  color: #e0d8d8;
  background: rgba(255,255,255,0.06);
}
.charts-airport-body {
  display: none;
  /* Logical inline-start so the 22 px indent lands on the chevron's side
     under both LTR and RTL (the default locale is Hebrew). */
  padding: 2px 8px 8px;
  padding-inline-start: 22px;
}
.charts-airport-body.open {
  display: block;
}
.charts-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.charts-cat-label {
  font-size: 11px;
  color: #b9b3b3;
  min-width: 60px;
  flex-shrink: 0;
}

/* Plate viewer modal */
.modal-back.plate-viewer { z-index: 3000; }
.plate-viewer-box {
  width: 92vw;
  max-width: 1100px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.plate-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  border-radius: 4px;
}
.plate-loading {
  position: absolute;
  inset: 50% 0 auto;
  text-align: center;
  color: #b9b3b3;
  font-size: 13px;
  padding: 20px;
  white-space: pre-wrap;
  word-break: break-all;
}
.plate-attribution {
  font-size: 10px;
  color: #888;
  text-align: center;
  padding: 6px 0 4px;
  line-height: 1.3;
}

/* Shared top-right ✕ close button on modal boxes — mirrors the inspector's
 * #insp-close so every dismissable surface uses the same affordance. */
.modal {
  position: relative;             /* anchor for the absolute X */
}
.modal-close-x {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 28px;
  height: 28px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: #b9b3b3;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.modal-close-x:hover { background: #443f3f; color: #fff; }
.modal-close-actions {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 2;
  display: flex;
  gap: 2px;
  align-items: center;
}
.modal-close-actions .modal-close-x {
  position: static;
}
.modal-close-action {
  width: 28px;
  height: 28px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: #b9b3b3;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.modal-close-action:hover {
  color: #fff;
  background: #443f3f;
}
.alt-pair-focus-blink {
  animation: alt-pair-focus-blink 0.9s ease-in-out infinite;
}
@keyframes alt-pair-focus-blink {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.22; }
}

/* Floating search overlay — Ctrl/Cmd-F shows this top-center panel so the
 * user can find a nav-waypoint without expanding the Build section. */
#search-overlay {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(20, 18, 18, 0.97);
  border: 1px solid #443f3f;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  width: min(420px, 90vw);
}
#search-overlay.hidden { display: none; }
#search-overlay #wp-search {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  background: #2f2b2b;
  color: #e8e8e8;
  border: 1px solid #443f3f;
  border-radius: 4px;
  outline: none;
}
#search-overlay #wp-search:focus { border-color: #1d6fe0; }
#search-close {
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  color: #b9b3b3;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#search-close:hover { background: #443f3f; color: #fff; }
#search-overlay #wp-search-results {
  /* Override the toolbar-era absolute positioning (see #wp-search-results
     above): inside the fixed overlay it must flow below the input as a
     flex row, not float on top of it and hide the typed text. */
  position: static;
  left: auto;
  right: auto;
  margin-top: 0;
  flex-basis: 100%;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(30, 26, 26, 0.97);
  border: 1px solid #443f3f;
  border-radius: 4px;
}
#search-overlay #wp-search-results.hidden { display: none; }

/* Hidden developer tuning panel: opened only with ?tune=1. */
#tuning-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1800;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 10px;
  background: rgba(20, 18, 18, 0.96);
  border: 1px solid #443f3f;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  color: #e8e8e8;
  font-size: 12px;
  overscroll-behavior: contain;
}
#tuning-panel .tune-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
}
#tuning-panel.dragging .tune-head {
  cursor: grabbing;
}
#tuning-panel .tune-close {
  background: none;
  border: none;
  color: #b9b3b3;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
}
#tuning-panel .tune-close:hover {
  color: #fff;
  background: #443f3f;
}
#tuning-panel .tune-head strong {
  font-size: 14px;
}
#tuning-panel .tune-head span {
  color: #b9b3b3;
  font-weight: 600;
  text-align: right;
}
#tuning-panel .tune-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
#tuning-panel .tune-find {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 4px 6px;
  font: inherit;
}
#tuning-panel button {
  font: inherit;
  color: #e8e8e8;
  background: #2f2b2b;
  border: 1px solid #443f3f;
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}
#tuning-panel button:hover {
  background: #3c3737;
}
#tuning-panel .tune-group {
  border-top: 1px solid #3a3636;
  padding-top: 6px;
  margin-top: 6px;
}
#tuning-panel summary {
  cursor: pointer;
  color: #ffcc33;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
#tuning-panel .tune-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(86px, 1.15fr) 64px 48px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
#tuning-panel .tune-label {
  color: #d9d3d3;
  line-height: 1.2;
}
#tuning-panel input,
#tuning-panel select {
  min-width: 0;
}
#tuning-panel input[type="range"] {
  width: 100%;
}
#tuning-panel input[type="number"],
#tuning-panel input[type="text"],
#tuning-panel select {
  width: 64px;
  padding: 4px 5px;
  color: #e8e8e8;
  background: #231f20;
  border: 1px solid #443f3f;
  border-radius: 4px;
  font: inherit;
}
#tuning-panel input[type="text"] {
  width: 86px;
}
#tuning-panel input[type="color"] {
  width: 40px;
  height: 28px;
  padding: 2px;
  background: #231f20;
  border: 1px solid #443f3f;
  border-radius: 4px;
}
#tuning-panel select {
  width: 118px;
}
#tuning-panel .tune-reset {
  padding-inline: 4px;
  font-size: 11px;
}

@media (min-width: 681px) {
  #search-overlay {
    top: 46px;
  }

  #tuning-panel {
    top: 46px;
    max-height: calc(100vh - 58px);
    max-height: calc(100dvh - 58px);
  }
}

/* Light mode: UI chrome only. The selected map/chart layer is unchanged. */
body.theme-light {
  background: #eef1f5;
  color: #1f252c;
}
body.theme-light #map,
body.theme-light .leaflet-container {
  background: #e7ebf0;
}
body.theme-light #toolbar,
body.theme-light #inspector,
body.theme-light #magnifier-settings,
body.theme-light #tuning-panel,
body.theme-light #search-overlay,
body.theme-light .modal {
  color: #1f252c;
  background: rgba(250, 252, 255, 0.96);
  border-color: #c6ccd6;
  box-shadow: 0 8px 24px rgba(31, 37, 44, 0.18);
}
body.theme-light #toolbar button,
body.theme-light #toolbar .slider-reset,
body.theme-light #toolbar #wpname-rot,
body.theme-light #toolbar #export-select,
body.theme-light #toolbar .navtoggle select,
body.theme-light #toolbar .navtoggle input[type="number"],
body.theme-light #wp-search,
body.theme-light #search-overlay #wp-search,
body.theme-light .row input[type="number"],
body.theme-light .row input[type="text"],
body.theme-light .row select,
body.theme-light .row textarea,
body.theme-light .fp-aircraft select,
body.theme-light .fp-aircraft input,
body.theme-light .fp-columns summary,
body.theme-light .fp-columns-all,
body.theme-light .plan-name,
body.theme-light .plan-num,
body.theme-light .fp-profile-vs-input,
body.theme-light .plate-chip,
body.theme-light .runway-chip,
body.theme-light .point-choice-option,
body.theme-light .satellite-expand-hint,
body.theme-light #tuning-panel button,
body.theme-light #tuning-panel input[type="number"],
body.theme-light #tuning-panel input[type="text"],
body.theme-light #tuning-panel select,
body.theme-light #tuning-panel input[type="color"] {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light #toolbar button:hover,
body.theme-light #toolbar .slider-reset:hover,
body.theme-light #toolbar #wpname-rot:hover,
body.theme-light #toolbar #export-select:hover,
body.theme-light .plate-chip:hover,
body.theme-light .point-choice-option:hover,
body.theme-light .point-choice-option:focus,
body.theme-light .satellite-expand-hint:hover,
body.theme-light #tuning-panel button:hover {
  color: #111820;
  background: #eef3f9;
}
body.theme-light #toolbar button.tool.active,
/* Toggle buttons without the .tool class (e.g. the A3/A4 page-size buttons)
   signal "selected" only via aria-pressed — match that too, or they render as
   plain white in light mode with no visible selected state. Mirrors the dark
   theme's `#toolbar button[aria-pressed="true"]` rule. */
body.theme-light #toolbar button[aria-pressed="true"],
body.theme-light #toolbar .wp-search-item.active {
  color: #fff;
  background: #1d6fe0;
  border-color: #1d6fe0;
}
body.theme-light .satellite-snippet {
  border-color: #b8c0cc;
  background: #dfe6ef;
}
body.theme-light .tb-section,
body.theme-light #toolbar > #lang-toggle,
body.theme-light #info,
body.theme-light #footer-links,
body.theme-light #insp-header,
body.theme-light #mag-settings-header,
body.theme-light .fp-aircraft,
body.theme-light .flight-table th,
body.theme-light .flight-table td,
body.theme-light .flight-table tfoot td,
body.theme-light .flight-plan-sub,
body.theme-light .plates-section,
body.theme-light .satellite-snippet-section,
body.theme-light .wx-section,
body.theme-light .charts-airport + .charts-airport,
body.theme-light #tuning-panel .tune-group {
  border-color: #cfd5df;
}
body.theme-light #insp-header,
body.theme-light #mag-settings-header,
body.theme-light .flight-table th {
  background: #eef3f9;
}
body.theme-light #insp-title,
body.theme-light #mag-settings-title,
body.theme-light .modal-title,
body.theme-light .flight-plan-sub,
body.theme-light #toolbar .navtoggle,
body.theme-light #mag-settings-body .navtoggle,
body.theme-light .row .val,
body.theme-light .map-legend-row,
body.theme-light .wp-search-item,
body.theme-light .point-choice-primary,
body.theme-light .flight-table {
  color: #1f252c;
}
body.theme-light #insp-title.editable {
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light #insp-title.editable:hover,
body.theme-light #insp-title.editable:focus {
  color: #111820;
  background: #f7faff;
  border-color: #8392a6;
  box-shadow: 0 0 0 1px rgba(29, 111, 224, 0.18);
}
body.theme-light .tb-section-head,
body.theme-light #toolbar .drag-handle,
body.theme-light #toolbar-toggle,
body.theme-light #toolbar .slider-val,
body.theme-light #toolbar .slider-reset,
body.theme-light #toolbar .navtoggle .hint,
body.theme-light .row label,
body.theme-light #info,
body.theme-light #app-version,
body.theme-light #toolbar .footer-link,
body.theme-light .map-legend-title,
body.theme-light .search-hint,
body.theme-light .fp-aircraft,
body.theme-light .flight-table th,
body.theme-light .charts-airport-header,
body.theme-light .charts-cat-label,
body.theme-light .plate-loading,
body.theme-light .plate-attribution,
body.theme-light .modal-close-x,
body.theme-light .modal-close-action,
body.theme-light .point-choice-meta,
body.theme-light .satellite-snippet-head label,
body.theme-light .satellite-caption,
body.theme-light .wx-head,
body.theme-light .wx-updated,
body.theme-light #insp-close,
body.theme-light #mag-settings-close,
body.theme-light #search-close,
body.theme-light #tuning-panel .tune-close,
body.theme-light #tuning-panel .tune-head span,
body.theme-light #tuning-panel .tune-label {
  color: #647184;
}
body.theme-light .tb-section-head:hover,
body.theme-light #toolbar .drag-handle:hover,
body.theme-light #toolbar-toggle:hover,
body.theme-light #toolbar .footer-link:hover,
body.theme-light .charts-airport-header:hover,
body.theme-light #insp-close:hover,
body.theme-light .modal-close-x:hover,
body.theme-light .modal-close-action:hover,
body.theme-light #mag-settings-close:hover,
body.theme-light #search-close:hover,
body.theme-light #tuning-panel .tune-close:hover {
  color: #111820;
  background: rgba(29, 111, 224, 0.08);
}
body.theme-light .point-choice-option:hover .point-choice-meta,
body.theme-light .point-choice-option:focus .point-choice-meta {
  color: #4b5563;
}
@media (min-width: 681px) {
  body.theme-light #toolbar {
    background: rgba(250, 252, 255, 0.98);
    box-shadow: 0 2px 12px rgba(31, 37, 44, 0.16);
  }

  body.theme-light #toolbar > #lang-toggle {
    border-color: #cfd5df;
  }

  body.theme-light .tb-section-body {
    background: rgba(250, 252, 255, 0.99);
    border-color: #c6ccd6;
    box-shadow: 0 10px 24px rgba(31, 37, 44, 0.18);
  }

  body.theme-light .tb-section-head {
    color: #26313d;
  }

  body.theme-light .tb-section-head:hover,
  body.theme-light .tb-section.open .tb-section-head {
    color: #111820;
    background: rgba(29, 111, 224, 0.10);
  }

  body.theme-light #toolbar .tb-section-body button:hover,
  body.theme-light #toolbar #export-select:hover,
  body.theme-light #toolbar .tb-section-body .navtoggle:hover {
    background: rgba(29, 111, 224, 0.08);
  }

  /* …but a *selected* button (white text) must keep a solid fill on hover —
     the translucent wash above would otherwise leave white-on-near-white (the
     A3/A4 page buttons). Slightly darker blue gives hover feedback. */
  body.theme-light #toolbar .tb-section-body button.tool.active:hover,
  body.theme-light #toolbar .tb-section-body button[aria-pressed="true"]:hover {
    color: #fff;
    background: #195fc2;
    border-color: #195fc2;
  }

  body.theme-light .tb-section[data-sec="print"] .tb-print-label {
    color: #647184;
  }

  body.theme-light .tb-section[data-sec="print"] .tb-print-separator {
    background: #d8dde5;
  }
}
body.theme-light .map-legend {
  background: rgba(250, 252, 255, 0.88);
  border-color: #c6ccd6;
}
body.theme-light #wp-search-results,
body.theme-light #search-overlay #wp-search-results {
  background: #fff;
  border-color: #c6ccd6;
  box-shadow: 0 8px 20px rgba(31, 37, 44, 0.18);
}
body.theme-light .wp-search-item:hover {
  color: #fff;
  background: #1d6fe0;
}
body.theme-light .flight-table tbody tr:hover,
body.theme-light .flight-table tfoot td {
  background: rgba(29, 111, 224, 0.07);
}
body.theme-light .fp-columns { color: #647184; }
body.theme-light .fp-columns summary::after { color: #647184; }
body.theme-light .fp-columns[open] summary {
  background: #eef3f9;
  border-color: #1d6fe0;
}
body.theme-light .fp-columns-menu {
  color: #1f252c;
  background: #fff;
  border-color: #c6ccd6;
  box-shadow: 0 8px 20px rgba(31, 37, 44, 0.18);
}
body.theme-light .fp-columns-all:hover {
  color: #111820;
  background: #eef3f9;
}
body.theme-light .modal-back {
  background: rgba(240, 244, 248, 0.62);
}
body.theme-light .modal-back.flight-plan {
  background: transparent;
}
body.theme-light .modal-btns .modal-cancel {
  color: #fff;
  background: #6b7280;
}
body.theme-light .modal-btns .modal-cancel:hover {
  background: #4b5563;
}
body.theme-light .commchange-row {
  background: rgba(231, 76, 60, 0.09);
  border-color: rgba(192, 57, 43, 0.36);
}
body.theme-light .commchange-row .commchange-label {
  color: #b8322c;
}
body.theme-light .commchange-row .commchange-freq {
  color: #1f252c;
}
body.theme-light .commchange-row .commchange-note {
  color: #4b5563;
}
body.theme-light .commchange-options-title {
  color: #4b5563;
}
body.theme-light .commchange-option {
  background: rgba(31, 37, 44, 0.06);
}
body.theme-light .commchange-option-code {
  color: #6b7280;
}
body.theme-light .commchange-option-freq {
  color: #1f252c;
}
body.theme-light .commchange-template {
  color: #6b7280;
}
body.theme-light .commchange-template .val {
  color: #9a6b00;
}
body.theme-light .commchange-freq-reset {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .commchange-freq-reset:hover:not(:disabled) {
  color: #111820;
  background: #eef3f9;
}
body.theme-light .wx-body {
  color: #1f252c;
}
body.theme-light .wx-line.wx-raw {
  color: #374151;
}
body.theme-light .wx-refresh,
body.theme-light .wx-toggle {
  color: #165fc7;
}
body.theme-light .wx-refresh:hover:not(:disabled),
body.theme-light .wx-toggle:hover {
  color: #0b4fb3;
}
body.theme-light .charts-freq-section {
  border-color: #c6ccd6;
}
body.theme-light .charts-alt-section {
  border-color: #c6ccd6;
}
body.theme-light .charts-freq-title h3 {
  color: #1f252c;
}
body.theme-light .charts-alt-title h3 {
  color: #1f252c;
}
body.theme-light .charts-freq-restore-all,
body.theme-light .charts-freq-search,
body.theme-light .charts-freq-input {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .charts-alt-copy,
body.theme-light .charts-alt-reset-all,
body.theme-light .charts-alt-search {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .charts-freq-restore-all:hover:not(:disabled) {
  color: #111820;
  background: #eef3f9;
}
body.theme-light .charts-alt-copy:hover:not(:disabled),
body.theme-light .charts-alt-reset-all:hover:not(:disabled) {
  color: #111820;
  background: #eef3f9;
}
body.theme-light .charts-alt-pin.is-pinned {
  color: #7a5600;
  background: #fff3c4;
  border-color: #d0a420;
}
body.theme-light .charts-freq-empty,
body.theme-light .charts-freq-code {
  color: #6b7280;
}
body.theme-light .charts-alt-empty,
body.theme-light .charts-alt-status,
body.theme-light .charts-alt-distance {
  color: #6b7280;
}
body.theme-light .charts-freq-table-wrap {
  border-color: #d2d7df;
}
body.theme-light .charts-alt-table-wrap {
  border-color: #d2d7df;
}
body.theme-light .charts-freq-table th {
  background: #f4f6f8;
}
body.theme-light .charts-alt-table th {
  background: #f4f6f8;
}
body.theme-light .charts-alt-table tr.one-way,
body.theme-light .charts-alt-table tbody tr.one-way:hover {
  background: rgba(154, 107, 0, 0.08);
}
body.theme-light .charts-alt-table tr.unknown,
body.theme-light .charts-alt-table tbody tr.unknown:hover {
  background: rgba(70, 85, 105, 0.06);
}
body.theme-light .charts-alt-table tr.overridden,
body.theme-light .charts-alt-table tbody tr.overridden:hover {
  background: rgba(154, 107, 0, 0.14);
}
body.theme-light .charts-alt-pair {
  color: #6f4d00;
}
body.theme-light .charts-alt-table .blocked {
  color: #9d2b2b;
}
body.theme-light .charts-alt-input {
  color: #1f252c;
  background: #fff;
  border-color: #b8c0cc;
}
body.theme-light .charts-alt-input::placeholder {
  color: #6b7280;
}
body.theme-light .charts-freq-template {
  color: #9a6b00;
}
body.theme-light .charts-freq-table tr.overridden,
body.theme-light .charts-freq-table tbody tr.overridden:hover {
  background: rgba(154, 107, 0, 0.14);
}
body.theme-light .charts-freq-table tr.overridden td:first-child {
  box-shadow: inset 3px 0 0 #9a6b00;
}
body.theme-light .charts-freq-table tr.overridden .charts-freq-label {
  color: #6f4d00;
}
body.theme-light .charts-freq-table tr.overridden .charts-freq-input {
  background: #fff7d6;
  border-color: #9a6b00;
}
body.theme-light .plate-chip-small {
  color: #1d6fe0;
  background: none;
  border-color: transparent;
}
body.theme-light .runway-chip,
body.theme-light .plate-chip {
  background: #f7faff;
}
body.theme-light #tuning-panel summary {
  color: #9b6a00;
}

/* Print-section orientation toggle (button next to A3 / A4). */
.tb-print-label,
.tb-print-separator {
  display: none;
}
#page-buttons {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
#page-buttons > * { flex: 1; }
#page-orient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
}
.page-orient-icon {
  display: inline-flex;
  flex: 0 0 1.1em;
  justify-content: center;
  width: 1.1em;
  font-size: 15px;
  line-height: 1;
}
.page-orient-label {
  display: none;
  font-size: 13px;
  line-height: 1.1;
}
#page-orient.portrait { opacity: 0.9; }

/* Toast — bottom-center transient message for non-blocking confirmations. */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  padding: 8px 16px;
  background: rgba(20, 18, 18, 0.95);
  color: #e8e8e8;
  border: 1px solid #443f3f;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; }

.build-update-notice {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5200;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 560px);
  padding: 8px 10px;
  color: #fff;
  background: rgba(20, 18, 18, 0.96);
  border: 1px solid #ffcc33;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  font-size: 13px;
}
.build-update-notice span { flex: 1; min-width: 0; }
.build-update-notice button {
  flex: none;
  font: inherit;
  color: #fff;
  background: #1d6fe0;
  border: none;
  border-radius: 4px;
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.build-update-notice button:hover { background: #2f7fee; }
.build-update-notice .update-dismiss { background: #443f3f; }
.build-update-notice .update-dismiss:hover { background: #555050; }

@keyframes blink-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blink-warn { animation: blink-warn 1.2s ease-in-out infinite; }

/* magnifying glass */
#tool-magnifier { font-size: 18px; line-height: 1; padding: 2px 6px; }
#tool-magnifier.active { background: #3a3636; border-color: #ffcc33; color: #ffcc33; }

/* "Perfecting…" pill that appears inside the loupe while hi-res sub-tiles
   are still in flight. Sits above the scaled content layer (z-index >= 1),
   centred, and pointer-events disabled so it never intercepts clicks. */
.mag-loading {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 18, 18, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 204, 51, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  animation: mag-loading-pulse 1.4s ease-in-out infinite;
}
.mag-loading.show { display: block; }
@keyframes mag-loading-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}