/* Field Mission Planner — UI theme.
   Minimalist field-ops dark UI: calm neutral surfaces, one restrained accent,
   flat controls (no glow/gradients), high contrast for sunlight, generous tap
   targets, and steps grouped into quiet, readable sections. */
:root {
  --bg: #0b0e12;
  --panel: #10151b;
  --panel-2: #151b22;       /* raised surfaces (stats / HUD / bands) */
  --inset: #0c1116;         /* recessed surfaces (inputs) */
  --line: #1e2831;
  --line-soft: #171f27;
  --text: #e8edf2;
  --text-dim: #93a1ad;
  /* Hints are the smallest text in the app and are read in sunlight, so this tone
     must clear WCAG AA (4.5:1) on both --panel and --panel-2. #64717d was 3.67:1. */
  --text-faint: #7a8895;
  /* Two accent roles: --accent for strokes/icons/text on dark (5.0:1 on --panel),
     --accent-fill for FILLED surfaces that carry white 14px labels (4.6:1 vs #fff;
     the lighter --accent only reached 3.7:1 there). Hover lifts a fill to --accent. */
  --accent: #3f80ff;
  --accent-fill: #2f6fe6;
  --accent-hi: #5c93ff;
  --accent-dim: rgba(63, 128, 255, 0.14);
  --ok: #56c596;
  --warn: #e5b567;
  --danger: #ec6a63;
  --radius: 8px;
  --radius-sm: 6px;
  /* Map chrome (Leaflet controls drawn over satellite imagery): the same dark
     surfaces as the panel, translucent so the map stays readable underneath. */
  --map-ctrl: rgba(16, 21, 27, 0.92);
  --map-ctrl-hi: rgba(31, 41, 51, 0.96);
  --map-line: rgba(255, 255, 255, 0.14);
  --ctrl-size: 34px;          /* map buttons on a mouse-driven screen */
  /* Icons for controls whose glyph comes from a library sprite (Leaflet / Leaflet.draw):
     used as a CSS mask so the icon takes a theme colour like the inline .ic SVGs do. */
  --ic-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 3 8l9 4.8L21 8z'/%3E%3Cpath d='M3.4 13 12 17.6 20.6 13'/%3E%3C/svg%3E");
  --ic-polygon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 20.4 9.5 17.2 19.4H6.8L3.6 9.5z'/%3E%3C/svg%3E");
  --ic-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16z'/%3E%3Cpath d='M14.5 5.5 18.5 9.5'/%3E%3C/svg%3E");
  --ic-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M10 7V4.5h4V7M6.8 7l.9 12.5h8.6L17.2 7'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#app { display: flex; height: 100vh; }

#panel {
  width: 340px;
  flex: 0 0 340px;
  padding: 20px 18px 30px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3742 transparent;
}
#panel::-webkit-scrollbar { width: 8px; }
#panel::-webkit-scrollbar-thumb { background: #232f3a; border-radius: 6px; border: 2px solid var(--panel); }
#panel::-webkit-scrollbar-thumb:hover { background: #2e3d49; }

#map { flex: 1; background: var(--bg); }

