/* Soaringlab v2 — viewer (iconbar | drawer | split-pane 2D|3D + timebar). */

:root {
  --header-h:        52px;
  --iconbar-w:       44px;
  --drawer-w:        320px;    /* updated at runtime by the resizer */
  --timebar-h:       108px;    /* initial estimate, overridden by --timebar-actual-h */
  --timebar-actual-h:108px;    /* set by JS after each table rebuild */
  --divider-w:       6px;
  --resizer-w:       6px;
}

html, body { height: 100%; overflow: hidden; }
body.viewer-body { background: #000; font-family: 'Saira', system-ui, sans-serif; }

/* Brand logo — match the rest of the UI typeface. */
.logo { font-family: 'Saira', system-ui, sans-serif; }

/* --- dark scrollbars (WebKit + Firefox) --- */
* { scrollbar-width: thin; scrollbar-color: #3a434f var(--bg-elev); }
::-webkit-scrollbar            { width: 10px; height: 10px; }
::-webkit-scrollbar-track      { background: var(--bg-elev); }
::-webkit-scrollbar-thumb      { background: #3a434f; border-radius: 6px; border: 2px solid var(--bg-elev); }
::-webkit-scrollbar-thumb:hover{ background: #4a5562; }
::-webkit-scrollbar-corner     { background: var(--bg-elev); }

/* --- header --- */
#appHeader { height: var(--header-h); }

.mode-tabs {
  display: flex;
  gap: 2px;
  margin-left: 24px;
  margin-right: auto;   /* take up the slack so the tabs stay grouped left
                           and .header-nav (logout) sits on the right */
}
.mode-tab {
  background: transparent;
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  height: var(--header-h);
}
.mode-tab:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.mode-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: rgba(78,168,222,.08);
}

.header-nav { display: flex; align-items: center; }
/* "profile" is a <button> styled to match the <a> nav links. */
nav button.nav-link {
  margin-left: 18px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Saira', system-ui, sans-serif; font-size: 13px;
  color: var(--fg-muted);
}
nav button.nav-link:hover { color: var(--fg); }

/* "Install app" (PWA) button — inherits the nav-link box (incl. margin) but
   uses the accent colour so it reads as an action. Hidden until the install
   script reveals it. */
button.nav-link.pwa-install {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
}
button.nav-link.pwa-install[hidden] { display: none; }
.pwa-install svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
nav button.nav-link.pwa-install:hover { color: var(--accent-2); }

/* Instruction popover for iOS / non-Chromium fallback. Fixed near the top-right
   so it also works over the mobile full-screen start screen. */
.pwa-hint {
  position: fixed; top: 58px; right: 12px; left: 12px; max-width: 320px;
  margin-left: auto; z-index: 1000;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 34px 12px 14px; font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.pwa-hint b { color: var(--fg); font-weight: 600; }
.pwa-hint-ico {
  width: 15px; height: 15px; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pwa-hint-close {
  position: absolute; top: 3px; right: 6px;
  background: none; border: none; color: var(--fg-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.pwa-hint-close:hover { color: var(--fg); }

/* Desktop: the wrapper is layout-transparent, so #modeTabs and .header-nav
   behave as direct flex children of the header — exactly as before. The
   hamburger is hidden until the viewport narrows. */
#appHeader { position: relative; }
#headerMenu { display: contents; }
.nav-toggle {
  display: none;
  background: none; border: none; padding: 6px; margin-left: auto;
  color: var(--fg-muted); cursor: pointer; border-radius: 4px;
}
.nav-toggle svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle:hover { color: var(--fg); background: rgba(255,255,255,.05); }

/* NB: de mobiele @media (max-width: 640px)-regels staan onderaan dit bestand,
   ná alle basisregels, zodat ze bij gelijke specificiteit winnen (media queries
   verhogen de specificiteit niet — bron-volgorde beslist). */

/* --- on-map basemap controls (2D top-left via Maps control, 3D top-right) --- */
.mapCtl { display: flex; flex-direction: column; gap: 6px; }
.mapCtl-2d { margin: 10px; }                 /* Maps ControlPosition has no padding */
/* Top right of the 3D pane — sits below the floating map-mode toggle. */
.mapCtl-3d { position: absolute; top: 48px; right: 10px; z-index: 6; }
.mapCtlGroup { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mapCtlBtn {
  font: 15px/1 'Saira', system-ui, sans-serif;
  background: #fff; color: #1a2230;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px;
  padding: 6px; width: 34px; height: 32px; min-width: 0; text-align: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.mapCtlBtn:hover { background: #eef3fb; }
.mapCtlBtn.active { background: #2d6cdf; color: #fff; border-color: #2d6cdf; }
.mapCtl-3d .camBtn { font-size: 14px; padding: 6px 8px; }

/* --- root layout (icon-bar | drawer | main) --- */
#viewerRoot {
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
}

/* Iconbar — narrow, always visible. Stops above the timebar so the timebar
 * can span the full page width. */
#iconBar {
  position: absolute;
  top: 0; left: 0;
  bottom: var(--timebar-actual-h);
  width: var(--iconbar-w);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  z-index: 20;
}
.iconBtn {
  width: 32px; height: 32px;
  margin: 4px 0;
  background: transparent;
  /* Clean line icons: the SVG strokes inherit this colour via currentColor.
   * State changes (hover/active) just swap `color`. */
  color: #c2c9d2;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconBtn .iconSvg {
  width: 20px; height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.iconBtn:hover:not(:disabled)  { color: #eef2f6; background: var(--bg-card); }
.iconBtn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(78,168,222,.15);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Layer is enabled (showing on the map) — the icon glows in the accent colour
   even when its panel is closed. The full box (.active) still wins when the
   panel is open. */
.iconBtn.enabled { color: var(--accent); }
.iconBtn:disabled { opacity: .35; cursor: not-allowed; }
.iconBarSection { display: flex; flex-direction: column; align-items: center; width: 100%; }
.iconSpacer     { flex: 1; }

/* Uitvouwknop voor het linkermenu — enkel op mobiel zichtbaar (zie media-query). */
.left-nav-toggle { display: none; }

/* Home-knop (bovenaan iconbar), de mobiele account-knop en de titel van het
   mobiele startscherm: enkel op mobiel zichtbaar (zie media-query onderaan). */
.iconHome { display: none; }
.icon-mobile-only { display: none; }
.mobileHomeTitle { display: none; }

/* Speed-control popover. The speed button lives in the timebar; viewer-app.js
 * sets left/bottom from the button's rect on open (fixed → no clipping by the
 * timebar's overflow). The left/bottom here are just a sane fallback. */
.speed-popover {
  position: fixed;
  left: calc(var(--iconbar-w) + 6px);
  bottom: calc(var(--timebar-actual-h) + 8px);
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.speed-popover.hidden { display: none; }
.speed-popover-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.speed-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.speed-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  min-width: 56px;
  text-align: center;
  color: var(--fg);
}
/* Slider in de speed-popover. De gedeelde .settings-range gebruikt flex:1 — dat
 * doet niets in dit block-layout popover, waardoor de slider op zijn intrinsieke
 * breedte bleef staan (thumb haalde de rechterrand niet) én de track dezelfde
 * kleur had als de popover-achtergrond (onzichtbaar). Hier: volle breedte +
 * contrasterende track. */
#speedSlider {
  width: 100%;
  display: block;
  margin: 4px 0 0;
  background: var(--border);
}

/* Drawer — slides out to the right of the iconbar. Now also extends only to
 * the top of the timebar so the timebar can span the full page width. */
#leftDrawer {
  position: absolute;
  top: 0;
  bottom: var(--timebar-actual-h);
  left: var(--iconbar-w);
  width: var(--drawer-w);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  overflow: hidden;            /* sections manage their own scroll */
  display: flex;
  flex-direction: column;
  z-index: 15;
  transition: transform .2s ease;
  transform: translateX(-100%);  /* default: hidden */
}
#leftDrawer.drawerOpen { transform: translateX(0); }

/* --- drawer: fixed heading/info + scrollable body --- */
/* The drawer is height-bounded, so each visible section fills it. By default a
 * section scrolls as a whole (preserves old behaviour for settings/airspace/…
 * panels that have no dedicated list — nothing gets clipped). */
.drawerSection:not(.hidden) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Flights / Tasks / Waypoints: keep the heading(s), toolbars and identity
 * block fixed; scroll only the list/body underneath. */
#drawerFlightsSection:not(.hidden),
#drawerTasksSection:not(.hidden),
#drawerWaypointsSection:not(.hidden),
#drawerWaypointsBrowseSection:not(.hidden) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#drawerFlightsSection:not(.hidden)         > ul.flightList,
#drawerTasksSection:not(.hidden)           > ul.flightList,
#drawerWaypointsSection:not(.hidden)       > ul.flightList,
#drawerWaypointsBrowseSection:not(.hidden) > ul.flightList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#drawerFlightsSection:not(.hidden) > #compareView:not(.hidden) {
  flex: 1 1 auto; min-height: 0; overflow: auto;
}

/* Statistics view: the single expanded flight fills the section; only its body
 * (the stats tables) scrolls — heading, identity block and tab bar stay put. */
#leftDrawer[data-dv="statistics"] #flightList {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
#leftDrawer[data-dv="statistics"] .flightItem.expanded {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column;
}
#leftDrawer[data-dv="statistics"] .flightItemHead,
#leftDrawer[data-dv="statistics"] .flightInfoGrid,
#leftDrawer[data-dv="statistics"] .statsTabs { flex: 0 0 auto; }
#leftDrawer[data-dv="statistics"] .flightItemBody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* Phases tab: the table is the body's only content, so let it stretch to the
 * full available height (with its own scrollbar) instead of the fixed 280px
 * cap that suits tables sharing the body with other subsections. */
#leftDrawer[data-dv="statistics"] .flightItemBody--phases {
  display: flex; flex-direction: column; overflow: hidden;
}
/* All / XC / Task segment filter above the phase table. */
.phaseSegBar {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  margin: 0 0 8px;
}
.phaseSegBtn {
  flex: 1 1 auto;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer;
}
.phaseSegBtn:hover:not(:disabled):not(.active) { background: var(--bg-elev); }
.phaseSegBtn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.phaseSegBtn:disabled { opacity: .4; cursor: not-allowed; }
#leftDrawer[data-dv="statistics"] .flightItemBody--phases .phases-subsection {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
#leftDrawer[data-dv="statistics"] .flightItemBody--phases .phase-table-wrap {
  flex: 1 1 auto; min-height: 0; max-height: none;
}

/* --- profile panel: fixed heading + scrolling form body --- */
#drawerProfileSection:not(.hidden) { overflow: hidden; display: flex; flex-direction: column; }
#drawerProfileSection .profileScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.profileForm { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.profileForm label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.profileForm input,
.profileForm select {
  font-family: 'Saira', system-ui, sans-serif; font-size: 13px;
  text-transform: none; letter-spacing: normal;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px; padding: 5px 7px;
}
.profileForm input.uc { text-transform: uppercase; }
.profileForm .btn { margin-top: 4px; align-self: flex-start; }
.profileGroupLabel {
  font-size: 12px; font-weight: 600; color: var(--fg);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 14px 0 2px; padding-top: 8px; border-top: 1px solid var(--border);
}
.profileScroll > .profileGroupLabel:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
/* Disable the slide animation while the user is dragging the resizer —
 * otherwise the drag feels laggy. JS toggles .resizing on/off. */
#leftDrawer.resizing { transition: none; }

/* Resize handle — narrow vertical bar at the drawer's right edge. */
#drawerResizer {
  position: absolute;
  top: 0; bottom: 0;
  right: calc(-1 * var(--resizer-w) / 2);
  width: var(--resizer-w);
  cursor: col-resize;
  z-index: 16;
}
#drawerResizer:hover,
#drawerResizer.dragging {
  background: rgba(78, 168, 222, 0.4);
}

/* Flights-mode sub-tabs (Load flights / Loaded flights) at the drawer top. */
.drawerTabs {
  display: flex;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.drawerTabs.hidden { display: none; }
.drawerTab {
  flex: 1;
  background: transparent;
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 6px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.drawerTab:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.drawerTab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: rgba(78,168,222,.08);
}

.drawerSection {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawerSection.hidden { display: none; }
.drawerHeading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fg-muted);
}
.drawerHeadingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.drawerHeadingRow .drawerHeading { margin: 0; }
/* "Close all" — verwijdert alle geladen vluchten in één keer. Destructief, dus
   een rode hover-affordance. */
.closeAllBtn {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  border-radius: 5px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
  cursor: pointer;
}
.closeAllBtn:hover { color: #e06c6c; border-color: #e06c6c; }
.closeAllBtn.hidden { display: none; }
/* Statistics view — flight picker dropdown above the heading label. */
.statsFlightPicker {
  display: block;
  width: 100%;
  margin-bottom: 7px;
  padding: 5px 7px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.statsFlightPicker:hover { border-color: var(--accent); }
.statsHeadingLabel { display: block; }
.drawerSubsection {
  margin-bottom: 12px;
}
/* Inline action buttons at the bottom of a drawer panel (Settings / Airspace),
   replacing what used to be the modal footer. */
.drawerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.drawerActions .btn { flex: 1 1 auto; }
.drawerSubheading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.drawerSubsection table.kv td:first-child { width: 45%; font-size: 12.5px; }
.drawerSubsection table.kv td             { padding: 4px 6px; font-size: 12.5px; }
/* Values (right column) right-aligned across the stats key/value tables. */
.drawerSubsection table.kv td:last-child  { text-align: right; }
/* Editable ground-reference / QNH inputs in the General tab. */
.qnhInput {
  width: 64px;
  text-align: right;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: 'Saira', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* Thermals table — Total / Left / Right / Attempt grid. */
.drawerSubsection table.thermal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.drawerSubsection table.thermal-table th,
.drawerSubsection table.thermal-table td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.drawerSubsection table.thermal-table tr:last-child td { border-bottom: none; }
.drawerSubsection table.thermal-table th { color: var(--fg-muted); font-weight: 600; }
.drawerSubsection table.thermal-table .thm-metric {
  text-align: left;
  color: var(--fg-muted);
}

/* Load flights tab — file picker + SoaringSpot button + drag hint in a row. */
.loadActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.loadActions .btn { margin: 0; }
.loadActions .small { font-size: 11px; }
/* Drag hint sits to the right of the "Choose .igc file(s)" button. */
.loadActions .loadDragHint {
  flex: 1 1 130px;
  margin: 0;
  line-height: 1.3;
}
/* SoaringSpot import drops onto its own row below. */
#drawerImportSS { flex: 1 1 100%; }

/* ---- Load-view: gegroepeerde acties (Upload / Import) ------------------- */
.loadGroup { margin-bottom: 14px; }
.loadGroup:last-child { margin-bottom: 0; }
.loadGroupLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin-bottom: 7px;
}
/* Volle-breedte knoppen met een vast uitgelijnd icoon links. */
.btnLoad {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  text-align: left;
}
.btnLoad:last-child { margin-bottom: 0; }
.btnLoad span { flex: 1; }
.btnLoadIcon {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loadGroup .loadDragHint {
  margin: 6px 0 0;
  line-height: 1.3;
}

/* Empty-state row in the Loaded flights list. */
.flightListEmpty {
  list-style: none;
  padding: 8px 4px;
}

/* Flight list (one item per loaded IGC) */
.flightList { list-style: none; margin: 0; padding: 0; }
.flightItem {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
  background: var(--bg-card);
  overflow: hidden;
}
.flightItemHead {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.flightItemHead:hover { background: var(--bg-elev); }
.flightColorSwatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.3);
}
.flightItemName {
  flex: 1;
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flightItemAction {
  background: none; border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 5px;
  font-size: 13px;
  border-radius: 3px;
  line-height: 1;
}
.flightItemAction:hover { color: var(--fg); background: var(--bg-elev); }
.flightItemAction.danger:hover { color: var(--danger); }
/* "Bewaar in logboek" — groen wanneer de vlucht is opgeslagen. */
.flightItemAction.saveAct.saved { color: #38b000; opacity: 1; cursor: default; }
.flightItemAction.saveAct:disabled { cursor: default; }
.flightItem.hiddenTrack .flightItemHead { opacity: 0.5; }
.flightItem.hiddenTrack .flightColorSwatch { opacity: 0.3; }
.flightItem.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.flightItem.selected > .flightItemHead {
  background: rgba(78, 168, 222, .12);
}

/* Pin toggle in the flight list — faint until the flight is pinned. */
.flightItemAction.pinAct { opacity: .3; }
.flightItemAction.pinAct.pinned { opacity: 1; }
.flightItemAction.pinAct:hover { opacity: 1; }

/* Compact strip of pinned-column live values under each flight row. */
.flightItemMeta {
  padding: 2px 8px 5px 30px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flightItemMeta:empty { display: none; }
.flightItem.hiddenTrack .flightItemMeta { opacity: .4; }

.flightItemBody {
  display: none;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.flightItem.expanded .flightItemBody { display: block; }
.flightItemBody .drawerSubsection { margin-bottom: 10px; }
.flightItemBody .drawerSubsection:last-child { margin-bottom: 0; }

/* Always-visible flight-identity block above the stats tab bar — a compact
   2-column grid so pilot / aircraft / takeoff info shows on every stats tab. */
.flightInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  padding: 7px 10px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.flightInfoCell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 2px 0;
  border-bottom: 1px solid #2a323d;
}
.flightInfoGrid .flightInfoCell:nth-last-child(-n+2) { border-bottom: none; }
.fiLabel {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.fiValue {
  flex: 1 1 auto;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tasks drawer — extra hint paragraph above the list. */
#drawerTasksSection .drawerHint {
  margin: -4px 0 10px;
  font-size: 11px;
  line-height: 1.35;
}

/* =============================== Waypoints drawer =============================== */
.wpFileItem {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
  padding: 8px 10px;
  background: var(--bg-card);
}
.wpFileHead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wpEye {
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--accent);
  padding: 0 2px;
  user-select: none;
  line-height: 1;
}
.wpFileItem-off .wpEye { color: var(--fg-muted); }
.wpFileItem-off .wpFileName,
.wpFileItem-off .wpFileMeta { opacity: 0.55; }
/* Linked hover highlight between a task's map line and its list row. */
.wpFileItem.taskHover { background: rgba(142, 68, 173, 0.14); border-color: #8e44ad; }
/* Loaded-flight task item: clickable head opens it in the editor. */
.flightItem.taskHover { background: rgba(78, 168, 222, .14); }
.taskOpenHead { cursor: pointer; }
.taskOpenHead:hover .flightItemName { text-decoration: underline; }
.taskOpenHint { margin-left: auto; font-size: 11px; color: var(--accent, #4a90e2); opacity: .85; }
/* Whole saved-task card acts as an open/edit button. */
.wpFileItem-click { cursor: pointer; }
.wpFileName {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpFileBadges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.wpBadge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: transparent;
}
.wpBadge-public { color: #fff; background: var(--accent);   border-color: var(--accent); }
.wpBadge-club   { color: #fff; background: var(--accent-2, #b8860b); border-color: var(--accent-2, #b8860b); }
.wpBadge-owner  { font-style: italic; }

.wpFileMeta {
  margin-top: 2px;
}
.wpFileActions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Mini-button variant — used in the waypoint list (download, delete). */
.btn-mini {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.btn-mini:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-danger:hover { background: var(--danger, #e63946); border-color: var(--danger, #e63946); color: #fff; }

/* Status-line under the file picker — colour-codes errors / success / busy. */
.status-error { color: var(--danger, #e63946); }
.status-ok    { color: var(--accent, #4a90e2); }
.status-busy  { color: var(--fg-muted); }

/* Add-waypoint modal — same look-and-feel as the existing .settings-select. */
.settings-input {
  flex: 1;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  min-width: 0;
}
.settings-input:focus { outline: none; border-color: var(--accent); }

/* ---- Waypoints browse view (in the drawer) ---- */
.wpBrowseHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wpBrowseFileName {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpBrowseToolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.wpBrowseSearch { flex: 1 1 auto; }
.wpBrowseMeta   { margin-bottom: 6px; }
.wpBrowseList {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: 2px;
}
.wpBrowseItem {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.wpBrowseItem:hover { background: rgba(74, 144, 226, 0.08); }
.wpBrowseItem:last-child { border-bottom: none; }
.wpBrowseItemHead {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.wpBrowseItemName {
  font-weight: 600;
  font-size: 13px;
}
.wpBrowseItemMeta { margin-top: 2px; }
.wpBrowseItemDesc {
  margin-top: 2px;
  font-style: italic;
}
.wpBadge-country {
  font-size: 9px;
  padding: 0 5px;
  background: var(--bg-card);
  color: var(--fg-muted);
}

/* ---- Task builder (drawer) ---- */
.tbToolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tbList { margin-top: 4px; }
.tbLeg {
  padding: 3px 4px 3px 26px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
}
.tbLeg::before { content: '↓'; color: var(--fg-muted); margin-left: -14px; }
.tbLegDist { font-weight: 600; }
.tbLegCrs  { color: var(--fg-muted); }
.tbLegHdg  { color: var(--fg); }
.tbLegTime { color: var(--accent, #4a90e2); margin-left: auto; }
.tbLegTime::before { content: '⏱ '; }

/* Per-turnpoint ETA badge + finish ETA + zone button + flight-plan block */
.tbPointGs { flex: 0 0 auto; }
.tbPointEta {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #4a90e2);
}
.tbDuration {
  margin-top: 2px;
  color: var(--fg);
}
.tbFinishEta {
  margin-top: 2px;
  font-weight: 600;
  color: var(--accent, #4a90e2);
}
/* Flight-level summary (FL → MSL at the planned QNH) */
.tbFlSummary { margin-top: 10px; }
.tbFlSummary:empty { margin-top: 0; }
.tbFlTitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.tbFlChips { display: flex; flex-wrap: wrap; gap: 4px; }
.tbFlChip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.tbZoneBtn {
  background: var(--bg-card);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.tbZoneBtn:hover { border-color: var(--accent); color: var(--fg); }
.tbFlightPlan {
  margin: 8px 0 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
}
.tbFpTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
  cursor: pointer;
}
.tbFpTitle:hover { color: var(--fg); }
.tbFpCaret { transition: transform .12s ease; }
/* Collapsed: hide the inputs and drop the title's bottom margin. */
.tbFlightPlan.collapsed .tbFpGrid { display: none; }
.tbFlightPlan.collapsed .tbFpTitle { margin-bottom: 0; }
.tbFlightPlan.collapsed .tbFpCaret { transform: none; }
.tbFlightPlan:not(.collapsed) .tbFpCaret { transform: rotate(90deg); }
.tbFpGrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  align-items: center;
}
.tbFpGrid label { font-size: 12px; color: var(--fg); }
.tbFpGrid input[type=number],
.tbFpGrid input[type=time],
.tbFpSel {
  width: 80px;
  background: var(--bg-input, #1b222b);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 5px;
  font: inherit; font-size: 12px;
}
.tbFpUnit { font-size: 11px; color: var(--fg-muted); }
.modal-card-narrow { max-width: 340px; }
.tbPoint {
  padding: 5px 2px;
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.tbPoint:last-child { border-bottom: none; }
.tbPointRow { display: flex; align-items: center; gap: 6px; }
.tbRole {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.tbRole-start  { color: #fff; background: #3aa55c; border-color: #3aa55c; }
.tbRole-finish { color: #fff; background: #d62728; border-color: #d62728; }
.tbZoneRow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0 26px;
}
.tbZoneType { flex: 0 0 auto; padding: 1px 4px; font-size: 11px; }
.tbZoneRadius {
  width: 64px;
  padding: 1px 4px;
  font-size: 11px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.tbAat { font-size: 11px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.tbPointIdx {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: #d62728;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}
.tbPointName {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbPointName.tbFree { font-style: italic; color: var(--fg-muted); }
.tbRenamable { cursor: text; }
.tbRenamable:hover { text-decoration: underline dotted; }
.tbNameEdit {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--accent, #4a90e2);
  border-radius: 3px;
  padding: 1px 4px;
  font: inherit;
  font-size: 13px;
}
.tbPointElev { flex: 0 0 auto; }
.tbPointDel {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}
.tbPointDel:hover { color: var(--danger, #e63946); }
.tbTotal { margin-top: 8px; font-weight: 600; }

/* Task settings modal — group headers + compact zone/time inputs */
.tsGroupHdr {
  margin: 14px 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
}
.tsTypeSel { flex: 0 0 auto; }
.tsRad  { width: 72px; flex: 0 0 auto; }
.tsTime { width: 96px; flex: 0 0 auto; }

/* Task builder — FAI classification + badge chips */
.tbFai { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.tbFaiType { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.tbFaiTri { font-size: 12px; margin-bottom: 6px; }
.tbFaiTri.tbOk  { color: var(--accent, #4a90e2); }
.tbFaiTri.tbBad { color: var(--danger, #e63946); }
.tbFaiBadges { display: flex; flex-wrap: wrap; gap: 4px; }
.tbBadge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: transparent;
}
.tbBadge.met {
  color: #fff;
  background: var(--accent, #4a90e2);
  border-color: var(--accent, #4a90e2);
}

/* Pick-mode banner — floats on top of the maps while the user is choosing
   a position for a new waypoint. */
.pick-banner {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #4a90e2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 10000;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pick-banner .btn-mini {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.pick-banner .btn-mini:hover { background: rgba(255, 255, 255, 0.3); }

/* Task items reuse .flightItem layout. The head is informational (no click). */
.taskItem .flightItemHead { cursor: pointer; }
.taskItem .flightItemHead:hover { background: rgba(78, 168, 222, .10); }

/* Compact "summary" table inside a task item — used for task type, declared
   date, sum of legs, suggested FAI badge, closed-course flag, etc. */
.taskItemBody table.kv { width: 100%; border-collapse: collapse; }
.taskItemBody table.kv td:first-child {
  width: 45%;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.taskItemBody table.kv td { padding: 3px 6px; font-size: 12px; }

/* Waypoint table inside a task item — one row per WP, OZ details inline. */
.taskWpTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 4px;
}
.taskWpTable th, .taskWpTable td {
  padding: 3px 5px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.taskWpTable th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--bg-card);
}
.taskWpTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.taskWpTable .wpLabel {
  font-weight: 600;
  color: var(--accent);
}
.taskWpTable .wpZone { color: var(--fg-muted); font-style: italic; }

/* Task rows are clickable (seek + pan/fly to that waypoint). Applies to
   both .taskWpTable (Tasks drawer) and .task-table (Flight stats). */
.taskWpTable tbody tr.task-row,
.task-table  tbody tr.task-row { cursor: pointer; }
.taskWpTable tbody tr.task-row:hover,
.task-table  tbody tr.task-row:hover { background: rgba(78, 168, 222, .12); }

.taskBadgeChip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9px;
  background: rgba(78, 168, 222, .15);
  border: 1px solid rgba(78, 168, 222, .4);
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
}
.taskBadgeChip.muted {
  background: transparent;
  border-color: var(--border);
  color: var(--fg-muted);
  font-weight: 400;
}

/* Compare-view — side-by-side flights across whole-flight / task / per-leg
   scopes. Lives inside #drawerFlightsSection alongside the regular list. */
.compareView { margin-top: 4px; }
.compareView.hidden { display: none; }

.compareTabs {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 8px;
}
.compareTab {
  flex: 1;
  background: transparent;
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 4px;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.compareTab:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.compareTab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: rgba(78,168,222,.08);
}

.compareTableWrap {
  overflow: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.cmp-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}
.cmp-table th, .cmp-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cmp-table th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
  text-align: right;
}
/* Pilot column = first th/td, sticky to the left and left-aligned. */
.cmp-table th:first-child, .cmp-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-card);
  text-align: left;
  font-variant-numeric: normal;
}
.cmp-table th:first-child { z-index: 2; }
.cmp-table .cmp-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3);
  margin-right: 5px;
  vertical-align: middle;
}
.cmp-table .cmp-best  { color: #5dd400; font-weight: 700; }
.cmp-table .cmp-worst { color: #8895a4; }
.cmp-table .cmp-na    { color: var(--fg-muted); font-style: italic; }

/* --- Task table: grouped two-row header, sortable columns --- */
.cmp-task thead tr.cmp-grp th { top: 0; }
.cmp-task thead tr.cmp-sub th { top: 19px; font-size: 9px; }
.cmp-task .cmp-grp-th {
  text-align: center;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
/* The Start/Finish "Time" sub-header is a normal scrolling column, NOT the
   pinned first column — override the generic th:first-child stickiness. */
.cmp-task thead tr.cmp-sub th:first-child {
  left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmp-table .cmp-sortable { cursor: pointer; user-select: none; }
.cmp-table .cmp-sortable:hover { color: var(--fg); }
.cmp-table .cmp-sort-asc, .cmp-table .cmp-sort-desc { color: var(--fg); }
.cmp-table .cmp-sort-asc::after  { content: ' \25B4'; }   /* ▴ */
.cmp-table .cmp-sort-desc::after { content: ' \25BE'; }   /* ▾ */
/* Vertical rule separating logical column groups (before Start / Finish /
   the performance block). */
.cmp-table th.cmp-colsep, .cmp-table td.cmp-colsep {
  border-left: 1px solid var(--border);
}

/* Per-leg metric picker bar above the table. */
.compareLegMetric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 6px;
}
.compareLegMetric select {
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
}

.compareNote {
  font-size: 11px;
  color: var(--fg-muted);
  padding: 8px;
  background: var(--bg-elev);
  border-radius: 3px;
  border: 1px dashed var(--border);
  margin-top: 4px;
}

/* Clickable column headers in #flightTable — toggle pin-to-marker. */
.flight-table th.th-pinnable { cursor: pointer; user-select: none; }
.flight-table th.th-pinnable:hover {
  background: rgba(78, 168, 222, .12);
  color: var(--fg);
}
.flight-table th.th-pinned {
  background: rgba(78, 168, 222, .22);
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.flight-table th.th-pinned::before { content: '📌 '; font-size: 10px; }

/* HTML overlay sitting next to each plane marker — multi-line stack with a
   semi-transparent black backdrop so it stays readable over any basemap. */
.mapMarkerLabel {
  position: absolute;
  pointer-events: none;
  color: #fff;
  font: 600 10px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: rgba(0, 0, 0, 0.40);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: pre-line;          /* preserve newlines from textContent */
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9);
  z-index: 600;
}
/* Ver uitgezoomd: enkel de compid, zonder achtergrondkader — alleen tekst met
   een stevige schaduw zodat ze over elke basemap leesbaar blijft. */
.mapMarkerLabel.compact {
  background: none;
  padding: 0 1px;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1), 0 1px 2px rgba(0,0,0,.95);
}

/* SoaringSpot import — per-row state colors inside the modal's flight list. */
#ssImportFlightList li.loading .flightItemName::before { content: '⏳ '; }
#ssImportFlightList li.done    .flightItemName::before { content: '✓ '; color: #38b000; }
#ssImportFlightList li.error   .flightItemName::before { content: '✗ '; color: var(--danger, #e63946); }
#ssImportFlightList li.done    .flightItemHead { background: rgba(56, 176, 0, .08); }
#ssImportFlightList li.error   .flightItemHead { background: rgba(230, 57, 70, .08); }

/* Stats tab bar (only shown in Statistics view inside a flight-item). */
.statsTabs {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.statsTab {
  flex: 1;
  background: transparent;
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 4px;
  font: inherit;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
}
.statsTab:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.statsTab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: rgba(78,168,222,.08);
}
/* PRO-only stats tab (standard users): the ★ in the label hints it's locked. */
.statsTab--pro { color: #f2a900; }

/* Upgrade prompt shown in place of a locked PRO tab's statistics. */
.statsProLock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 34px 22px;
}
.statsProLockStar  { font-size: 2.4rem; line-height: 1; color: #f2a900; }
.statsProLockTitle { font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.statsProLockText  { color: var(--fg-muted); max-width: 320px; line-height: 1.4; }
.statsProLockBtn   { margin-top: 6px; }

/* --- main area shifts when drawer is open --- */
#mainArea {
  position: absolute;
  top: 0;
  bottom: var(--timebar-actual-h);
  right: 0;
  left: var(--iconbar-w);
  transition: left .2s ease;
}
#mainArea.resizing { transition: none; }
#leftDrawer.drawerOpen ~ #mainArea {
  left: calc(var(--iconbar-w) + var(--drawer-w));
}

/* --- split-pane (2D | 3D) — fills #mainArea --- */
#splitRoot {
  position: absolute;
  inset: 0;
  background: #0a0d11;
  overflow: hidden;
}
.splitPane {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #0a0d11;
}
#paneLeft  { left: 0;                                width: calc(50% - var(--divider-w) / 2); }
#paneRight { left: calc(50% + var(--divider-w) / 2); right: 0; }

.splitDivider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--divider-w);
  left: calc(50% - var(--divider-w) / 2);
  background: var(--border);
  cursor: col-resize;
  z-index: 5;
  user-select: none;
}
.splitDivider:hover,
.splitDivider.dragging { background: var(--accent); }

.mapContainer { position: absolute; inset: 0; width: 100%; height: 100%; }

.paneLabel {
  position: absolute;
  top: 8px; right: 12px;
  z-index: 5;
  padding: 2px 8px;
  background: rgba(20, 24, 29, .8);
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: .08em;
  border-radius: 10px;
  pointer-events: none;
}

/* Floating map-mode toggle — top-right corner of #mainArea, visible in all
   modes (sits on top of the panes, not inside them, so 3D-only still shows it). */
.map-mode-btns {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 6;
  gap: 0;
  background: rgba(20, 24, 29, .85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.map-mode-btns .setBtn {
  padding: 3px 9px; min-width: 30px;
  font-size: 11px; border-radius: 4px; border: 0;
  background: transparent; color: var(--fg-muted);
}
.map-mode-btns .setBtn:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.map-mode-btns .setBtn.active { background: var(--accent); color: #fff; }
/* Split screen is PRO-only — subtiele ster voor niet-PRO gebruikers. */
.map-mode-btns .setBtn[data-pro]::after {
  content: '★'; margin-left: 3px; font-size: .85em; color: #f2a900; vertical-align: middle;
}

/* Subtle on-map hint for the task builder (top-left of the map area). */
.map-hint {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 6;
  max-width: 320px;
  padding: 5px 10px;
  background: rgba(20, 24, 29, .8);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.map-hint:hover { color: var(--fg); border-color: var(--accent); }
.map-hint.hidden { display: none; }

/* --- Basic flight instruments — gauge panel in the 3D pane corner --- */
/* Instruments now live in the drawer's Instruments view. */
.instrument-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.gauge { width: 108px; height: 108px; }

/* Persoonlijk logboek (Load-view) — compacte rijen. */
#logbookSection { margin-top: 18px; }
#logbookSection .drawerHeading { margin-bottom: 8px; }
.logbookItem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
}
.logbookItem .lbMain { flex: 1; min-width: 0; }
.logbookItem .lbMain.lbClickable { cursor: pointer; }
.logbookItem .lbTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}
.logbookItem .lbDate  { color: var(--fg-muted); white-space: nowrap; }
.logbookItem .lbRoute { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logbookItem .lbMeta  { margin-top: 1px; font-size: 11px; }
.logbookItem .lbVisRow { margin-top: 3px; }
.logbookItem .lbVis { font-size: 11px; padding: 1px 3px; }
.logbookItem:hover { background: rgba(46,158,84,.10); border-color: var(--accent); }

/* Manual / Excel-import flight: no GPS track → can't be replayed in the viewer.
   Shown dimmed, no hover affordance, with a 'manual' badge. */
.logbookItem.lbNoTrack { opacity: .55; }
.logbookItem.lbNoTrack:hover { background: none; border-color: var(--border); }
.logbookItem .lbManualBadge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Flight already loaded in the viewer: row dimmed + not clickable, with a
   'loaded' badge — so the same flight can't be loaded twice. */
.logbookItem.lbLoaded { opacity: .55; }
.logbookItem.lbLoaded:hover { background: none; border-color: var(--border); }
.logbookItem .lbLoadedBadge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ✎ — bewerk-knopje rechts in een logboek-item. */
.logbookItem .lbEdit {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.logbookItem .lbEdit:hover { color: var(--accent); border-color: var(--accent); }

/* SoaringSpot-import: selecteerbare vluchtenlijst. */
#ssImportFlightList .flightItemHead { display: flex; align-items: center; gap: 8px; }
#ssImportFlightList .ssPick { flex: 0 0 auto; cursor: pointer; }
#ssImportFlightList .flightItemName { cursor: pointer; }
#ssImportFlightList li.loading .flightItemName { opacity: .6; }
#ssImportFlightList li.done  .flightItemName::after  { content: ' ✓'; color: #1f8b4c; }
#ssImportFlightList li.error .flightItemName::after  { content: ' ✗'; color: #c0392b; }

/* Logboek: deel-schakelaar. */
.lbVisRow { margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.lbVis { font: inherit; font-size: 12px; }

/* ===== Browse-modal: compacte resultatentabel (klassement-stijl) ========= */
.modal-card.modal-card-wide { width: 760px; }

/* Filterbalk — alles op één rij, omklappend op smal. */
.flbFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.flbFilterInput {
  flex: 1 1 120px;
  min-width: 0;
  padding: 6px 8px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
  font-size: 12.5px;
}
.flbFilterInput:focus { outline: none; border-color: var(--accent); }
.flbFilterMini { flex: 0 0 76px; }
.flbFilterDate { flex: 0 0 132px; }
.flbFilterUnit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
}
.flbSearchBtn { flex: 0 0 auto; }
.flbStatus { min-height: 1.4em; margin: 6px 0; }

/* Tabel zelf. */
.flbResults {
  max-height: 48vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.flbTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.flbTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  color: var(--fg-muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.flbTable tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.flbTable tbody tr:last-child td { border-bottom: none; }

.flbColPick  { width: 30px; text-align: center; }
.flbColRank  { width: 34px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.flbColKm    { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.flbColPlane { width: 110px; }
.flbColField { width: 130px; }
.flbColDate  { width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flbTable th.flbColKm { text-align: right; }
.flbTable th.flbColPick { text-align: center; }

.flbName { font-weight: 500; }
.flbSub  { font-size: 11px; margin-top: 1px; }

.flbPick { cursor: pointer; }
.flbRow  { cursor: pointer; }
.flbRow:hover { background: rgba(78,168,222,.08); }

/* Laad-voortgang per rij. */
.flbRow.loading { opacity: .6; }
.flbRow.done  { background: rgba(56,176,0,.10); }
.flbRow.error { background: rgba(230,57,70,.10); }
.flbRow.done  .flbColRank::after  { content: ' ✓'; color: #1f8b4c; }
.flbRow.error .flbColRank::after  { content: ' ✗'; color: #c0392b; }

.flbSelCount { white-space: nowrap; }

/* Smalle schermen: filters onder elkaar. */
@media (max-width: 640px) {
  .flbFilterInput, .flbFilterMini, .flbFilterDate { flex: 1 1 100%; }
}
.gaugeSvg { width: 100%; height: 100%; display: block; }
.gaugeBezel { fill: #05080c; stroke: #000; stroke-width: 1; }
.gaugeFace { fill: #0d1116; stroke: #2a3340; stroke-width: 1; }
.gaugeTick { stroke: var(--fg-muted); stroke-width: 0.8; }
.gaugeTick.major { stroke: var(--fg); stroke-width: 1.3; }
.gaugeTickLabel {
  fill: var(--fg-muted); font-size: 7px; text-anchor: middle;
  font-family: ui-monospace, Menlo, monospace;
}
.gaugeTickLabel.big { fill: var(--fg); font-size: 10px; font-weight: 600; }
.gaugeFaceTag {
  fill: var(--fg-muted); font-size: 5px; text-anchor: middle; letter-spacing: .06em;
  font-family: ui-monospace, Menlo, monospace;
}
/* coloured operating-range arcs on the airspeed indicator */
.gaugeBand { fill: none; stroke-width: 3; }
.gaugeBand.green  { stroke: #3fae5a; }
.gaugeBand.yellow { stroke: #e3b341; }
.gaugeBand.red    { stroke: #d8443a; }
/* needles — single white pointer, or long/short pair on the altimeter */
.gaugeNeedle polygon, .gaugeNeedle rect { fill: #e8eef5; }
.gaugeNeedle.long polygon, .gaugeNeedle.long rect { fill: #f4f7fb; }
.gaugeNeedle.short polygon { fill: #9aa6b4; }
.gaugeHub { fill: #aab4c0; stroke: #0d1116; stroke-width: 1; }
.gaugeTitle {
  fill: var(--fg-muted); font-size: 8px; text-anchor: middle; letter-spacing: .08em;
}
.gaugeValue {
  fill: var(--fg); font-size: 16px; font-weight: 700; text-anchor: middle;
  font-family: ui-monospace, Menlo, monospace;
}
.gaugeValue.climb { fill: #4ade80; }
.gaugeValue.sink  { fill: #f87171; }
.gaugeUnit { fill: var(--fg-muted); font-size: 7px; text-anchor: middle; }

/* --- NOTAM info bubble (Google Maps InfoWindow content) --- */
.notamInfo { font-family: ui-monospace, Menlo, monospace; max-width: 320px; color: #1a1a1a; }
.notamInfoHead  { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.notamInfoDates { font-size: 10px; color: #555; margin-bottom: 6px; }
.notamInfoBody  { font-size: 11px; line-height: 1.4; white-space: pre-line; }

/* --- Task airspace-profile panel (bottom of the map area, Tasks mode) --- */
.task-profile-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 240px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex: 0 0 auto;
}
.tp-title { font-weight: 600; }
.tp-readout { margin-left: auto; margin-right: 12px; color: var(--accent, #4a90e2); font-weight: 600; }
/* Collapsed-state reopen tab — sits at the bottom of the map area. */
.task-profile-tab {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 30;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  padding: 3px 14px;
  font-size: 12px;
  cursor: pointer;
}
.task-profile-tab:hover { background: var(--accent, #4a90e2); color: #fff; border-color: var(--accent, #4a90e2); }
.tp-body { flex: 1 1 auto; overflow: hidden; position: relative; }
.tpCursor { stroke: #d62728; stroke-width: 1.5; pointer-events: none; }
.tpTpDist { fill: var(--fg-muted); font-size: 10px; }
.tpEmpty { padding: 16px; color: var(--fg-muted); font-size: 13px; }
.tpSvg { display: block; cursor: crosshair; }
.tpPlotBg { fill: var(--bg-card); }
.tpGrid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.tpAxisLbl { fill: var(--fg-muted); font-size: 10px; }
.tpAxisLblRight { text-anchor: end; }
.tpAxisLblMid   { text-anchor: middle; }
.tpZone { cursor: pointer; }
/* Halo behind zone labels so name + limits stay readable over the bars. */
.tpZoneLbl { font-size: 10px; pointer-events: none; paint-order: stroke; stroke: var(--bg-card); stroke-width: 2.5px; }
.tpZoneLim { font-size: 9px; pointer-events: none; paint-order: stroke; stroke: var(--bg-card); stroke-width: 2.5px; opacity: .9; }
.tpZoneVert { font-size: 9px; }
/* Terrain silhouette along the route. */
.tpTerrain { fill: #6b5439; fill-opacity: .55; stroke: #4f3d28; stroke-width: 1; }
.tpEye { font-size: 11px; cursor: pointer; text-anchor: middle; }
.tpTp { stroke: var(--accent, #4a90e2); stroke-width: 1.5; opacity: .8; }
.tpTpName { fill: var(--fg); font-size: 10px; font-weight: 600; }
.tpTpEta  { fill: var(--accent, #4a90e2); font-size: 10px; }
.tp-tip {
  position: fixed;
  z-index: 100;
  display: none;
  max-width: 240px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  font-size: 12px;
}
.tpTipName { font-weight: 600; margin-bottom: 2px; }
.tpTipMeta { color: var(--fg-muted); margin-bottom: 6px; }

/* --- flight barogram (Flights mode) --- */
.fbParamLabel { font-size: 11px; color: var(--fg-muted); margin-left: 14px; display: inline-flex; align-items: center; gap: 5px; }
.fbParamSelect { font-size: 11px; padding: 1px 4px; }
.fbUnit { font-weight: 600; }
.fbTerrain { fill: rgba(120, 95, 70, .35); stroke: rgba(120, 95, 70, .7); stroke-width: 1; }
.fbCurve   { fill: none; stroke-width: 2; }
.fbEngine  { fill: #c0392b; fill-opacity: .85; }
.fbPhase   { stroke: var(--bg-elev); stroke-width: .5; }
.fbPhaseLbl { fill: #fff; font-size: 8px; font-weight: 600; pointer-events: none; }
.fbReplayDot { fill: #d62728; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.fbHoverLine { stroke: var(--fg-muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.fbZeroLine  { stroke: var(--fg-muted); opacity: .8; }
/* Turnpoints — vertical tick + label badge above the plot. */
.fbTp        { stroke-width: 1; pointer-events: none; stroke-dasharray: 2 2; }
.fbTp-task   { stroke: #9b59b6; }
.fbTp-xc     { stroke: #16a085; }
.fbTp-taskLbl rect { fill: #9b59b6; stroke: #fff; stroke-width: .5; }
.fbTp-xcLbl   rect { fill: #16a085; stroke: #fff; stroke-width: .5; }
.fbTpLblTxt { fill: #fff; font-size: 8px; font-weight: 700; text-anchor: middle; pointer-events: none; }
/* Barogram horizontal scrollbar — track + thumb. */
.fbScroll       { fill: rgba(255,255,255,.06); stroke: var(--border); stroke-width: .5; cursor: pointer; }
.fbScrollThumb  { fill: var(--fg-muted); fill-opacity: .55; stroke: var(--fg-muted); stroke-width: .5; cursor: grab; rx: 2; ry: 2; }
.fbScrollThumb:hover { fill-opacity: .8; }
.fbScrollThumb:active { cursor: grabbing; }

/* --- timebar — full viewer width, anchored to bottom of #viewerRoot --- */
#timebar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  z-index: 10;
  max-height: 40vh;     /* never eat more than 40% of viewer height */
  overflow-y: auto;
}
#timebarMain {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-icon {
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
}
.btn-icon:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-icon:disabled { opacity: .4; cursor: not-allowed; }
.btn-icon.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Barogram airspace toggle — text label, sits left of the close ✕. */
.fbAirspaceToggle { font-size: 12px; margin-right: 8px; }

#timeSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-card);
  outline: none;
}
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-elev);
}
#timeSlider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-elev);
}
#timeSlider:disabled { opacity: .4; }

/* Playback-speed button in the timebar — matches #btnPlay, shows the current
 * multiplier (tabular digits + min-width so the row doesn't jump 1× ↔ 100×). */
.speed-btn { min-width: 3.4em; font-variant-numeric: tabular-nums; }

/* In Live-modus is replay zinloos → play- én snelheidsknop zijn overbodig. */
#viewerRoot[data-mode="live"] #btnPlay,
#viewerRoot[data-mode="live"] #iconSpeed { display: none; }

.time-readout {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--fg);
  min-width: 95px;
  text-align: right;
}

/* --- Flight table (replaces the previous pill rows) --- */
.flight-table-wrap {
  position: relative;
  margin-top: 6px;
  overflow-x: auto;
}
.flight-table {
  /* Fixed layout so column widths come from <colgroup>, not cell contents.
   * This prevents the columns from shifting whenever a value changes. */
  table-layout: fixed;
  width: auto;
  border-collapse: collapse;
  font-family: 'Saira', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.flight-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  padding: 4px 10px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-elev);
  position: sticky; top: 0; z-index: 1;
}
.flight-table tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid #2a323d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}
.flight-table thead th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.flight-table tbody tr:last-child td { border-bottom: none; }
.flight-table tbody tr.flight-row { cursor: pointer; }
.flight-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.flight-table tbody tr.selected td {
  background: rgba(78, 168, 222, .12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.flight-table .cell-color { width: 14px; padding-right: 4px; padding-left: 12px; }
.flight-table .flightColorSwatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.3);
}
.flight-table .cell-name { color: var(--fg); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.flight-table td.muted { color: var(--fg-muted); }

/* Leading pin-toggle column in the detail table. */
.flight-table .cell-pin { width: 30px; text-align: center; padding-left: 10px; padding-right: 0; }
.flight-table .pinBtn {
  background: none; border: none; cursor: pointer;
  padding: 0; font-size: 11px; line-height: 1;
  opacity: .3;
}
.flight-table .pinBtn.pinned { opacity: 1; }
.flight-table .pinBtn:hover { opacity: 1; }
/* Live rows use the leading cell as a Remove control (no pin state in Live) —
   keep it clearly visible, and tint it on hover like the other danger actions. */
.flight-table .pinBtn.removeBtn { opacity: .6; }
.flight-table .pinBtn.removeBtn:hover { opacity: 1; color: #e06c6c; }

/* Column-picker dropdown */
.col-picker-btn {
  position: absolute;
  top: 2px;
  left: 6px;
  padding: 2px 8px;
  font-size: 13px;
  background: var(--bg-card);
  z-index: 2;
}
.column-picker {
  /* Anchored just above the timebar, against the left edge — under the
   * column-picker button — so it has the full map-area height to expand into
   * rather than the (short) timebar. */
  position: absolute;
  bottom: calc(var(--timebar-actual-h) + 4px);
  left: 8px;
  width: 380px;
  max-height: calc(100vh - var(--header-h) - var(--timebar-actual-h) - 24px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.column-picker.hidden { display: none; }
.column-picker .cp-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 4px 12px 6px;
  border-bottom: 1px solid var(--border);
  letter-spacing: .06em;
}
.column-picker .cp-list { max-height: 480px; overflow-y: auto; }
.column-picker label.cp-row {
  display: grid;
  grid-template-columns: 18px 70px 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.column-picker label.cp-row:hover { background: var(--bg-elev); }
.column-picker label.cp-row input { margin: 0; justify-self: center; align-self: center; }
.column-picker .cp-abbr {
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.column-picker .cp-desc {
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.3;
}

/* --- Phase table (per-flight, inside expanded drawer item) --- */
.phase-table-wrap {
  overflow-x: auto;
  margin: 0 -6px;     /* extend slightly past the subsection padding */
  max-height: 280px;
  overflow-y: auto;
}
.phase-table {
  border-collapse: collapse;
  font-family: 'Saira', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  width: 100%;
  min-width: 760px;
}
.phase-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10.5px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-card);
  position: sticky; top: 0;
}
.phase-table tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid #2a323d;
  white-space: nowrap;
  color: var(--fg);
}
.phase-table tbody tr:last-child td { border-bottom: none; }
.phase-table tbody tr.clickable { cursor: pointer; }
.phase-table tbody tr.clickable:hover td {
  background: rgba(78,168,222,.10);
}
.phase-table tbody tr.clickable:active td {
  background: rgba(78,168,222,.20);
}
/* Free-flight legs table is wide and scrolls horizontally — pin the leg-name
   column so it stays in view. Opaque backgrounds prevent the scrolling cells
   from showing through; the top-left corner sits above both sticky axes. */
.phase-table[data-role="ffl"] tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-elev);
}
.phase-table[data-role="ffl"] thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card);
}
/* Keep the pinned column opaque on hover/active (no see-through tint). */
.phase-table[data-role="ffl"] tbody tr.clickable:hover  td:first-child,
.phase-table[data-role="ffl"] tbody tr.clickable:active td:first-child {
  background: var(--bg-elev);
}

.phase-table .phase-mode      { font-weight: 600; }
.phase-table .phase-icon      { display: inline-block; width: 16px; text-align: center; }

/* Subtle per-mode tint on the row */
.phase-table tr.phase-tow         td:first-child { border-left: 3px solid #f4a261; padding-left: 6px; }
.phase-table tr.phase-attempt     td:first-child { border-left: 3px solid #a3a335; padding-left: 6px; }
.phase-table tr.phase-circling    td:first-child { border-left: 3px solid #38b000; padding-left: 6px; }
.phase-table tr.phase-cruise      td:first-child { border-left: 3px solid #4ea8de; padding-left: 6px; }
.phase-table tr.phase-finalGlide  td:first-child { border-left: 3px solid #bc4ec7; padding-left: 6px; }
.phase-table tr.phase-ground      td:first-child { border-left: 3px solid var(--fg-muted); padding-left: 6px; }
.phase-table tr.phase-engine      td:first-child { border-left: 3px solid #34495e; padding-left: 6px; }
/* Attempts are weak circling — visually de-emphasise the row */
.phase-table tr.phase-attempt     td                  { color: var(--fg-muted); }

/* Fixed milestone markers (takeoff, release, task start/finish, XC start,
 * landing) interleaved between phase rows. Distinct banded look so they read
 * as moments rather than spans. */
.phase-table tr.phase-event td {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.phase-table tr.phase-event td:first-child { border-left: 3px solid var(--accent); padding-left: 6px; }
.phase-table tr.phase-event.clickable:hover td { background: var(--bg-card); }

/* Stats label drawn on the 2D map for a highlighted phase segment
 * (PhaseHighlighter). Rendered as a Google Maps marker label, styled here as a
 * small dark pill so it stays readable over the map. */
.phaseHlLabel {
  background: rgba(20, 24, 29, 0.85);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --- Task crossings table (Task tab) --- */
.task-table-wrap {
  overflow-x: auto;
  margin: 0 -6px;
  max-height: 360px;
  overflow-y: auto;
}
.task-table {
  border-collapse: collapse;
  font-family: 'Saira', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  width: 100%;
  min-width: 720px;
}
.task-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10.5px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-card);
  position: sticky; top: 0;
}
.task-table tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid #2a323d;
  white-space: nowrap;
  color: var(--fg);
}
.task-table tbody tr.task-total td {
  font-weight: 600;
  background: rgba(78,168,222,.06);
  border-top: 1px solid var(--border);
}
/* Engine-on-task: a crossing flown after the engine fired doesn't count →
   muted + struck through. The terminated total row and its note use an amber
   tint to flag that the task ended early on engine, not at a finish. */
.task-table  tbody tr.task-after-engine td,
.taskWpTable tbody tr.task-after-engine td {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, .35);
}
.task-table  tbody tr.task-total.task-motor-end td,
.taskWpTable tbody tr.task-total.task-motor-end td {
  background: rgba(230, 160, 60, .12);
}
.task-table  tbody tr.task-note td,
.taskWpTable tbody tr.task-note td {
  font-size: 12px;
  white-space: normal;
  color: var(--fg-muted);
  background: rgba(230, 160, 60, .06);
}

/* --- overlays --- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 17, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.overlay.hidden { display: none; }
.overlay-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 36px;
  text-align: center;
  max-width: 480px;
}
.overlay-card h2 { margin: 0 0 12px; font-weight: 500; }
.muted { color: var(--fg-muted); font-size: 13px; }

#dropOverlay {
  background: rgba(78, 168, 222, .25);
  border: 3px dashed var(--accent);
  pointer-events: none;
}
#dropOverlay .overlay-card {
  background: var(--bg-elev);
  border-color: var(--accent);
}

/* --- Map-mode variants of the split pane --- */
#splitRoot.mode-2d-only #paneRight,
#splitRoot.mode-2d-only #viewerDivider { display: none; }
#splitRoot.mode-2d-only #paneLeft      { width: 100% !important; left: 0 !important; }

#splitRoot.mode-3d-only #paneLeft,
#splitRoot.mode-3d-only #viewerDivider { display: none; }
#splitRoot.mode-3d-only #paneRight     { left: 0 !important; right: 0 !important; width: auto !important; }

/* --- Settings modal --- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 520px;
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 500; }
.modal-close {
  background: transparent;
  color: var(--fg-muted);
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--fg); }

.modal-body  { padding: 6px 18px; overflow-y: auto; }
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
}
.modal-footer .btn { flex: 1; }

/* Settings rows */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2a323d;
}
.settings-row:last-child { border-bottom: none; }
.settings-label {
  flex: 0 0 130px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fg);
}
.settings-hint {
  font-size: 11px;
  color: var(--fg-muted);
  font-style: italic;
}

.btn-group { display: flex; gap: 6px; }
.setBtn {
  width: 38px; height: 32px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.setBtn:hover  { background: var(--bg-elev); border-color: var(--fg-muted); }
.setBtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.setBtn:disabled { opacity: .35; cursor: not-allowed; }

.settings-select {
  flex: 1;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
}
.settings-select:disabled { opacity: .5; }

.settings-range {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-card);
  outline: none;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  cursor: pointer;
}
.settings-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  cursor: pointer;
  border: none;
}
.settings-range:disabled { opacity: .4; }

/* Switch (iOS-style toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  margin-left: auto;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: background .15s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; top: 2px;
  background: var(--fg-muted);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.switch input:checked + .slider {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.switch input:checked + .slider::before {
  transform: translateX(16px);
  background: #fff;
}
.switch.disabled .slider { cursor: not-allowed; opacity: .45; }

.badge-pro {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  background: var(--accent-2);
  color: #0d2;
  background: #213d2c;
  color: var(--accent-2);
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: .08em;
}

/* ===================== Airspace ===================== */

/* Class-colour legend chips in the airspace drawer panel. */
.airspaceLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 4px 0 2px;
}
.airspaceLegend .as-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  padding: 1px 4px;
  border-radius: 4px;
}
.airspaceLegend .as-legend-item:hover { background: var(--bg-elev); }
.airspaceLegend .as-legend-item.as-off {
  opacity: .4;
  text-decoration: line-through;
}
.airspaceLegend .as-legend-sw {
  width: 11px; height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.4);
}

/* Searchable zone list. */
.airspaceZoneList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.airspaceZoneList li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.airspaceZoneList li:last-child { border-bottom: none; }
.airspaceZoneList li:hover { background: var(--bg-elev); }
.airspaceZoneList li.as-hidden { opacity: .42; }
.airspaceZoneList .as-sw {
  width: 11px; height: 11px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.4);
}
.airspaceZoneList .as-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.airspaceZoneList .as-alt {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.airspaceZoneList .as-eye {
  flex-shrink: 0;
  font-size: 12px;
  width: 18px; text-align: center;
}

/* Source lists — country checkboxes + uploaded files. */
.airspaceSrcList {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.airspaceSrcList.hidden { display: none; }

/* Google Maps InfoWindow chrome (used by the thermal-scanner + NOTAM bubbles).
   Kill the empty header space reserved for the (disabled) close button, and drop
   the rounded corners + border for a clean square bubble. */
.gm-style-iw-ch { padding-top: 0 !important; }
.gm-style .gm-style-iw-c {
  border-radius: 0 !important;
  border: 0 !important;
  padding: 8px 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; }   /* no inner scroll gutter */
.gm-style .gm-style-iw-tc::after { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* NOTAM list — group header per ICAO (Item A). */
.airspaceZoneList li.notam-group {
  cursor: default;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--fg);
  background: var(--bg-elev);
  padding: 5px 8px;
  border-top: 1px solid var(--border);
}
.airspaceZoneList li.notam-group:hover { background: var(--bg-elev); }

/* ========================== Task print preview =========================== */
/* Full-screen overlay: settings sidebar on the left, scrollable A4 sheet right. */
.ppOverlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: row;
  background: rgba(10, 13, 17, .96);
}
.ppOverlay.hidden { display: none; }
.ppSidebar {
  flex: 0 0 290px; width: 290px; overflow: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 18px;
  background: var(--bg-elev, #1b222b);
  border-right: 1px solid var(--border);
}
.ppSideHead { display: flex; flex-direction: column; gap: 10px; }
.ppBarTitle { font-weight: 600; font-size: 14px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.ppToggle {
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}
.ppToggle:hover { background: rgba(255, 255, 255, .06); }
/* Collapsed sidebar (toggle on desktop): hide settings, keep a narrow strip
   with the ☰ button so the user can re-open. Scoped to desktop because on
   mobile (max-width:800px) the toggle has the OPPOSITE meaning — there it
   EXPANDS the overlay sidebar. */
@media (min-width: 801px) {
  .ppOverlay.ppSidebarToggled .ppSidebar {
    flex: 0 0 44px; width: 44px; padding: 8px 6px; gap: 0;
  }
  .ppOverlay.ppSidebarToggled .ppSidebar > *:not(.ppSideHead) { display: none; }
  .ppOverlay.ppSidebarToggled .ppSidebar .ppActions,
  .ppOverlay.ppSidebarToggled .ppSidebar .ppBarTitleText { display: none; }
}
.ppActions { display: flex; gap: 8px; }
.ppGroup { display: flex; flex-direction: column; gap: 7px; }
.ppGroupTitle {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.ppOpt  { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); cursor: pointer; }
.ppOpt input[type=checkbox] { width: 15px; height: 15px; }
.ppOpt-soon { color: var(--fg-muted); cursor: default; }
.ppOpt-soon em { font-style: normal; opacity: .8; }
.ppHint { font-size: 10px; text-transform: none; letter-spacing: 0; opacity: .7; }
/* Reorderable include list. */
.ppParts { display: flex; flex-direction: column; gap: 2px; }
.ppPart {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 4px; border: 1px solid transparent; border-radius: 4px;
}
.ppPart:hover { background: rgba(255, 255, 255, .04); }
.ppPart.ppDragging { opacity: .45; }
.ppPart .ppOpt { flex: 1 1 auto; margin: 0; }
.ppDrag { cursor: grab; color: var(--fg-muted); font-size: 13px; line-height: 1; user-select: none; }
.ppDrag:active { cursor: grabbing; }
.ppSubLabel { font-size: 12px; color: var(--fg-muted); }
.ppNum {
  width: 56px; background: var(--bg-input, #1b222b); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; font: inherit; font-size: 12px;
}
.ppCmt { display: flex; flex-direction: column; gap: 4px; }
.ppCmt .ppSubLabel em { font-style: normal; opacity: .7; }
.ppCmt textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-input, #1b222b); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px; padding: 4px 6px;
  font: inherit; font-size: 12px; line-height: 1.35;
}
.ppScroll {
  flex: 1 1 auto; overflow: auto; padding: 24px;
  display: flex; justify-content: center; align-items: flex-start;
}

/* Mobile / narrow viewport: same toggle, opposite default. Sidebar is
   collapsed unless ppSidebarToggled is set (then it overlays the sheet). */
@media (max-width: 800px) {
  .ppOverlay .ppSidebar { flex: 0 0 44px; width: 44px; padding: 8px 6px; gap: 0; }
  .ppOverlay .ppSidebar > *:not(.ppSideHead) { display: none; }
  .ppOverlay .ppSidebar .ppActions,
  .ppOverlay .ppSidebar .ppBarTitleText { display: none; }
  .ppOverlay.ppSidebarToggled .ppSidebar {
    position: absolute; inset: 0 auto 0 0; z-index: 5;
    flex: 0 0 280px; width: 280px; padding: 16px; gap: 18px;
    box-shadow: 4px 0 12px rgba(0, 0, 0, .35);
  }
  .ppOverlay.ppSidebarToggled .ppSidebar > * { display: flex; }
  .ppOverlay.ppSidebarToggled .ppSidebar .ppActions,
  .ppOverlay.ppSidebarToggled .ppSidebar .ppBarTitleText { display: inline; }
  /* Bigger tap target for the toggle on mobile so it's hard to miss when
     the sidebar is collapsed to its 44 px strip. */
  .ppToggle { width: 36px; height: 36px; font-size: 18px; }
  .ppScroll { padding: 12px; }
  .ppSheet { width: 100%; min-height: 0; padding: 8mm !important; }
}

/* The A4 sheet — identical look on screen and on paper. */
.ppSheet {
  width: 210mm; min-height: 297mm; box-sizing: border-box;
  padding: 14mm; background: #fff; color: #000;
  font: 12px/1.45 'Saira', system-ui, sans-serif;   /* TEST: Saira everywhere */
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
.ppSheet * { color: #000; }

.printHeader {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid #000; margin-bottom: 12px; padding-bottom: 6px;
}
.printHeadLeft { min-width: 0; }
.printTitle  { font-size: 20px; font-weight: 700; }
.printMeta   { font-size: 12px; color: #444; margin-top: 2px; }
.ppSheet .printLogo {
  font-family: 'Saira', system-ui, sans-serif; font-weight: 400;
  font-size: 18px; letter-spacing: .04em; color: #000; white-space: nowrap;
}
.printBlock  { margin: 0 0 16px; page-break-inside: avoid; }
.printBlockTitle {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #555; margin: 0 0 6px; border-bottom: 1px solid #bbb; padding-bottom: 2px;
}
.printPlanGrid { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; max-width: 360px; }
.printPlanKey  { color: #555; }
.printPlanVal  { font-weight: 600; }
.printMapNote  { font-style: italic; color: #777; }

/* Route map plot. */
.printMapWrap { border: 1px solid #999; overflow: hidden; }
.printMapSvg  { display: block; width: 100%; height: auto; overflow: hidden; }
.pmAsp { stroke-linejoin: round; }
.pmBg   { fill: #f4f1ea; }
.pmLeg  { fill: none; stroke: #1a73e8; stroke-width: 2.5; stroke-linejoin: round; }
.pmPt        { fill: #1a73e8; stroke: #fff; stroke-width: 1.5; }
.pmPt-start  { fill: #3aa55c; }
.pmPt-finish { fill: #d62728; }
.pmPtLbl { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.pmName  { fill: #222; font-size: 12px; font-weight: 600; text-anchor: middle; }
.pmAspLbl { fill: #333; font-size: 9px; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 2px; }
/* Airfield dots on the map. */
.pmAf    { fill: #6a1b9a; stroke: #fff; stroke-width: 1; }
.pmAfLbl { fill: #6a1b9a; font-size: 9px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 2px; }
/* NOTAM circles + their N1..Nn labels on the map. */
.pmNotamLbl { fill: #c66400; font-size: 9px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 2px; }

/* NOTAMs-near-task list. */
.printNotamList { list-style: decimal inside; padding: 0; margin: 0; font-size: 11px; }
.printNotamItem { padding: 5px 0; border-bottom: 1px solid #eee; }
.printNotamItem:last-child { border-bottom: none; }
.printNotamHead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.printNotamId   { font-weight: 700; color: #c66400; }
.printNotamCountry {
  display: inline-block; padding: 0 5px; border-radius: 3px;
  background: #f3e1c8; color: #8a4a00; font-size: 10px; font-weight: 700;
  letter-spacing: .03em;
}
.printNotamWhen { color: #555; font-variant-numeric: tabular-nums; }
.printNotamMeta { color: #777; font-size: 10px; }
.printNotamText { margin-left: 18px; color: #222; }
.printNotamHead { position: relative; padding-right: 22px; }
.printNotamHide {
  position: absolute; top: 0; right: 0;
  width: 18px; height: 18px;
  border: 1px solid #ccc; background: #fff; color: #777;
  border-radius: 3px; font-size: 10px; line-height: 16px;
  cursor: pointer; padding: 0;
}
.printNotamHide:hover { color: #c66400; border-color: #c66400; }

/* Airfields-on-track table. */
.printAfTable { width: 100%; border-collapse: collapse; font-size: 11px; }
.printAfTable th {
  text-align: left; color: #555; font-weight: 600; border-bottom: 1px solid #999;
  padding: 3px 6px; white-space: nowrap;
}
.printAfTable td { padding: 3px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.printAfTable .afName  { font-weight: 600; }
.printAfTable .afFreq  { font-size: 10px; }
.ppSheet .afNum,
.ppSheet .afNumc  { text-align: right; white-space: nowrap; }

/* Airspace-on-track table. */
.printAsTable { width: 100%; border-collapse: collapse; font-size: 11px; }
.printAsTable th {
  text-align: left; color: #555; font-weight: 600; border-bottom: 1px solid #999;
  padding: 3px 6px; white-space: nowrap;
}
.printAsTable td { padding: 3px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.printAsTable .asName { font-weight: 600; }
.printAsTable .asClsTd { white-space: nowrap; }
.asSwatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; border: 1px solid rgba(0,0,0,.3); }
.printAsTable .asLimTxt { display: block; }
.printAsTable .asLimM   { display: block; font-size: 9px; color: #777; }

/* Free-text comment blocks. */
.printComment { white-space: pre-wrap; font-size: 12px; line-height: 1.4; }

/* Section profile — print palette overrides. */
.printSectionSvg svg { width: 100%; height: auto; }
.ppSheet .tpPlotBg { fill: #fff; }
.ppSheet .tpGrid   { stroke: #ccc; opacity: 1; }
.ppSheet .tpAxisLbl, .ppSheet .tpTpDist { fill: #555; }
.ppSheet .tpTpName { fill: #000; }
.ppSheet .tpTpEta  { fill: #1a4f8a; }
/* White halo on paper so zone labels read over the bars. */
.ppSheet .tpZoneLbl, .ppSheet .tpZoneLim { stroke: #fff; }

/* Waypoints list — uniform style, " | " separated fields, map-coloured dots. */
.ppSheet .pwList  { list-style: none; margin: 0; padding: 0; }
.ppSheet .pwPoint {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid #eee;
}
.ppSheet .pwDot {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700; background: #1a73e8;
}
.ppSheet .pwDot-start  { background: #3aa55c; }
.ppSheet .pwDot-finish { background: #d62728; }
.ppSheet .pwDot-tp     { background: #1a73e8; }
.ppSheet .pwName   { font-weight: 600; }
.ppSheet .pwFields { color: #555; font-size: 11px; }
.ppSheet .pwLeg    { color: #888; font-size: 10px; padding: 2px 0 2px 26px; }
/* FL chips inherit the dark theme bg via var(); force a light pill on paper. */
.ppSheet .tbFlTitle { color: #555; }
.ppSheet .tbFlChip {
  border: 1px solid #999; border-radius: 10px; padding: 1px 7px; font-size: 11px;
  background: #eee; color: #222;
}

@media print {
  /* Only intercept printing while the preview is open (Ctrl+P inside it, or
     the Print button). Hide the app; let just the sheet flow onto paper.
     Everything must be plain block flow (no flex / fixed / overflow) so the
     content paginates across multiple pages. */
  body.pp-open > *:not(#taskPrintPreview) { display: none !important; }
  /* The app pins html/body to one viewport (overflow:hidden) — release it so
     the sheet can flow onto as many pages as it needs. */
  html, body.pp-open { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.pp-open .ppOverlay {
    position: static !important; display: block !important;
    overflow: visible !important; background: #fff !important;
  }
  body.pp-open .ppSidebar { display: none !important; }
  body.pp-open .ppScroll {
    display: block !important; overflow: visible !important; padding: 0 !important;
  }
  body.pp-open .ppSheet {
    width: auto !important; min-height: 0 !important; overflow: visible !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  }
  @page { margin: 12mm; }
  body.pp-open .no-print { display: none !important; }
}
.airspaceSrcList .as-src-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}
.airspaceSrcList .as-src-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  cursor: pointer;
}
.airspaceSrcList .as-src-row .as-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.airspaceSrcList .as-src-rm {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.airspaceSrcList .as-src-rm:hover { color: var(--danger, #c0392b); }

/* Vertical cross-section panel — floats over the map. */
.airspace-profile {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
  z-index: 60;
  overflow: hidden;
}
.airspace-profile.hidden { display: none; }
.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}
.ap-close {
  background: none; border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.ap-close:hover { color: var(--fg); }

/* Profile body: a plain textual stack of the airspaces over the point,
   sorted ceiling-high → low. Scrolls when there are many. */
.ap-body {
  max-height: 60vh;
  overflow-y: auto;
}
.ap-list { list-style: none; margin: 0; padding: 0; }
.ap-row {
  border-bottom: 1px solid var(--border);
}
.ap-row:last-child { border-bottom: none; }
.ap-row.as-hidden { opacity: .45; }
.ap-row-head {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.ap-row-head:hover { background: var(--bg-elev); }
.ap-row-bar {
  flex: 0 0 4px;
  border-radius: 2px;
}
.ap-row-main { flex: 1; min-width: 0; }
.ap-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-row-sub {
  font-size: 10.5px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.ap-row-edit, .ap-row-eye {
  flex: 0 0 18px;
  align-self: center;
  text-align: center;
  font-size: 12px;
}
.ap-row-edit {
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
}
.ap-row-edit:hover, .ap-row-edit.on { color: var(--fg); }
.ap-row-code {
  margin: 0;
  padding: 8px 10px 10px 22px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
  max-height: 280px;
  overflow-y: auto;
}
textarea.ap-row-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 160px;
  border: 0;
  border-top: 1px solid var(--border);
  outline: none;
  resize: vertical;
  tab-size: 2;
}
textarea.ap-row-code:focus { background: var(--bg); }
.ap-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 11px;
}
.ap-section-title {
  margin: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.ap-notam-row .ap-row-head { cursor: pointer; }
.ap-notam-body {
  margin: 0;
  padding: 0 10px 8px 22px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 2.8em;
}
.ap-notam-row.expanded .ap-notam-body {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  color: var(--fg);
  white-space: pre-wrap;
}

/* ===========================================================================
   MOBIEL (≤640px) — staat bewust onderaan zodat deze regels ná alle
   basisregels komen en bij gelijke specificiteit winnen.
   =========================================================================== */
@media (max-width: 640px) {
  /* --- mobiel startscherm: #headerMenu = volledig-scherm modus-keuze --- */
  .nav-toggle { display: none; }          /* hamburger weg */

  #headerMenu {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    background: var(--bg-elev);
    z-index: 60;                            /* boven iconbar/drawer/header */
    padding: 32px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
    overflow-y: auto;
  }
  #appHeader.home-open #headerMenu { display: flex; }

  .mobileHomeTitle {
    display: block;
    text-align: center;
    /* Match the desktop header logo (.logo .logo-main, app.css): plain Saira,
       normal weight, no extra tracking — not the old bold/letter-spaced look. */
    font-weight: 400; letter-spacing: normal; font-size: 30px;
    color: var(--fg);
    margin: 0 0 28px;
  }

  /* mode-tabs → 3 grote, gecentreerde keuzeknoppen */
  .mode-tabs {
    flex: 0 0 auto; flex-direction: column; gap: 14px;
    margin: 0 auto; width: 100%; max-width: 360px;
  }
  .mode-tab {
    height: auto; padding: 20px 18px; text-align: center;
    font-size: 17px; letter-spacing: .02em;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-card); color: var(--fg);
  }
  .mode-tab.active { border-color: var(--accent); background: rgba(78,168,222,.10); }

  /* account-links onderaan het startscherm, compact en gecentreerd */
  .header-nav {
    flex: 0 0 auto; flex-direction: column; align-items: stretch;
    width: 100%; max-width: 360px; margin: 28px auto 0;
    border-top: 1px solid var(--border); padding-top: 8px;
  }
  .header-nav .nav-link,
  nav button.nav-link { margin: 0; padding: 13px 8px; text-align: center; font-size: 14px; }
  .admin-menu { margin-left: 0; }
  .admin-menu > summary { padding: 13px 8px; text-align: center; }
  .admin-menu-list { position: static; box-shadow: none; border: none; padding: 0; min-width: 0; }
  .user-menu { margin-left: 0; }
  .user-menu > summary { padding: 13px 8px; justify-content: center; }

  /* Geen zwarte headerbalk: hoogteloos/transparant; de kaart vult vanaf boven. */
  .logo { display: none; }
  #appHeader {
    height: 0; padding: 0; border-bottom: none; background: transparent;
    z-index: 50;
  }
  #viewerRoot { top: 0; }
  /* 2D-kaartknoppen (satelliet/labels, LEFT_TOP) — geen zwevende hamburger meer. */
  .mapCtl.mapCtl-2d { margin-top: 8px; }

  /* Home-knop bovenaan de iconbar + mobiele account-knop (zichtbaar zodra het
     linkermenu openschuift). */
  .iconHome,
  .icon-mobile-only { display: flex; }

  /* Instruments-weergave (gauges) heeft geen zin op een klein scherm — verberg
     de knop in het linkermenu (iconbar) op mobiel. */
  #iconAct-instruments { display: none; }

  /* Kaart vult de volle breedte: iconbar én drawer liggen er als overlay over,
     dus #mainArea reserveert geen iconbar/drawer-ruimte (anders blijft er een
     lege zwarte strook links staan). */
  #mainArea,
  #leftDrawer.drawerOpen ~ #mainArea { left: 0; }

  /* Alleen de split-knop (2/3D) verbergen op mobiel: twee kaarten naast elkaar
     is onbruikbaar op een smal scherm. 2D en 3D blijven wél schakelbaar. */
  .map-mode-btns .setBtn[data-value="split"] { display: none; }

  /* Mocht de opgeslagen voorkeur toch 'split' zijn (PRO-gebruiker), toon dan de
     2D-kaart vol scherm i.p.v. een geknelde dubbele weergave. Alleen de split-
     toestand wordt geraakt (geen mode-2d-only/3d-only), zodat de 3D-only-modus
     — en dus het togglen naar 3D — volledig intact blijft. */
  #splitRoot:not(.mode-2d-only):not(.mode-3d-only) #paneRight,
  #splitRoot:not(.mode-2d-only):not(.mode-3d-only) #viewerDivider { display: none; }
  #splitRoot:not(.mode-2d-only):not(.mode-3d-only) #paneLeft {
    left: 0; right: 0; width: 100%;
  }

  /* Linkermenu (iconbar + drawer) standaard verbergen; tonen als overlay via de
     uitvouwknop linksonder (#leftNavToggle togglet #viewerRoot.leftNavOpen). */
  #iconBar {
    top: 0;                          /* tegen de bovenrand — geen lege strook */
    transition: transform .2s ease;
    transform: translateX(-100%);
    padding-bottom: 52px;            /* houd de onderste icoon vrij van de knop */
  }
  /* z-index boven de barogram (z30) zodat het geopende menu óver de grafiek
     schuift i.p.v. eronder. Blijft onder de uitvouwknop (z45) en header (z50). */
  #viewerRoot.leftNavOpen #iconBar { transform: translateX(0); z-index: 36; }

  /* Drawer: geopend vult hij de volledige breedte naast de iconbar; gesloten
     is hij volledig onzichtbaar (visibility flipt ná de uitschuif-animatie). */
  #leftDrawer {
    top: 0;                          /* gelijk met de iconbar */
    width: calc(100vw - var(--iconbar-w));
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  #viewerRoot:not(.leftNavOpen) #leftDrawer { transform: translateX(-100%); }
  #viewerRoot.leftNavOpen #leftDrawer.drawerOpen {
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s ease;
    z-index: 35;                      /* óver de barogram (z30) */
  }
  #drawerResizer { display: none; }   /* op volle breedte heeft slepen geen zin */

  /* Minder lege ruimte bovenaan: de laad-knoppen schuiven tegen de bovenrand
     i.p.v. de standaard 14px sectiepadding. */
  #drawerLoadSection { padding-top: 6px; }

  .left-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute;
    left: 8px;
    bottom: calc(var(--timebar-actual-h) + 10px);
    width: 40px; height: 40px;
    padding: 0;
    z-index: 45;                     /* boven iconbar/drawer/barogram */
    background: var(--bg-elev);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    cursor: pointer;
  }
  .left-nav-toggle svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
  }
  #viewerRoot.leftNavOpen .left-nav-toggle svg { transform: rotate(180deg); }

  /* Barogram: het 'Parameter'-label weg — de dropdown spreekt voor zich. */
  .fbParamLabelText { display: none; }
  .fbParamLabel { margin-left: 0; }

  /* --- compactere onderbalken op mobiel --- */
  /* Barogram lager + strakke header (scrollbar is weg; swipe pant de grafiek). */
  .task-profile-panel { height: 158px; }
  .tp-header { padding: 3px 8px; }
  .tp-readout { margin-right: 6px; font-size: 11px; }
  .fbScroll, .fbScrollThumb { display: none; }   /* vangnet: nooit een scrollbar */

  /* Play-bar (timebar) compacter: minder padding, kleinere readout/knop. */
  #timebar { padding: 4px 8px; max-height: 34vh; }
  #timebarMain { gap: 6px; }
  #btnPlay { padding: 3px 9px; }
  .time-readout { min-width: 0; font-size: 11px; }
  .flight-table-wrap { margin-top: 4px; }
  .flight-table { font-size: 10.5px; }

  /* Kolomkiezer: vol-breedte binnen beeld i.p.v. 380px die half buiten het
     scherm valt — anders kun je op mobiel geen velden aanvinken. */
  .column-picker {
    left: 8px; right: 8px; width: auto;
    max-height: 60vh;
  }
  .column-picker label.cp-row { padding: 8px 12px; }   /* ruimere tik-doelen */
}