/* Field UI, laid out the way agricultural GCS software is: the map is the
   application and everything else floats over it.
 *
 * Dark, because this is read on a tablet outdoors where a white screen is a
 * mirror, and because the map underneath is satellite imagery — light chrome
 * over dark photography is unreadable at a glance.
 *
 * Mirrored for RTL throughout with logical properties, so the mission panel
 * lands on the reading-start side rather than where a left-to-right design
 * would put it. */

:root {
  --bg: #0d1117;
  --panel: rgba(16, 20, 26, .94);
  --panel-solid: #10141a;
  --raised: #1b232e;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .2);

  --ink: #f0f4f8;
  --ink-soft: #93a3b5;
  --ink-dim: #64748b;

  --green: #22c55e;         /* the state banner, and anything healthy */
  --green-deep: #16a34a;
  --yellow: #facc15;        /* spray lines, the way every sprayer draws them */
  --cyan: #22d3ee;
  --amber: #f59e0b;
  --red: #ef4444;

  --radius: 8px;
  --shadow: 0 4px 22px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

/* `hidden` is only display:none in the UA stylesheet, so any class that sets
   display outranks it. Cost us a full-screen invisible click-eater once. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Vazirmatn, "IRANSans", Tahoma, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }

/* ── map ─────────────────────────────────────────────────────────── */

#map { position: fixed; inset: 0; background: #0a0e14; z-index: 0; }
.leaflet-container { font: inherit; background: #0a0e14; }
.leaflet-control-attribution {
  background: rgba(0, 0, 0, .5) !important;
  color: var(--ink-dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--ink-soft) !important; }
.leaflet-top { top: 108px; }
.leaflet-control-zoom { display: none; }   /* pinch and the tool row instead */

/* ── status bar ──────────────────────────────────────────────────── */

.statusbar {
  position: fixed;
  top: 0; inset-inline: 0;
  height: 56px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(8, 11, 15, .97), rgba(8, 11, 15, .82));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  z-index: 600;
}

/* The one thing the operator must never have to hunt for: what the aircraft
   is doing, in words, readable at arm's length. */
.state-banner {
  display: flex;
  align-items: center;
  padding: 0 26px;
  background: var(--green);
  color: #04140a;
  font-size: 20px;
  font-weight: 800;
  min-width: 230px;
  white-space: nowrap;
  transition: background .2s;
}
.state-banner.warn { background: var(--amber); color: #1a1000; }
.state-banner.bad  { background: var(--red);   color: #fff; }
.state-banner.idle { background: #334155;      color: var(--ink); }

.tele-cluster {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
}
.tele {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}
.tele-icon { font-size: 15px; opacity: .8; line-height: 1; }
.tele-value {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tele-value small { font-size: 10px; font-weight: 700; color: var(--ink-dim); }
.tele.ok  .tele-value { color: var(--green); }
.tele.warn .tele-value { color: var(--amber); }
.tele.bad .tele-value { color: var(--red); }

.tele-btn {
  width: 36px; height: 36px;
  margin-inline-start: 6px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.tele-btn.is-active { border-color: var(--cyan); color: var(--cyan); }

/* ── map tools ───────────────────────────────────────────────────── */

.toolrow {
  position: fixed;
  top: 66px;
  inset-inline-end: 14px;
  z-index: 500;
  display: flex;
  gap: 6px;
}
.tool {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.tool:hover { background: var(--raised); }
.tool.is-active { border-color: var(--cyan); color: var(--cyan); background: rgba(34, 211, 238, .13); }

/* ── task info ───────────────────────────────────────────────────── */

.taskbox {
  position: fixed;
  top: 118px;
  inset-inline-end: 14px;
  z-index: 500;
  width: 236px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 12.5px;
}
.task-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 3px 0;
  color: var(--ink-soft);
}
.task-row b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.task-badge {
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(239, 68, 68, .2); color: #fca5a5;
}
.task-badge.ok { background: rgba(34, 197, 94, .2); color: #86efac; }

/* ── radar ───────────────────────────────────────────────────────── */

.radar {
  position: fixed;
  bottom: 92px;
  inset-inline-start: 386px;     /* clear of the mission panel */
  width: 116px; height: 116px;
  z-index: 490;
  border-radius: 50%;
  background: rgba(8, 11, 15, .55);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.radar-rings {
  position: absolute; inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.radar-rings::before {
  content: ''; position: absolute; inset: 16px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1);
}
.radar-rose { position: absolute; inset: 0; transition: transform .15s linear; }
.radar-n {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--ink-soft);
}
.radar-home {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #04140a;
  font-size: 11px; font-weight: 800;
}
/* The aircraft, drawn relative to home: bearing sets the angle, distance the
   radius. Together they answer "where is it, and which way is it pointing" —
   the two things you look up from the tablet to check. */
.radar-craft {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  margin: -7px 0 0 -6px;
  border-inline-start: 6px solid transparent;
  border-inline-end: 6px solid transparent;
  border-bottom: 15px solid var(--red);
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, .8));
  transition: transform .2s linear;
}

/* ── bottom telemetry strip ──────────────────────────────────────── */

.strip {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 500;
  display: flex;
  gap: 26px;
  padding: 8px 22px;
  border-radius: var(--radius);
  background: rgba(8, 11, 15, .55);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.st { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.st-label { font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }
.st-label small { color: var(--ink-dim); margin-inline-start: 3px; }
.st-value {
  font-size: 23px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── action buttons ──────────────────────────────────────────────── */

.actions {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 14px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act {
  display: flex; align-items: center; gap: 9px;
  min-width: 132px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.act span { font-size: 16px; line-height: 1; }
.act:hover { background: var(--raised); }
.act:disabled { opacity: .38; cursor: not-allowed; }

.act-start { background: var(--green-deep); border-color: var(--green); color: #fff; }
.act-start:hover:not(:disabled) { background: #15803d; }
.act-edit { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .55); color: #fcd34d; }
.act-edit.is-paused { background: var(--amber); color: #1a1000; }
.act-exit { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .55); color: #fca5a5; }
.act-exit:hover { background: rgba(239, 68, 68, .34); color: #fff; }

/* ── mission panel ───────────────────────────────────────────────── */

.panel {
  position: fixed;
  top: 66px;
  inset-inline-start: 14px;
  bottom: 88px;
  width: 358px;
  overflow-y: auto;
  z-index: 550;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: transform .22s ease, opacity .22s ease;
}
.panel.is-hidden {
  transform: translateX(110%);   /* RTL: the panel sits on the right edge */
  opacity: 0;
  pointer-events: none;
}

/* The little pull tab on the panel edge, the way these interfaces all do it. */
.panel-tab {
  position: fixed;
  top: 50%;
  inset-inline-start: 376px;
  transform: translateY(-50%);
  z-index: 551;
  width: 22px; height: 58px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: inset-inline-start .22s ease, transform .22s ease;
}
.panel-tab.is-collapsed { inset-inline-start: 6px; transform: translateY(-50%) rotate(180deg); }

.panel-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.ptab {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.ptab.is-active { background: var(--green); color: #04140a; }

.pfield { margin-bottom: 14px; }
.pfield > label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.pfield > label small { font-weight: 400; color: var(--ink-dim); margin-inline-start: 4px; }
.pnote { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-dim); }
.phead { margin-top: 18px; }

select, .pfield input[type=number] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font: inherit;
  background: #080b10;
  color: var(--ink);
}
select:focus, input:focus { outline: none; border-color: var(--cyan); }

/* Values the operator did not type, shown under the one they did — the pump
   consequence of the dose, where the dose is set. */
.derived {
  display: flex; justify-content: space-between;
  padding: 3px 2px 0;
  font-size: 11.5px;
  color: var(--ink-dim);
}
.derived b { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.more { margin-bottom: 14px; }
.more summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 7px 0;
  user-select: none;
}
.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 10px 0; }

/* ── steppers ────────────────────────────────────────────────────
   A tablet held in one hand, often with a glove on. A keyboard covering half
   the screen to change 4 into 5 is the wrong trade, so every number gets a
   thumb-sized pair of buttons and the field itself stays typeable. */

.stepper { display: flex; align-items: stretch; gap: 6px; }
.stepper input[type=number] {
  flex: 1; min-width: 0;
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;    /* the tiny native arrows, replaced */
}
.stepper input.overridden { color: var(--amber); }

.step {
  flex: 0 0 46px;
  min-height: 46px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.step:active { transform: translateY(1px); }
.step-minus:hover { background: rgba(239, 68, 68, .22); border-color: rgba(239, 68, 68, .5); }
.step-plus:hover  { background: rgba(34, 197, 94, .22); border-color: rgba(34, 197, 94, .5); }

.stepper-lg .step { flex: 0 0 58px; min-height: 58px; font-size: 27px; }
.stepper-readout {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #080b10;
  font-size: 26px; font-weight: 800; color: var(--green);
  font-variant-numeric: tabular-nums;
}
input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--green); }

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.btn:hover { background: #232d3a; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { background: var(--green-deep); border-color: var(--green); color: #fff; font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: #15803d; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; margin-top: 6px; }

/* Colour-coded so the right one is found by shape and hue rather than by
   reading, which is what happens when an aircraft is doing something
   unexpected and the operator has three seconds. */
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bigbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px;
  min-height: 68px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bigbtn span { font-size: 21px; line-height: 1; }
.bigbtn:active { transform: translateY(1px); }
.bigbtn:hover { filter: brightness(1.35); }

.bigbtn-go      { background: rgba(34, 197, 94, .18);  border-color: rgba(34, 197, 94, .5);  color: #86efac; }
.bigbtn-stop    { background: rgba(239, 68, 68, .18);  border-color: rgba(239, 68, 68, .5);  color: #fca5a5; }
.bigbtn-hold    { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .5); color: #fcd34d; }
.bigbtn-auto    { background: rgba(34, 211, 238, .16); border-color: rgba(34, 211, 238, .5); color: #67e8f9; }
.bigbtn-land    { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .5); color: #c4b5fd; }
.bigbtn-takeoff { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .38); color: #67e8f9; }
.bigbtn-spray   { background: rgba(59, 130, 246, .18); border-color: rgba(59, 130, 246, .5); color: #93c5fd; }
.bigbtn-dry     { background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .4); color: #cbd5e1; }

/* ── cards, notes, checks ────────────────────────────────────────── */

.pcard {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .035);
}

.stat-line {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.stat-line:last-child { border-bottom: 0; }
.stat-line b { color: var(--ink); font-variant-numeric: tabular-nums; }

.note { padding: 7px 9px; border-radius: 7px; font-size: 12.5px; margin-top: 7px; }
.note.warn { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.note.bad  { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.note.good { background: rgba(34, 197, 94, .14); color: #86efac; }

.check-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.check-row:last-child { border-bottom: 0; }
.check-icon { flex-shrink: 0; font-weight: 700; width: 16px; text-align: center; }
.check-row.pass .check-icon { color: var(--green); }
.check-row.warn .check-icon { color: var(--amber); }
.check-row.fail .check-icon { color: var(--red); }
.check-detail { color: var(--ink-dim); font-size: 11.5px; }

.progress-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  margin-bottom: 9px;
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  transition: width .4s ease;
}

.messages { max-height: 150px; overflow-y: auto; font-size: 12px; }
.messages div {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--ink-soft);
}
.messages .sev-crit { color: #fca5a5; font-weight: 700; }
.messages .sev-warn { color: #fcd34d; }

/* ── FPV ─────────────────────────────────────────────────────────── */

.fpv {
  position: fixed;
  inset-inline-end: 14px;
  bottom: 92px;
  width: 322px;
  z-index: 520;
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fpv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .45);
  border-bottom: 1px solid var(--border);
}
.fpv-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.fpv-actions { display: flex; gap: 4px; }
.fpv-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.fpv-btn:hover { background: #232d3a; }
.fpv-body { position: relative; background: #05080c; aspect-ratio: 16 / 9; }
.fpv-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpv-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 14px;
  font-size: 12.5px; color: var(--ink-dim);
}

/* Full-screen camera: the ⇄ button swaps the two rather than enlarging the
   video. The camera takes the viewport and the map drops into the box the
   camera came out of, with the instruments still floating — which is the
   point of an FPV view: fly by the picture, keep the numbers in sight. */

body.fpv-full #fpv {
  inset: 0;
  width: auto;
  border: 0; border-radius: 0;
  background: #000;
  z-index: 1;                     /* above the map, below every control */
}
body.fpv-full .fpv-body { aspect-ratio: auto; height: 100%; }
body.fpv-full .fpv-body img { object-fit: cover; }
body.fpv-full .fpv-head {
  position: absolute;
  bottom: 92px;
  inset-inline-start: 386px;      /* clear of panel, tools and the strip */
  top: auto;
  z-index: 3;
  gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  padding: 5px 8px;
}
body.fpv-full #map {
  inset: auto;
  inset-inline-end: 14px;
  bottom: 92px;
  width: 322px; height: 182px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  z-index: 520;
  cursor: pointer;                /* tap to swap back */
}
body.fpv-full .taskbox,
body.fpv-full .radar { display: none; }

/* ── map overlays ────────────────────────────────────────────────── */

.drone-icon {
  width: 34px; height: 34px;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, .9));
}
.home-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: #04140a;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 0 6px rgba(0, 0, 0, .8);
}
.vertex-marker {
  background: #e879f9;
  border: 2px solid #2a0b30;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(232, 121, 249, .9);
  cursor: move;
}

/* ── night mode ──────────────────────────────────────────────────
   Spraying happens at dawn and dusk — low wind, and the bees are not out —
   so a good part of the work is done in poor light.
 *
 * This is not "darker". The screen is already dark. It shifts the palette to
 * red and amber and kills the blues and greens, because blue light is what
 * destroys the dark adaptation the operator needs to keep watching the
 * aircraft rather than the tablet. */

body.night {
  --ink: #f6dcc4;
  --ink-soft: #c39a76;
  --ink-dim: #8d6a50;
  --green: #ff8f4d;
  --green-deep: #a83a12;
  --cyan: #ff9d4d;
  --yellow: #ffc46b;
  --panel: rgba(24, 12, 7, .94);
  --panel-solid: #180c07;
  --raised: #26150d;
  --border: rgba(255, 160, 90, .17);
  --border-strong: rgba(255, 160, 90, .32);
  --bg: #0c0603;
}
body.night #map { filter: brightness(.5) saturate(.35) sepia(.45); }
body.night .fpv-body img { filter: brightness(.75) saturate(.5) sepia(.3); }
body.night .state-banner { background: #b4460f; color: #fff2e6; }
body.night .bigbtn { filter: saturate(.5) hue-rotate(-16deg); }
body.night .act-exit { background: rgba(150, 40, 30, .3); border-color: rgba(220, 90, 70, .6); color: #ffb0a0; }
body.night .act-edit { background: rgba(180, 110, 30, .2); border-color: rgba(255, 176, 90, .55); color: #ffce8a; }
body.night .radar-craft { border-bottom-color: #ff7043; }

/* ── narrow screens: a phone at the field edge ───────────────────── */

@media (max-width: 980px) {
  .state-banner { min-width: 0; padding: 0 14px; font-size: 15px; }
  .tele-cluster { gap: 0; padding: 0 6px; }
  .tele { padding: 4px 6px; }
  .tele-value { font-size: 15px; }
  .tele:nth-child(n+4) { display: none; }

  .panel {
    inset-inline: 10px;
    width: auto;
    top: auto;
    bottom: 84px;
    max-height: 54vh;
  }
  .panel.is-hidden { transform: translateY(120%); }
  .panel-tab { display: none; }          /* the toolrow toggle covers it */

  .toolrow { top: 62px; inset-inline-start: 10px; inset-inline-end: 10px; justify-content: flex-end; }
  .taskbox { top: 112px; inset-inline-end: 10px; width: 190px; }
  .radar { display: none; }              /* the strip matters more */
  /* Above the action buttons rather than beside them: sharing the bottom row
     squeezed both into something neither readable nor easy to hit. */
  .strip { gap: 16px; padding: 6px 12px; bottom: 74px; }
  .st-value { font-size: 18px; }
  .st:nth-child(n+4) { display: none; }

  .actions { flex-direction: row; bottom: 16px; inset-inline-end: 10px; }
  .act { min-width: 0; padding: 11px 14px; }
  .act span { font-size: 18px; }
  .act:not(.act-start) { font-size: 0; gap: 0; }   /* icons when space is short */

  .fpv { inset-inline: 10px; width: auto; bottom: auto; top: 112px; }
  body.fpv-full #map { inset-inline-end: 10px; width: 150px; height: 96px; bottom: 84px; }
  body.fpv-full .fpv-head { inset-inline-start: 10px; bottom: 84px; }
  .btn-grid { grid-template-columns: 1fr 1fr; }
}

/* ── drawing bar ─────────────────────────────────────────────────
   A toast vanishes after five seconds and leaves the operator with no way to
   tell they are still in drawing mode, or how to leave it. This stays up for
   as long as drawing is on, counts the points, and carries the exit. */

.drawbar{
  position:fixed;
  top:66px;
  inset-inline-start:14px;
  z-index:560;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;
  border-radius:var(--radius);
  border:1px solid var(--green);
  background:rgba(11,20,15,.95);
  box-shadow:0 0 0 1px var(--green-deep),var(--shadow);
  backdrop-filter:blur(10px);
}
.dot-live{
  width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 9px var(--green);flex:none;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}}

.draw-text{font-size:14.5px;font-weight:700;white-space:nowrap}
.draw-text b{color:var(--green);font-variant-numeric:tabular-nums}
.draw-hint{font-size:12px;color:var(--ink-dim);white-space:nowrap}

.draw-undo,.draw-done{
  border-radius:7px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;padding:8px 14px;white-space:nowrap;
}
.draw-undo{background:transparent;border:1px solid var(--border);color:var(--ink-soft)}
.draw-undo:hover{background:var(--raised);color:var(--ink)}
.draw-done{background:var(--green);border:1px solid var(--green);color:#04140a}
.draw-done:hover{filter:brightness(1.1)}

/* the optimise button reads as a suggestion, not a primary action */
.btn-opt{
  margin-top:8px;
  background:rgba(34,211,238,.12);
  border-color:rgba(34,211,238,.45);
  color:#8be9fd;
  font-weight:700;
}
.btn-opt:hover:not(:disabled){background:rgba(34,211,238,.22)}
.btn-opt.done{background:rgba(34,197,94,.15);border-color:var(--green-deep);color:#86efac}

@media (max-width:980px){
  .drawbar{inset-inline:10px;top:112px;justify-content:center}
  .draw-hint{display:none}
}

/* ── keep-out zones and position capture ─────────────────────────
   The keep-out tool reads as a hazard control, not another draw tool: it is
   the one that stops the aircraft flying somewhere. */

.tool-danger.is-active {
  border-color: var(--red);
  color: #fca5a5;
  background: rgba(239, 68, 68, .16);
}

/* The drawing bar switches to red while a keep-out is being drawn, so the two
   subjects are never confused at a glance. */
.drawbar.is-exclusion {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .25), var(--shadow);
  background: rgba(24, 11, 11, .95);
}
.drawbar.is-exclusion .dot-live { background: var(--red); box-shadow: 0 0 9px var(--red); }
.drawbar.is-exclusion .draw-text b { color: #fca5a5; }
.drawbar.is-exclusion .draw-done { background: var(--red); border-color: var(--red); color: #fff; }

.row .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── offline map download ────────────────────────────────────────
   Progress for a job that can take minutes on a village phone tether. The
   operator needs to know it is moving and be able to stop it, because the
   megabytes are theirs. */

.mapdl { margin-top: 8px; }

.mapdl-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--raised); border: 1px solid var(--border);
}
.mapdl-bar span {
  display: block; height: 100%; width: 0;
  background: var(--green); transition: width .3s ease;
}

.mapdl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
  font-size: 12px; color: var(--ink-soft);
}

.btn-tiny { padding: 4px 10px; font-size: 12px; }

/* ── messages ────────────────────────────────────────────────────
   `.toast` had no rule at all. The element defaulted to static position with
   no background, which put every message the app has ever produced — "GPS is
   not locked", "no link to the aircraft", the result of every failed button —
   in the top-left corner underneath the opaque status bar. The operator
   pressed a button, nothing appeared to happen, and the explanation was
   painted over.

   So: fixed, above everything, and readable at arm's length in sunlight. */

.toast {
  position: fixed;
  bottom: 112px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: rgba(16, 20, 26, .97);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  /* A message must never swallow a tap meant for the map underneath it. */
  pointer-events: none;
  animation: toast-in .18s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* The three outcomes are told apart by colour as well as words, because the
   operator reads this in one glance while looking at the aircraft. */
.toast.good { border-color: var(--green); box-shadow: 0 0 0 1px var(--green-deep), var(--shadow); }
.toast.bad  { border-color: var(--red);   box-shadow: 0 0 0 1px rgba(239, 68, 68, .35), var(--shadow); color: #fecaca; }
.toast.warn { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245, 158, 11, .35), var(--shadow); color: #fde68a; }

/* On a phone the action bar owns the bottom of the screen. */
@media (max-width: 720px) {
  .toast { bottom: 150px; font-size: 14px; padding: 10px 14px; }
}