/* Small inline icons (SVG) used inside buttons/controls in place of emoji. */
.ic { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Header ---------------------------------------------------------------- */
/* Title row: the language pill is pinned to the right of the title instead of
   trailing the subtitle, where a longer subtitle pushed it onto its own line. */
.head { display: flex; align-items: center; gap: 10px; }
.head h1 { flex: 1; min-width: 0; }
h1 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.2px;
  margin: 0 0 3px; color: var(--text);
}
.sub {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 16px; padding-bottom: 14px;
  color: var(--text-faint); font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.sub .sub-t { flex: 1; min-width: 0; }
.sub .ver-chip { flex: 0 0 auto; }

/* ---- Plan / Fly / App tabs ------------------------------------------------- */
.tabs { display: flex; gap: 4px; margin: 0 0 18px; }
.tab {
  flex: 1; width: auto; margin: 0;
  padding: 10px 6px; min-height: 44px;
  background: transparent;
  color: var(--text-faint);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover:not(.active) { color: var(--text-dim); background: #141b22; }
.tab.active { color: #fff; background: var(--accent-fill); border-color: var(--accent-fill); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---- Section headers (steps) ---------------------------------------------- */
.step {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: 0.2px;
}
.tab-pane > .step:first-child { margin-top: 2px; padding-top: 0; border-top: none; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent); font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}
.hint {
  flex-basis: 100%;
  margin: 6px 0 0; padding-left: 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-faint); font-weight: 400;
}

/* ---- Form controls --------------------------------------------------------- */
label { display: block; margin: 12px 0; font-size: 12px; color: var(--text-dim); }
/* A checkbox row is one tap target (the whole label toggles it), so the ROW carries
   the target height — the box itself is 17px and would be a miss with gloves. */
label.row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; min-height: 38px; }
input[type=number], input[type=text], select {
  width: 100%; margin-top: 6px;
  /* extra right padding on selects: a long option ("Кабель / пульт EdgeTX / радіо
     (COM-порт)") ran straight under the dropdown arrow */
  padding: 9px 11px;
  background: var(--inset);
  border: 1px solid #223039;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
select { padding-right: 30px; }
input[type=number]:focus, input[type=text]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
input[type=range].angle-range { width: 100%; margin: 9px 0 0; accent-color: var(--accent); cursor: pointer; }
input[type=range].angle-range:disabled { opacity: 0.4; cursor: not-allowed; }
/* Inputs need the same "not available" look buttons have — «Кут проходів» is disabled
   whenever the auto-angle box is ticked, and looked perfectly editable. */
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
/* float, not margin-left:auto: the label is a block, not a flex row, so auto margins
   did nothing and the value sat glued to the label text. */
.angle-val { float: right; color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }
/* A number input inside a checkbox-style row: fixed width on the right, so the text
   keeps its natural width instead of being squeezed into a third of the row. */
label.row input[type=number] { flex: 0 0 92px; width: 92px; margin: 0 0 0 auto; }

/* ---- Buttons --------------------------------------------------------------- */
button, .dl-btn {
  width: 100%; padding: 11px 12px; margin-top: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: #19212a; color: #d4dee8;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  user-select: none;
}
/* :not(.active) — the generic hover used to repaint an ACTIVE tab / chip grey while
   the pointer sat on it, so the selected item looked deselected mid-click. */
button:hover:not(:disabled):not(.active) { background: #202b35; }
button:active:not(:disabled) { transform: translateY(1px); }
/* 0.4 dropped a label to 2.97:1 against its own surface — unreadable in daylight
   and easy to mistake for "broken". 0.55 keeps it clearly secondary at 4.5:1. */
button:disabled { opacity: 0.55; cursor: not-allowed; }
button:focus-visible, a.dl-btn:focus-visible, select:focus-visible, .tab:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-dim);
}
button.primary {
  background: var(--accent-fill); color: #fff; border-color: var(--accent-fill);
}
button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
button.ghost { background: transparent; border-color: #253440; color: var(--text-dim); }
button.ghost:hover:not(:disabled):not(.active) { background: #161f27; color: var(--text); border-color: #2f4150; }
button.active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }
/* An active control brightens under the pointer (like .primary) instead of being
   repainted grey by the generic hover — a pressed tool used to look switched off. */
.tab.active:hover, button.active:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.export-row { display: flex; gap: 8px; }
.export-row > * { margin-top: 9px; }
.dl-btn {
  flex: 1; text-decoration: none; background: transparent; border-color: #253440; color: var(--text-dim);
}
.dl-btn:hover { background: #161f27; color: var(--text); }

/* ---- Stats / HUD card ------------------------------------------------------ */
.stats {
  margin-top: 14px; padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}
.stats .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.stats .row:last-child { border-bottom: none; }
.stats .row span:first-child { color: var(--text-dim); }
.stats .row span:last-child { color: var(--ok); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hidden { display: none; }

/* ---- Mission status banner ------------------------------------------------- */
.mission-status {
  margin-top: 10px; padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  border: 1px solid #253440; background: var(--inset); color: var(--text-dim);
}
.mission-status.ok { color: var(--ok); border-color: #285644; background: #0e1a15; }
.mission-status.warn { color: var(--warn); border-color: #574a28; background: #1a1710; }
.mission-status.stale { color: var(--danger); border-color: #572a2a; background: #1a1010; }

/* Persistent status line — at the bottom of the panel (scroll to see history). */
.msg { margin-top: 14px; font-size: 12.5px; line-height: 1.45; min-height: 16px; color: var(--text-dim); }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }
.msg.warn { color: var(--warn); }

/* Transient popup toast at the top of the map: shows the running process + result,
   then AUTO-HIDES; dismiss early by tap or swipe. Slides + fades. Hidden by default. */
.toast {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; z-index: 1400;
  max-width: min(560px, 92vw);
  padding: 9px 15px; border-radius: 10px; text-align: center;
  font-size: 12.5px; line-height: 1.4; color: var(--text);
  background: rgba(13, 18, 24, .97); border: 1px solid #253440;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  font-variant-numeric: tabular-nums; cursor: pointer;
  touch-action: pan-y; user-select: none;
  opacity: 0; transform: translate(-50%, -16px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.error { color: var(--danger); border-color: #572a2a; }
.toast.ok { color: var(--ok); border-color: #285644; }
.toast.warn { color: var(--warn); border-color: #574a28; }

#app-ver { margin-left: auto; opacity: .5; font-size: .8em; font-weight: 400; }

/* ---- Mobile: panel becomes a full-screen drawer over the map --------------- */
#panel-toggle {
  display: none;
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1300;
  width: 54px; height: 54px; padding: 0; margin: 0;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-fill); color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#panel-toggle:hover { background: var(--accent); }
#panel-toggle .ic { width: 24px; height: 24px; stroke-width: 2; }
#panel-close, #panel-scrim { display: none; }

@media (max-width: 760px) {
  /* Phone = the field surface: map buttons grow to a full 44px touch target. */
  :root { --ctrl-size: 44px; }
  #panel {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    /* bottom inset too: the last control used to sit under the Android gesture bar */
    padding: max(20px, env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1200;
  }
  body.panel-open #panel { transform: translateX(0); }
  #panel.panel-dragging { transition: none; }   /* follow the finger 1:1 while swiping */
  #panel-toggle { display: flex; }
  body.panel-open #panel-toggle { display: none; }
  body.panel-open .leaflet-control-container { display: none; }
  /* Android 15 (targetSdk 35) draws the app edge-to-edge, and installed PWAs / iOS
     have a notch — keep the map's top-right controls clear of the status bar. */
  .leaflet-top { margin-top: env(safe-area-inset-top); }
  .leaflet-right { margin-right: env(safe-area-inset-right); }
  body.panel-open #panel-close {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 1300;
    width: 42px; height: 42px; padding: 0; margin: 0;
    border-radius: 50%;
    background: rgba(16, 21, 27, 0.95); color: var(--text);
    border: 1px solid #253440;
  }
  #panel-close .ic { width: 20px; height: 20px; }
  /* The toast is fixed to the top-centre of the screen, where it landed on top of the
     drawer's ✕ (and swallowed the tap) and on the map controls. Narrow it so it clears
     the control column, and drop it below the ✕ row while the drawer is open. */
  .toast { max-width: calc(100vw - 2 * var(--ctrl-size) - 40px); }
  body.panel-open .toast { top: calc(66px + env(safe-area-inset-top)); }
  /* The tab row stays put while the pane scrolls — switching План↔Політ no longer
     means scrolling a long pane back to the top first. The right padding keeps the
     last tab (and the title/version line) clear of the floating ✕. */
  .tabs {
    /* Sticks right below the status bar: the offset is measured from the panel's content
       edge, so cancel its top padding and add the inset back (0 without a status bar). */
    position: sticky; top: calc(env(safe-area-inset-top) - max(20px, env(safe-area-inset-top)));
    /* …and paint the strip under the status bar, or scrolled text shows through it. */
    box-shadow: 0 calc(-1 * env(safe-area-inset-top)) 0 var(--panel);
    z-index: 2; margin: 0 -18px 18px; padding: 10px 18px 10px 18px;
    background: var(--panel); border-bottom: 1px solid var(--line-soft);
  }
  body.panel-open .tabs { padding-right: 62px; }
  body.panel-open .head, body.panel-open .sub { padding-right: 52px; }
  /* Bigger tap targets on touch screens. */
  button, .dl-btn { padding: 13px; min-height: 46px; }
  /* …but a two-up row is only ~157px wide per button, and 13px of side padding
     wrapped «Старт місії (AUTO)» onto a second line. */
  .export-row button, .export-row .dl-btn { padding-left: 9px; padding-right: 9px; }
  input[type=number], input[type=text], select { padding: 12px 12px; font-size: 16px; }
  select { padding-right: 34px; }
  label.row { min-height: 46px; }
  input[type=checkbox] { width: 21px; height: 21px; }
  .lang-toggle { min-height: 26px; }
  /* chips stay pills — they must not inherit the 46px button height */
  .chip { min-height: 0; padding: 7px 12px; }
}

/* Highest / lowest contour-point markers on the «Карта висот» layer:
   a small coloured pill (warm = highest, cool = lowest, green = my position). */
.elev-marker {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  padding: 3px 8px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.elev-marker.hi { background: #e8552a; }   /* highest = warm */
.elev-marker.lo { background: #2d6fe0; }   /* lowest  = cool */
.elev-marker.me { background: #2db37a; }   /* my pos = green */

/* Persistent relief badge (bottom-left of the map): high · low · Δ.
   Clean 2-row card (label + value). */
.elev-badge {
  position: absolute; left: 12px; bottom: 24px; z-index: 1000;
  display: none; flex-direction: column; gap: 3px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(13, 18, 24, .95); border: 1px solid #253440;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
  font-size: 13px; font-weight: 700; color: #eaf2ff;
  font-variant-numeric: tabular-nums; pointer-events: auto;
}
.elev-badge .eb-row { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.elev-badge .hi { color: #ff9b6b; }
.elev-badge .lo { color: #7fb4ff; }
.elev-badge .me { color: #7ff0c0; }
.elev-badge .dz { color: #cfe0f0; }
.elev-badge .dz b { color: var(--ok); }
.elev-badge .eb-k { color: var(--text-faint); font-weight: 600; }

/* ---- Map chrome ------------------------------------------------------------
   Leaflet ships white controls. Against this dark UI they read as foreign white
   boxes stacked down the satellite image, so every control the map draws — zoom,
   layers, the custom toggles, the draw toolbar, tooltips, attribution — is themed
   with the panel's own tokens and sized from --ctrl-size (44px on touch). */
.leaflet-bar, .leaflet-touch .leaflet-bar {
  border: 1px solid var(--map-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.leaflet-bar a, .leaflet-bar a:hover, .leaflet-touch .leaflet-bar a {
  display: flex; align-items: center; justify-content: center;
  width: var(--ctrl-size); height: var(--ctrl-size); line-height: 1;
  background: var(--map-ctrl); color: var(--text);
  border-bottom: 1px solid var(--map-line);
  text-decoration: none; cursor: pointer;
}
.leaflet-bar a:last-child { border-bottom: none; }
.leaflet-bar a:hover:not(.leaflet-disabled) { background: var(--map-ctrl-hi); color: #fff; }
.leaflet-bar a.leaflet-disabled { background: var(--map-ctrl); color: var(--text-faint); }
.leaflet-bar a .ic { width: 20px; height: 20px; }
/* Active toggle = the same accent fill the panel uses for a pressed control. */
.locate-ctl a.active, .follow-ctl a.active, .map-tools a.active {
  background: var(--accent-fill); color: #fff;
}
.leaflet-control-zoom a { font-size: 20px; font-weight: 600; }

/* Layers switcher: a quiet dark card instead of the default white block. */
.leaflet-control-layers {
  background: var(--map-ctrl); color: var(--text);
  border: 1px solid var(--map-line); border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.leaflet-control-layers-expanded { padding: 9px 13px 9px 11px; }
.leaflet-control-layers-list { font-size: 12.5px; }
.leaflet-control-layers label {
  display: flex; align-items: center; gap: 9px;
  margin: 0; min-height: 30px; color: var(--text); font-size: 12.5px;
}
.leaflet-control-layers label > span { display: flex; align-items: center; gap: 9px; }
.leaflet-control-layers-selector { position: static; top: 0; margin: 0; width: 15px; height: 15px;
  accent-color: var(--accent); flex: 0 0 auto; }
.leaflet-control-layers-separator { border-top: 1px solid var(--map-line); margin: 8px -5px; }
/* The toggle is a dark PNG made for a white button — swap it for our own icon so it
   reads on the dark surface (mask + background-color = icon takes a theme token). */
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle {
  width: var(--ctrl-size); height: var(--ctrl-size);
  background-image: none; background-color: var(--text);
  -webkit-mask: var(--ic-layers) center / 21px 21px no-repeat;
          mask: var(--ic-layers) center / 21px 21px no-repeat;
}

/* Attribution / scale: legible but out of the way. */
.leaflet-control-attribution {
  background: rgba(11, 14, 18, .72); color: var(--text-faint);
  padding: 2px 7px; font-size: 10.5px; border-radius: var(--radius-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-dim); }

/* Popups and hover labels. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel-2); color: var(--text);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: var(--radius); }
.leaflet-popup-content { margin: 11px 14px; font-size: 12.5px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-faint); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--text); }
.leaflet-tooltip {
  background: rgba(13, 18, 24, .95); border: 1px solid var(--map-line); color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5); font-size: 12px;
}
.leaflet-tooltip-top:before { border-top-color: rgba(13, 18, 24, .95); }
.leaflet-tooltip-bottom:before { border-bottom-color: rgba(13, 18, 24, .95); }
.leaflet-tooltip-left:before { border-left-color: rgba(13, 18, 24, .95); }
.leaflet-tooltip-right:before { border-right-color: rgba(13, 18, 24, .95); }

/* Draw toolbar: the sprite icons are dark-on-white, so they are replaced by our own
   stroke icons on a pseudo-element (the button keeps the themed .leaflet-bar surface,
   and the icon colour is a token that can change on hover / while drawing). */
.leaflet-draw-toolbar a, .leaflet-retina .leaflet-draw-toolbar a {
  background-image: none; position: relative;
}
.leaflet-draw-toolbar a::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--text-dim);
  -webkit-mask: var(--dic) center / 21px 21px no-repeat;
          mask: var(--dic) center / 21px 21px no-repeat;
}
.leaflet-draw-toolbar a:hover:not(.leaflet-disabled)::before { background-color: #fff; }
.leaflet-draw-toolbar a.leaflet-disabled::before { background-color: var(--text-faint); }
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled { background: var(--accent-fill); }
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled::before { background-color: #fff; }
.leaflet-draw-draw-polygon { --dic: var(--ic-polygon); }
.leaflet-draw-edit-edit    { --dic: var(--ic-pencil); }
.leaflet-draw-edit-remove  { --dic: var(--ic-trash); }
/* The action bar (Контур · Виріз · Завершити · …) that opens beside the toolbar.
   Leaflet.draw pins it 26/32px from the left, which now sits ON TOP of the wider
   buttons, and forbids wrapping so the last action fell off a 390px screen. */
.leaflet-draw-actions, .leaflet-touch .leaflet-draw-actions {
  left: var(--ctrl-size);
  white-space: normal;
  max-width: calc(100vw - var(--ctrl-size) - 26px);
}
.leaflet-draw-actions li { display: inline-block; float: none; }
.leaflet-draw-actions a {
  background: var(--map-ctrl-hi); color: var(--text);
  height: var(--ctrl-size); line-height: var(--ctrl-size);
  padding: 0 11px; font-size: 12.5px; font-weight: 600;
  border-left: 1px solid var(--map-line);
}
.leaflet-draw-actions a:hover { background: #2c3945; color: #fff; }
.leaflet-draw-actions li:first-child a { border-left: none; }
.leaflet-draw-tooltip {
  background: rgba(13, 18, 24, .95); border: 1px solid var(--map-line);
  color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.leaflet-draw-tooltip:before { border-right-color: rgba(13, 18, 24, .95); }

/* Platform cards in the «Додаток» tab — one card per platform (what you get, then
   its button), instead of the wall of prose paragraphs this tab used to be. */
.plat {
  margin-top: 10px; padding: 12px 13px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.plat-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.plat-h .ic { width: 17px; height: 17px; color: var(--text-dim); }
.plat .hint { margin: 7px 0 0; }
.plat .hint + .export-row, .plat .hint + button { margin-top: 4px; }
.plat-ver {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Collapsible «Експорт / Імпорт» group (one hide/show section). */
.io-group { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); padding: 0 12px; }
.io-group > summary { list-style: none; cursor: pointer; user-select: none;
  margin: 0 -12px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.io-group > summary::-webkit-details-marker { display: none; }
.io-group > summary::after { content: "+"; float: right; opacity: .7; font-weight: 700; }
.io-group[open] > summary::after { content: "\2212"; }   /* minus */
.io-group > summary:hover { color: var(--text); }
.io-group[open] { padding-bottom: 10px; }
.hint b { color: var(--text-dim); font-weight: 700; }
/* Phone: lift the elevation badge ABOVE the ☰ menu button (both were bottom-left and
   overlapped), and clear the home-indicator safe area. */
@media (max-width: 760px) { .elev-badge {
  font-size: 12px; gap: 7px; padding: 7px 10px;
  bottom: calc(80px + env(safe-area-inset-bottom));
} }

/* Start/finish anchor marker — a clean framed marker, no box background. */
.anchor-marker { background: none !important; border: 0 !important; text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85)); }
.home-marker { background: none !important; border: 0 !important; }
/* The drone is the marker you hunt for over bright stubble — give it the same dark
   halo the home/anchor markers have, or it disappears into the imagery. */
.drone-marker { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }
.home-marker .ic { width: 24px; height: 24px; color: #fff; fill: var(--accent); stroke: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }

/* Контур / Виріз chooser injected INTO the Leaflet.draw action bar (beside Finish),
   so it inherits the toolbar style. Only the highlight + a separator are added. */
.leaflet-draw-actions .dc-a { font-weight: 700; }
.leaflet-draw-actions .dc-a.dc-on { background-color: var(--accent-fill) !important; color: #fff !important; }
.leaflet-draw-actions li.dc-li:last-of-type { border-right: 2px solid rgba(0, 0, 0, .25); }

/* Field name + area label (used by «Показати всі поля на карті»). The pill is an
   inline-block inside a fixed-size divIcon, so without text-align it hugged the LEFT
   edge of that box — i.e. every label sat left of the point it marks. */
.area-label { background: none !important; border: 0 !important; pointer-events: none; text-align: center; }
.area-label span {
  display: inline-block; padding: 2px 7px; border-radius: 9px; text-align: center;
  background: rgba(13, 18, 24, .78); color: #eaf2ff; font-weight: 700;
  font-size: 12px; line-height: 1.3; white-space: nowrap;
  border: 1px solid rgba(63, 128, 255, .5); box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.area-label.field span { font-size: 11px; font-weight: 600; line-height: 1.25; white-space: normal; border-color: rgba(63, 128, 255, .65); }

.ver-chip { opacity: 0.65; font-size: 0.82em; cursor: pointer; }

/* Privacy-policy link at the foot of the panel (store requirement + plain good manners). */
.legal { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; }
.legal a { color: var(--text-faint); text-decoration: none; }
.legal a:hover { color: var(--text-dim); text-decoration: underline; }

/* ---- GPS protection (anti-jamming / anti-spoofing) ---- */
.gps-guard { display:flex; align-items:center; gap:8px; padding:7px 9px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,0.04); border:1px solid var(--line-soft); }
.gg-dot { width:11px; height:11px; border-radius:50%; background:#6b7280;
  flex:0 0 auto; box-shadow:0 0 7px currentColor; }
#gps-guard-text { font-weight:600; }
.gps-alarm { position:fixed; top:0; left:0; right:0; z-index:99999;
  background:#c1121f; color:#fff; text-align:center;
  padding:calc(14px + env(safe-area-inset-top)) 12px 14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.55); animation:gpsAlarmFlash 0.7s steps(1) infinite; }
#gps-alarm-title { font-size:1.3em; font-weight:800; letter-spacing:0.5px; }
#gps-alarm-reason { margin:6px auto 10px; max-width:640px; font-size:0.95em; line-height:1.35; }
#gps-alarm .primary { background:#fff; color:#c1121f; font-weight:700; }
@keyframes gpsAlarmFlash { 0%{background:#c1121f;} 50%{background:#820b15;} }

/* ---- live «my location» blue dot (operator's own GPS, tracked) ---- */
.myloc-dot { position:absolute; left:15px; top:15px; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background:var(--accent); border:3px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,0.5); }
.myloc-beam { position:absolute; left:15px; top:15px; width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:14px solid rgba(63,128,255,0.85); transform-origin:50% 100%; }

/* Language toggle (UA/EN) in the header. It sits INSIDE the subtitle line, so it has
   to opt out of the global button{width:100%;margin-top} — without that it stretched
   the full panel width onto its own row and read as a broken primary action. */
.lang-toggle {
  width: auto; margin: 0 0 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 26px; padding: 4px 9px;
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 999px; cursor: pointer; vertical-align: middle;
  color: var(--text-dim); background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
}
.lang-toggle:hover { background: rgba(255, 255, 255, .16); color: var(--text); }


/* «Моє місце» / «Стежити за дроном» / «Телеметрія» sit in one shared bar (.map-tools);
   their look comes from the map-chrome block above. Only the telemetry toggle differs:
   it lights up in the same green the telemetry card uses, not the accent. */
.overlay-ctl a.active, .map-tools a.overlay-btn.active {
  background: #14382a; color: var(--ok);
}

/* ---- Flight statistics tab (#tab-stats) ---- */
.stats-chips { display: flex; flex-wrap: wrap; gap: 6px; row-gap: 6px; margin: 6px 0 10px; }
/* Chips are inline pills — they must opt out of the global button{width:100%} the
   way .tab and .lang-toggle do, otherwise a chip outside a flex row (the recent-KML
   list) renders as a full-width bar. */
.chip { width: auto; margin: 0; min-height: 30px; padding: 5px 11px; border: 1px solid #2a3340;
  border-radius: 14px; background: #121820; color: var(--text-dim); font-size: 12px; cursor: pointer; }
.chip.active { color: var(--ok); border-color: #285644; background: #10201a; }
.stats-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat-tile { background: #121820; border: 1px solid #202a36; border-radius: 8px; padding: 8px; text-align: center; }
.stat-tile .sv { font-size: 18px; font-weight: 600; color: var(--text); }
.stat-tile.headline .sv { font-size: 22px; color: var(--ok); }
.stat-tile .sl { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
/* Empty state (no flights yet): says what will appear here instead of a grey line. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: 8px; padding: 22px 14px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--text-dim); font-size: 12.5px;
}
.empty-state .ic { width: 26px; height: 26px; color: var(--text-faint); }
.empty-state .es-sub { font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }

.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats-table th, .stats-table td { padding: 5px 7px; border-bottom: 1px solid #1b2430; text-align: right; white-space: nowrap; }
.stats-table th:first-child, .stats-table td:first-child, .stats-table th:nth-child(2), .stats-table td:nth-child(2) { text-align: left; }

/* ---- on-map telemetry overlay (#11) ---- */
.mav-overlay {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 52px; z-index: 800;
  pointer-events: none;               /* map stays fully pannable in gloves */
  min-width: 150px; max-width: 62vw;
  background: rgba(10, 15, 20, .84); border: 1px solid #223042; border-radius: 10px;
  padding: 7px 9px; color: #eaf2ff; font-size: 12px; line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5); backdrop-filter: blur(3px);
  font-variant-numeric: tabular-nums;
}
.mav-overlay.hidden { display: none; }
.mav-overlay .mo-head { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.mav-overlay .mo-link { font-size: 14px; }
.mav-overlay .mo-mode { font-size: 13px; letter-spacing: .3px; }
.mav-overlay .mo-armed { margin-left: auto; font-size: 10.5px; font-weight: 700; }
.mav-overlay .mo-prog { display: flex; align-items: center; gap: 6px; margin: 5px 0 4px; }
.mav-overlay .mo-bar { flex: 1; height: 6px; background: #17202c; border-radius: 3px; overflow: hidden; }
.mav-overlay .mo-bar > i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s; }
.mav-overlay .mo-pct { font-weight: 700; min-width: 36px; text-align: right; }
.mav-overlay .mo-wp { font-size: 10.5px; color: var(--text-dim); }
.mav-overlay .mo-chips { display: flex; gap: 11px; }
.mav-overlay .mo-chips span { white-space: nowrap; }

/* ---- hazards (#13) ---- */
.haz-row { display: flex; gap: 6px; margin: 4px 0; }
.area-label.hazard { background: none !important; border: 0 !important; }
.area-label.hazard span { display: inline-block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.hint.warn { color: var(--warn); font-weight: 700; font-size: 11.5px; margin: 4px 0; line-height: 1.35; }
#hazard-list .hz-sum { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }

/* Touch sizing for the components defined further down this file than the main
   mobile block — a rule inside that earlier @media loses the cascade to their base
   declarations, so their phone overrides live here, after them. */
@media (max-width: 760px) {
  .io-group > summary { display: flex; align-items: center; min-height: 46px; }
  .io-group > summary::after { margin-left: auto; }
  .chip { min-height: 0; padding: 7px 12px; }
  .lang-toggle { min-height: 28px; }
}

/* Phone browser couldn't reach the backpack: how to flash the FMP firmware. */
.bp-help { position: relative; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.bp-help > b { color: var(--warn); }
.bp-help p { margin: 6px 0; }
.bp-help ol { margin: 6px 0 4px; padding-left: 18px; }
.bp-help li { margin: 3px 0; }
.bp-help-btn { display: block; margin: 8px 0; padding: 9px 12px; border-radius: 8px; text-align: center; font-weight: 700; text-decoration: none; background: var(--warn); color: #10151b; }
.bp-help-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 32px; }
.bp-help > b { display: block; padding-right: 30px; }

/* #35: APK route build (engine on the UI thread) — a dim screen with a spinner that keeps turning. */
.build-busy { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 16, 0.45); }
.build-busy[hidden] { display: none; }
.build-busy .bb-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--panel); color: var(--text); font-weight: 700; }
.build-busy .bb-spin { width: 22px; height: 22px; border: 3px solid var(--text-faint); border-top-color: var(--warn); border-radius: 50%; animation: bb-spin 0.8s linear infinite; will-change: transform; }
@keyframes bb-spin { to { transform: rotate(360deg); } }