/* ---- Panther Ops — layout matched to the live tool ---- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Roboto", "Helvetica", "Arial", sans-serif; }

/* Stealth gray theme — chrome only (the map/picture canvas stays light). Re-shade the whole UI from here. */
:root {
  --st-chrome: #2b333c; --st-chrome-2: #262d35; --st-surface: #333d48;
  --st-btn: #353e49; --st-btn-hover: #3f4a57; --st-active: #56616f; --st-primary: #46566a;
  --st-border: #3a434e; --st-border-2: #434d59; --st-text: #e8ecf2; --st-muted: #9aa6b3;
}

/* Grid: white "Mission Data" brand cell + blue toolbar on top; sidebar + map below. */
#app {
  position: fixed; inset: 0; display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas: "brand toolbar" "sidebar map";
}
#app.sidebar-collapsed { grid-template-columns: 0 1fr; }

/* Brand cell (top-left, white — matches the live tool) */
#brand {
  grid-area: brand; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; background: var(--st-chrome); border-bottom: 1px solid var(--st-border); overflow: hidden;
}
#brand .brand-title {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 24px; font-weight: 400; line-height: 32px; color: var(--st-text); white-space: nowrap;
}
#brand .brand-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; line-height: 1; color: var(--st-muted);
  cursor: pointer; padding: 6px; border-radius: 50%;
}
#brand .brand-toggle:hover { background: rgba(255,255,255,0.08); }
/* Let the tooltip escape the brand cell when the panel is open. */
#app:not(.sidebar-collapsed) #brand { overflow: visible; }

/* Blue toolbar */
#toolbar {
  grid-area: toolbar; display: flex; align-items: center; gap: 4px;
  padding: 0 12px; background: var(--st-chrome-2); color: #fff; position: relative;
}
#toolbar-logo { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 62px; pointer-events: none; }
#splash { position: fixed; inset: 0; z-index: 99999; background: #2b333c; display: flex; align-items: center; justify-content: center; }
#splash img { width: min(66vmin, 520px); height: auto; animation: splashIn .55s ease both; }
#splash.hide { opacity: 0; transition: opacity .6s ease .15s; pointer-events: none; }
#splash.hide img { animation: splashPinch .7s cubic-bezier(.5,0,.25,1) forwards; }
@keyframes splashIn { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Pinch into the top-right toolbar logo (its centre is ~41px from the right edge, ~32px from the top). */
@keyframes splashPinch { 60% { opacity: 1; } to { transform: translate(calc(50vw - 41px), calc(32px - 50vh)) scale(.12); opacity: 0; } }

/* Top-bar search — collapsed to a magnifier; the input drops down below it on click
   (absolutely positioned, so opening it never shifts the menu items). */
#search-wrap { position: relative; display: flex; align-items: center; }
#search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: none; background: none; color: #fff;
  cursor: pointer; border-radius: 4px;
}
#search-toggle:hover { background: rgba(255,255,255,0.18); }
#search-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 9000;
  display: none; align-items: center; background: #fff; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
#search-pop.open { display: flex; }
#search-pop .search-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  color: rgba(0,0,0,0.45); pointer-events: none;
}
#search-input {
  background: transparent; border: none; outline: none; color: rgba(0,0,0,0.87); height: 38px;
  font-size: 15px; padding: 8px 14px 8px 2px; width: 240px;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
}
#search-input::placeholder { color: rgba(0,0,0,0.45); }

/* Hamburger to reopen the panel — only visible when the sidebar is collapsed. */
#sidebar-open {
  display: none; background: none; border: none; color: #fff;
  line-height: 1; cursor: pointer; padding: 6px; border-radius: 50%; margin-right: 4px;
}
#sidebar-open:hover { background: rgba(255,255,255,0.15); }
#app.sidebar-collapsed #sidebar-open { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Hover tooltip (matches the live tool's MUI tooltip) ---- */
/* Tooltips render via tooltip.js into a single body-level .ph-tooltip element
   (so they escape the sidebar's overflow). .tip / .tip-left / .tip-right just
   carry the data-tip text + placement hint. */
.ph-tooltip {
  position: fixed; display: none; z-index: 30000; pointer-events: none;
  background: #000; color: #fff; font: 500 11px/1.4 "Roboto","Helvetica","Arial",sans-serif;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s ease;
}
.ph-tooltip::after { content: ""; position: absolute; border: 5px solid transparent; }
.ph-tooltip[data-pos="below"]::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #000; }
.ph-tooltip[data-pos="left"]::after  { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #000; }
.ph-tooltip[data-pos="right"]::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #000; }
.ph-tooltip[data-pos="above"]::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #000; }


/* Toolbar buttons — white uppercase labels, like the live tool */
/* MUI "contained" style — filled translucent-white button on the blue bar. */
.toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--st-btn); border: 1px solid var(--st-border-2); color: var(--st-text); cursor: pointer;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02857em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; white-space: nowrap; min-width: 64px; line-height: 1.75;
  margin: 0 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toolbar-btn:hover { background: var(--st-btn-hover); border-color: var(--st-active); }
.toolbar-btn .btn-icon { display: inline-flex; line-height: 0; }

.toolbar-menu-wrap { position: relative; }

/* Route editor toolbar group */
#route-editor-group { display: inline-flex; align-items: center; }
.route-group-sep { width: 1px; height: 26px; margin: 0 8px; background: rgba(255,255,255,0.35); }
.route-add-btn {
  background: rgba(255,255,255,0.25); border: none; color: #fff; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; margin: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.route-add-btn:hover { background: rgba(255,255,255,0.35); }
.route-select-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,0.25); color: #fff; border: none; border-radius: 4px;
  padding: 7px 8px; font-size: 16px; font-weight: 400; letter-spacing: 0.15px;
  min-width: 95px; max-width: 140px; margin: 0 4px; cursor: pointer;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
}
.route-select-btn:hover { background: rgba(255,255,255,0.35); }
.route-select-btn .route-name { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-select-btn .route-caret { font-size: 12px; opacity: 0.8; }

.toolbar-dropdown {
  display: none; position: absolute; top: calc(100% + 2px); left: 0;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 9000; width: max-content; min-width: 200px; overflow: hidden;
}
.toolbar-dropdown.open { display: block; }

.toolbar-dropdown-item {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 6px 16px; font-size: 16px; line-height: 24px; font-weight: 400;
  font-family: "Roboto","Helvetica","Arial",sans-serif; color: rgba(0,0,0,0.87); cursor: pointer;
}
.toolbar-dropdown-item:hover { background: rgba(0,0,0,0.04); }
.toolbar-dropdown-item .item-icon { display: flex; color: rgba(0,0,0,0.54); flex-shrink: 0; }
.toolbar-btn .btn-icon svg, .toolbar-dropdown-item .item-icon svg { display: block; }
.toolbar-dropdown-item .item-text { flex: 1 1 auto; }
.toolbar-dropdown-item .item-shortcut {
  flex-shrink: 0; margin-left: 24px; font-size: 13px; color: rgba(0,0,0,0.45);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; min-width: 14px; text-align: right;
}
.toolbar-dropdown-divider { height: 1px; margin: 6px 0; background: rgba(0,0,0,0.10); }

/* SPI pin right-click menu. */
.spi-ctx-menu {
  position: fixed; z-index: 10000; background: #fff; border: 1px solid #ccc;
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); overflow: hidden; min-width: 120px;
}
.spi-ctx-item {
  padding: 7px 16px; font-size: 15px; font-family: "Roboto","Helvetica","Arial",sans-serif;
  color: rgba(0,0,0,0.87); cursor: pointer; white-space: nowrap;
}
.spi-ctx-item:hover { background: rgba(0,0,0,0.06); }
/* Disabled menu item (e.g. Undo/Redo with an empty stack) */
.toolbar-dropdown-item.disabled { opacity: 0.38; pointer-events: none; }

/* Drawing tools — armed shape-tool button + reshape/move handles */
/* Shape-tool buttons: no light circle when idle; the light circle appears only when the
   tool is active (reverse of the default .route-add-btn behaviour). Hover is a faint cue. */
.shape-tool-btn { background: transparent !important; }
.shape-tool-btn:hover { background: rgba(255,255,255,0.18) !important; }
.shape-tool-btn.active { background: rgba(255,255,255,0.45) !important; color: #fff !important; }
.shape-handle {
  width: 14px; height: 14px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--st-active); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: grab;
}
.shape-handle:active { cursor: grabbing; }
.shape-handle-move { border-radius: 3px; border-color: #222; cursor: move; }
.shape-handle-radius, .shape-handle-axis { border-color: #0a7d2c; }
/* Transient toast (e.g. import result), bottom-centre of the map */
.map-toast {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 1100; background: rgba(20,20,20,0.88); color: #fff; padding: 8px 16px;
  border-radius: 18px; font-size: 13px; font-family: "Roboto","Helvetica","Arial",sans-serif;
  pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: opacity 0.4s; opacity: 1;
}
.map-toast.fade { opacity: 0; }

/* Drawing hint banner (top-centre of the map while a shape tool is armed) */
.draw-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1100; background: rgba(20,20,20,0.86); color: #fff; padding: 6px 14px;
  border-radius: 16px; font-size: 13px; font-family: "Roboto","Helvetica","Arial",sans-serif;
  pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Pickr trigger button in the shape edit dialog */
.shp-pk-btn { width: 44px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; padding: 0; }
/* Trash-can delete button (kept away from Done, matching the rest of the app) */
.shape-del-btn { border: none; background: none; color: #c62828; cursor: pointer; padding: 4px; display: flex; align-items: center; border-radius: 4px; }
.shape-del-btn:hover { background: rgba(198,40,40,0.10); }

/* Selected point/icon highlight (for the unified clipboard) */
.ph-point-sel { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #93a7bd); }
/* Selected shape outline (multi-select glow). Move cursor hints the body is draggable. */
.leaflet-overlay-pane path.ph-shape-sel { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #93a7bd); cursor: move; }

/* Mission Data — Shapes rows */
.sidebar-shape-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; }
.sidebar-shape-row:hover { background: rgba(0,0,0,0.04); }
.sidebar-shape-ico { display: flex; flex-shrink: 0; }
.sidebar-shape-name { flex: 1 1 auto; font-size: 14px; color: rgba(0,0,0,0.87); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-shape-del { border: none; background: none; color: rgba(0,0,0,0.4); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sidebar-shape-del:hover { color: #c62828; }

/* Scenarios manager list */
.scn-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.scn-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.scn-row-name { flex: 1 1 auto; font-size: 14px; color: rgba(0,0,0,0.87); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scn-row-date { font-size: 12px; color: rgba(0,0,0,0.45); flex-shrink: 0; }
.scn-row .sp-btn-text { padding: 2px 8px; font-size: 13px; }
.scn-row-del { color: #c62828 !important; }
.scn-row-active { background: rgba(86,97,111,0.08); border-radius: 4px; }
.scn-row-active .scn-row-name { font-weight: 600; }
.scn-current-tag { font-size: 11px; font-weight: 600; color: var(--st-active); background: rgba(86,97,111,0.14); padding: 1px 6px; border-radius: 8px; margin-left: 6px; }

/* Active toggle tool in a menu (B&R Cursor, Rotate, Point/Line Editor) — same on-state
   cue as the B&R toolbar button: blue icon + text, tinted row, dot marker. */
.toolbar-dropdown-item.active { background: rgba(86,97,111,0.10); color: var(--st-active); }
.toolbar-dropdown-item.active .item-icon { color: var(--st-active); }
.toolbar-dropdown-item.active .item-text { font-weight: 500; }
.toolbar-dropdown-item.active::after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-active); margin-left: auto;
}
.toolbar-dropdown-item.active .item-shortcut { margin-left: 12px; }

/* Settings dialog */
.settings-body { display: flex; flex-direction: column; min-height: 0; }
.settings-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(0,0,0,0.12); padding: 0 14px; }
.settings-tab {
  padding: 10px 7px; font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.6); white-space: nowrap;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.settings-tab.active { color: var(--st-active); border-bottom-color: var(--st-active); }
.settings-pane { padding: 16px; overflow-y: auto; display: none; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; color: rgba(0,0,0,0.87); }
.settings-pane.active { display: block; }
/* Keep every control in the settings body the same size (the shared .mui-switch-row is 16px elsewhere). */
.settings-pane .mui-switch-row, .settings-pane .settings-row, .settings-pane .settings-switch, .settings-pane .settings-select, .settings-pane input, .settings-pane select, .settings-pane span, .settings-pane label { font-size: 15px; }
.settings-section { font-size: 13px; font-weight: 600; color: rgba(0,0,0,0.75); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.settings-section:first-child { margin-top: 0; }
.settings-hint { font-size: 12px; color: rgba(0,0,0,0.55); margin-bottom: 8px; }
.settings-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 15px; color: rgba(0,0,0,0.87); cursor: pointer;
}
.settings-row input { accent-color: var(--st-active); width: 18px; height: 18px; cursor: pointer; }
.settings-switch { padding: 6px 0; font-size: 15px; }
/* Two-column grid for compact groups of toggle switches (e.g. Measurement Tool). */
.settings-switch-grid { display: flex; flex-wrap: wrap; column-gap: 24px; }
.settings-switch-grid .settings-switch { flex: 0 0 44%; }
/* Explicit two-column layout for a group of settings (each column stacks vertically). */
.settings-2col { display: flex; gap: 28px; }
.settings-2col .settings-col { flex: 1; }
/* Airspace rows: show/hide toggle, label, color picker. */
.airspace-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.airspace-row .airspace-row-lbl { width: 90px; }   /* fixed width keeps the picker next to the label, not far right */
/* ± stepper rows (Icon Sizes). */
.settings-stepper { display: flex; align-items: center; gap: 6px; margin: 0; padding: 1px 0; }
.settings-stepper .set-step-lbl { flex: 1; }
.settings-stepper .set-size-step {
  width: 20px; height: 20px; border: 1px solid #bbb; border-radius: 4px; background: #f4f4f4;
  font-size: 13px; line-height: 1; cursor: pointer; color: #222; padding: 0;
}
.settings-stepper .set-size-step:hover { background: #e8e8e8; }
.settings-stepper .set-size-v { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.settings-select { width: 100%; height: 32px; padding: 0 9px; font-size: 15px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; color: rgba(0,0,0,0.87); box-sizing: border-box; }
.settings-select:focus { outline: none; border-color: var(--st-active); }
.pace-btn, .scale-btn, .edge-btn { min-width: 40px; height: 38px; padding: 0 10px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; color: rgba(0,0,0,0.87); }
.pace-btn:hover, .scale-btn:hover, .edge-btn:hover { border-color: #6b7686; }
.pace-btn.active, .scale-btn.active, .edge-btn.active { background: var(--st-active); border-color: var(--st-active); color: #fff; }
#ap-export-busy { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); }
#ap-export-busy .ap-busy-card { display: flex; align-items: center; gap: 14px; background: #fff; color: #222; padding: 18px 24px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); font-size: 15px; }
#ap-export-busy .ap-busy-spin { width: 22px; height: 22px; border: 3px solid #d0d0d0; border-top-color: var(--st-active); border-radius: 50%; animation: ap-busy-spin 0.8s linear infinite; }
@keyframes ap-busy-spin { to { transform: rotate(360deg); } }

/* Sidebar */
#sidebar { grid-area: sidebar; background: #fff; border-right: 1px solid #e0e0e0; overflow-y: auto; overflow-x: hidden; }
#app.sidebar-collapsed #sidebar { border-right: none; }

/* Top-level color-coded category box (Routes / Lines / Enemy / Friendly). */
.sidebar-category {
  border: 1px solid rgba(0,0,0,0.55); border-radius: 4px;
  margin: 10px 8px; padding-bottom: 4px; overflow: hidden;
}
.cat-routes   { background: rgba(0,0,0,0.07); }
.cat-lines    { background: rgba(130,60,200,0.10); }
.cat-packages { background: rgba(86,97,111,0.10); }
/* Air Picture Designer rubber-band (marquee) selection rectangle. */
.ape-marquee { fill: rgba(86,97,111,0.12); stroke: var(--st-active); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.cat-enemy    { background: rgba(220,40,40,0.10); }
.cat-friendly { background: rgba(0,0,208,0.10); }
.sidebar-category-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 5px 12px; font-size: 16px; font-weight: 500; color: rgba(0,0,0,0.87);
  cursor: pointer; user-select: none;
}
.sidebar-category-title { flex: 1; }
.sidebar-category-meta { display: flex; align-items: center; gap: 8px; }
.sidebar-category-arrow { display: inline-flex; color: rgba(0,0,0,0.54); }
.sidebar-category-arrow svg { transition: transform 0.15s; }
.sidebar-category.collapsed .sidebar-category-arrow svg { transform: rotate(180deg); }
.sidebar-category.collapsed .sidebar-category-content { display: none; }
.sidebar-category-content { padding: 0 4px; }

/* Standalone "Points Not On a Route" box — solid frame, no fill (bundle: Unassigned
   category has fill:null, so it's transparent and shows the white drawer behind). */
.sidebar-group.sidebar-standalone { background: transparent; }

/* Airplane rows inside the Enemy > Airplanes subgroup. */
.sidebar-airplane-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 14px; font-size: 13px; cursor: pointer; border-radius: 3px;
  color: rgba(0,0,0,0.87);
}
.sidebar-airplane-row:hover { background: rgba(0,0,0,0.06); }
.sidebar-ap-ico {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #000; font-size: 18px; line-height: 1; border: 1px solid rgba(0,0,0,0.25);
}
.sidebar-ap-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-ap-meta { color: rgba(0,0,0,0.55); font-size: 12px; font-weight: 400; }

/* Group box — matches the live tool: gray fill, thin solid black frame, rounded. */
.sidebar-group {
  background: rgba(0,0,0,0.07);
  border: 1px solid #000; border-radius: 4px;
  margin: 10px 8px; padding-bottom: 4px;
}

.sidebar-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 4px 12px; font-size: 16px; font-weight: 500; color: rgba(0,0,0,0.87);
  cursor: pointer; user-select: none;
}
.sidebar-group-count {
  background: rgba(0,0,0,0.12); color: rgba(0,0,0,0.87); border-radius: 10px;
  font-size: 12px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.sidebar-group-chevron { margin-left: auto; display: inline-flex; color: rgba(0,0,0,0.54); }
.sidebar-group-chevron svg { transition: transform 0.15s; }
.sidebar-group.collapsed .sidebar-group-chevron svg { transform: rotate(180deg); }

.sidebar-group.collapsed .sidebar-group-body { display: none; }

.sidebar-group-body { padding: 0 4px; }
.sidebar-group-title { flex: 1; }

/* Nested route box inside the Routes group — dashed sub-box like the live tool. */
.sidebar-subgroup {
  background: transparent; border: 1px dashed rgba(0,0,0,0.45);
  margin: 6px 4px; border-radius: 4px;
}
.sidebar-subgroup .sidebar-group-header { font-size: 16px; padding: 5px 6px 4px 10px; }

/* Steerpoint type icons (tinted PNGs) have no marker background. */
.sp-pt-icon { background: transparent !important; border: none !important; }
.sp-bull-icon { background: transparent !important; border: none !important; }

/* iOS: long-pressing a marker <img> pops the native "save to Photos" callout and
   a magnified preview. Suppress it on all map imagery so long-press acts like a
   right-click (e.g. the SPI pin's Hide menu) instead. */
.leaflet-marker-icon, .leaflet-marker-icon img, .leaflet-marker-pane img,
.sp-pt-icon img, #north-arrow img, .leaflet-tile {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}

/* Items stay clickable in any mode so clicking one jumps you into its editor
   (steerpoints/shapes handle the switch). Dragging is gated to the matching
   editor in JS. Shapes register clicks on the stroke only (not the fill), so you
   can still drop a point/vertex inside a shape's interior. */
.ed-item-draw { pointer-events: stroke !important; }
/* While actively drawing a shape, disable all item hit-testing so clicks place
   vertices freely (routeeditor/shapes toggle body.drawing). */
body.drawing .ed-item-route,
body.drawing .ed-item-line,
body.drawing .ed-item-draw { pointer-events: none !important; }
/* Route-leg B&R labels — the box bg is on the inner div. */
.sp-leg-label { background: transparent !important; border: none !important; }

/* Steerpoint popup bubble (title, coords, elevation, action buttons) — matches the live tool. */
.sp-stp-popup { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; color: rgba(0,0,0,0.87); min-width: 170px; }
.sp-stp-title { margin-bottom: 13px; }
.sp-stp-info { font-variant-numeric: tabular-nums; }
.sp-stp-elev { margin-top: 13px; font-variant-numeric: tabular-nums; }
.sp-stp-hr { border: none; border-top: 1px solid #ccc; margin: 10px 0 6px; }
.sp-stp-actions { display: flex; gap: 6px; }
.sp-stp-actions button {
  background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-stp-actions button:hover { background: rgba(0,0,0,0.06); }
.sp-stp-del { color: #d32f2f; }
.sp-stp-spi, .sp-stp-edit { color: #0055dd; }

/* Draggable, space-stabilized point label — dark rounded box w/ arrow, matching the live tool. */
.sp-label.leaflet-tooltip {
  white-space: nowrap; cursor: move;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 400;
  color: #fff; background: rgba(0,0,0,0.75); padding: 2px; border-radius: 3px;
  border: none; box-shadow: none;
}
/* Arrow points toward the point — white, matching the live tool. */
.sp-label.leaflet-tooltip-left::before { border-left-color: #fff; }
.sp-label.leaflet-tooltip-right::before { border-right-color: #fff; }
.sp-label.leaflet-tooltip-top::before { border-top-color: #fff; }
.sp-label.leaflet-tooltip-bottom::before { border-bottom-color: #fff; }
/* Once dragged off the point, hide the arrow (the dashed leader line takes over). */
.sp-label.moved::before { display: none; }

/* Each point is a transparent box with a dashed border (matches the bundle's
   Box sx:{border:1, borderStyle:"dashed", borderRadius:2, m:1, ml:2}). The dashed
   box wraps both the clickable row and its expanded detail. */
.sidebar-point {
  border: 1px dashed rgba(0,0,0,0.87); border-radius: 8px;
  margin: 8px 0 8px 16px; background: transparent;
}
.sidebar-point-row {
  display: flex; align-items: center; gap: 0;
  padding: 4px 16px; background: transparent; min-height: 34px;
}
.sidebar-point-row:hover { background: rgba(0,0,0,0.04); border-radius: 8px; }

.sidebar-point-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.25);
}
.sidebar-point-name {
  flex: 1; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: rgba(0,0,0,0.87); padding-left: 32px;
}
.sidebar-point-name:hover { text-decoration: underline; }
.sidebar-point-detail {
  padding: 0 16px 6px 16px;
  background: transparent; font-size: 12px; color: rgba(0,0,0,0.7);
}
.sp-detail-row { display: flex; gap: 16px; align-items: center; padding: 2px 0; }
.sp-detail-ico { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.sp-detail-ico svg { display: block; }
.sp-detail-text { display: flex; flex-direction: column; min-width: 0; }
.sp-detail-pri { font-size: 12px; color: rgba(0,0,0,0.87); white-space: nowrap; }
.sp-detail-sec { font-size: 12px; color: rgba(0,0,0,0.54); white-space: nowrap; }

/* Point row: [icon] name [arrow] — clicking the row toggles the detail. */
.sidebar-point-row { cursor: pointer; }
.sidebar-point-ico {
  flex-shrink: 0; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center;
}
.sidebar-point-ico img { width: 24px; height: 24px; object-fit: contain; display: block; }
.sidebar-point-arrow {
  flex-shrink: 0; display: inline-flex; align-items: center; color: rgba(0,0,0,0.45);
}
.sidebar-point-arrow svg { display: block; transition: transform .15s; }
.sidebar-point.expanded .sidebar-point-arrow svg { transform: rotate(180deg); }

/* Route / line Delete + Edit button row (top of an expanded group). */
.sidebar-grp-actions { display: flex; gap: 6px; padding: 4px 2px 2px; }
.sidebar-grp-ico { display: inline-flex; align-items: center; margin-right: 6px; width: 24px; height: 24px; }
.sidebar-grp-ico svg { display: block; }
.sb-act {
  background: none; border: none; cursor: pointer; padding: 3px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.sb-act svg { display: block; }
.sb-act:hover { background: rgba(0,0,0,0.06); }
.sb-act[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }

/* Action buttons inside an expanded point detail. */
.sp-detail-actions {
  display: flex; gap: 4px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Map */
#map { grid-area: map; position: relative; }
/* 3D scene (ArcGIS SceneView) occupies the same cell as the 2D map; toggled by 2D/3D menu. */
#scene3d { grid-area: map; position: relative; background: #0b1d2c; display: flex; flex-direction: column; }
#scene3d[hidden] { display: none; }
/* Surface-to-Air View (4th view) — same cell as the map; ground-up terrain masking. */
#scene-s2a { grid-area: map; position: relative; background: #0b1d2c; overflow: auto; display: flex; align-items: center; justify-content: center; }
#scene-s2a:has(.s2a-wrap) { display: block; align-items: initial; }
#scene-s2a[hidden] { display: none; }
.s2a-placeholder { text-align: center; color: #cfe3ef; font: 400 14px/1.65 system-ui, sans-serif; max-width: 460px; padding: 0 24px; }
.s2a-ph-title { font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.s2a-ph-sub { opacity: 0.82; }
.s2a-wrap { max-width: 1500px; margin: 0 auto; padding: 16px 20px 24px; color: #dfeefc; font-family: system-ui, sans-serif; position: relative; }
.s2a-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.s2a-title { font-size: 18px; font-weight: 500; color: #fff; }
.s2a-modes { display: inline-flex; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 2px; }
.s2a-mode-btn { padding: 5px 14px; background: transparent; color: #9fb6c9; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
.s2a-mode-btn:hover { color: #fff; }
.s2a-mode-btn.active { background: #00bcd4; color: #06222b; }
.s2a-head .s2a-repick { margin-left: auto; }
.s2a-main { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: center; }
.s2a-cut-col { flex: 1 1 460px; min-width: 0; }
.s2a-pip { flex: 0 0 320px; width: 320px; height: 360px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.s2a-pip-bar { display: flex; align-items: center; gap: 10px; padding: 5px 9px; background: rgba(0,0,0,0.6); flex: 0 0 auto; }
.s2a-pip-label { font: 600 11px system-ui, sans-serif; color: #fff; }
.s2a-pip-ctl { display: flex; align-items: center; gap: 5px; font: 11px system-ui, sans-serif; color: #cfe3ef; }
.s2a-pip-ctl input[type="range"] { width: 56px; accent-color: var(--st-active); cursor: pointer; }
.s2a-pip-ctl b { background: #6b6b6b; color: #fff; border-radius: 3px; padding: 1px 6px; min-width: 22px; text-align: center; }
.s2a-scene { flex: 1 1 auto; min-height: 0; width: 100%; background: #0b1d2c; }
.s2a-scene-msg { display: flex; align-items: center; justify-content: center; height: 100%; color: #9fb6c9; font: 13px system-ui, sans-serif; text-align: center; padding: 12px; }
.s2a-head .s2a-sub { font-size: 13px; font-weight: 400; color: #9fb6c9; margin-left: 8px; }
.s2a-readout { margin: 10px 0 14px; font-size: 14px; }
.s2a-spot { margin: 0 0 6px; font-size: 12px; color: #9fb6c9; }
.s2a-spot b { color: #dfeefc; font-weight: 600; }
.s2a-ctls { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; align-items: center; margin-top: 14px; }
.s2a-ctl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #b9cee0; }
.s2a-ctl input[type="range"] { width: 150px; accent-color: #00e5ff; }
.s2a-ctl select { height: 30px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; }
.s2a-ctl b { color: #fff; min-width: 52px; text-align: right; }
.s2a-comp-wrap { gap: 7px; }
.s2a-compass { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: grab; touch-action: none; flex: 0 0 auto; }
.s2a-compass:active { cursor: grabbing; }
.s2a-compass svg { width: 52px; height: 52px; display: block; }
.s2a-comp-face { fill: #f4f6f9; stroke: #c2c8d0; stroke-width: 1; }
.s2a-comp-card { fill: #5a6470; font: 700 9px system-ui, sans-serif; text-anchor: middle; }
.s2a-comp-in { width: 32px; text-align: right; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; height: 26px; font-size: 13px; }
.s2a-comp-unit { color: #fff; min-width: 0 !important; }
.s2a-picker { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(4,12,20,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: s2a-fade 0.15s ease-out; }
.s2a-pick-card { width: min(920px, 90%); height: min(640px, 88%); display: flex; flex-direction: column; background: #0e2233; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 64px rgba(0,0,0,0.6); animation: s2a-pop 0.18s ease-out; }
@keyframes s2a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s2a-pop { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
.s2a-pick-x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #cfe3ef; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.s2a-pick-x:hover { background: rgba(255,255,255,0.16); color: #fff; }
.s2a-hillshade { mix-blend-mode: multiply; }
.s2a-pick-sel { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #93a7bd); }
.s2a-pick-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: linear-gradient(180deg, #143750, #0e2233); color: #eaf3fb; border-bottom: 1px solid rgba(255,255,255,0.08); }
.s2a-pick-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #00bcd4; color: #06222b; font: 700 14px/1 system-ui, sans-serif; display: flex; align-items: center; justify-content: center; }
.s2a-pick-txt { flex: 1 1 auto; min-width: 0; }
.s2a-pick-title { font-size: 14px; font-weight: 600; color: #fff; }
.s2a-pick-hint { font-size: 12px; color: #9fb6c9; margin-top: 2px; }
.s2a-pick-btn { flex: 0 0 auto; padding: 7px 14px; background: rgba(255,255,255,0.08); color: #dfeefc; border: 1px solid rgba(255,255,255,0.22); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; }
.s2a-pick-btn:hover { background: rgba(255,255,255,0.16); }
.s2a-mini { flex: 1; min-height: 0; }
.s2a-repick { margin-left: 12px; padding: 3px 10px; background: rgba(255,255,255,0.1); color: #cfe3ef; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; cursor: pointer; font-size: 12px; vertical-align: middle; }
.s2a-repick:hover { background: rgba(255,255,255,0.18); }
body.s2a-mode #app, body.a2s-mode #app { grid-template-columns: 0 1fr; }   /* collapse the mission-data sidebar in the immersive views */
body.s2a-mode #brand, body.a2s-mode #brand,
body.s2a-mode #search-wrap, body.a2s-mode #search-wrap { display: none; }   /* brand cell + search are 2D-map chrome — hidden in Air-to-Surface / Surface-to-Air */
/* Surface-to-Air View Settings (the ⚙ gear — bare glyph, matching the Air-to-Surface gear) */
.s2a-gear { background: none; border: none; cursor: pointer; font-size: 28px; color: #9fb6c9; line-height: 1; padding: 0 0 0 6px; align-self: center; }
.s2a-gear:hover { color: #fff; }
body.s2a-no-pip .s2a-pip { display: none; }            /* Show Ground View off → the cutaway takes the full width */
body.s2a-declutter .s2a-pip-bar { display: none; }     /* Declutter Ground View → hide the label/FOV bar for a clean image */
.s2a-plane-mk { background: transparent; border: 0; }
#s3-view { position: relative; flex: 1; min-height: 0; }
.scene3d-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; background: #0b1d2c; z-index: 5;
}

/* Air-to-Surface View Parameters bar */
#s3-params { background: #fff; border-bottom: 1px solid #ddd; padding: 6px 14px 10px; flex: none; }
#s3-params.collapsed .s3-params-row { display: none; }
#s3-params.collapsed .s3-collapse { transform: rotate(180deg); }
.s3-params-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: #222; }
.s3-collapse { background: none; border: none; cursor: pointer; font-size: 18px; color: #555; line-height: 1; }
.s3-params-row { display: flex; align-items: flex-start; gap: 18px; margin-top: 4px; }
.s3-ctl { display: flex; flex-direction: column; align-items: center; }
.s3-ctl:not(.s3-hdg) { flex: 1; max-width: 300px; }
.s3-lbl { color: var(--st-active); font-size: 14px; align-self: flex-start; }
.s3-valbox { background: #6b6b6b; color: #fff; font-size: 13px; border-radius: 3px; padding: 2px 8px; margin: 4px 0; }
.s3-slider-wrap { position: relative; width: 100%; display: flex; align-items: center; }
.s3-slider { width: 100%; accent-color: var(--st-active); cursor: pointer; position: relative; z-index: 1; margin: 0; display: block; }
/* tick marks on the track (Sensor FOV / Sensor Zoom), matching the bundle's marked sliders */
.s3-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; justify-content: space-between; padding: 0 7px; pointer-events: none; z-index: 2; }
.s3-ticks span { width: 2px; height: 2px; border-radius: 50%; background: rgba(0,0,0,0.5); }
.s3-hdg { min-width: 70px; }
.s3-dial { cursor: pointer; touch-action: none; margin-top: 2px; }
.s3-gear { background: none; border: none; cursor: pointer; font-size: 32px; color: #555; align-self: center; line-height: 1; }
.s3-gear:hover { color: #222; }

/* Air-to-Surface View Settings dialog */
.s3-set-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.s3-set-head { color: #777; font-size: 15px; margin-bottom: 10px; }
.s3-set-opt { display: flex; align-items: center; gap: 10px; margin: 6px 0; cursor: pointer; font-size: 15px; color: #222; white-space: nowrap; }
.s3-set-opt input { width: 18px; height: 18px; accent-color: var(--st-active); cursor: pointer; }

/* Sensor Display inset */
#s3-tgp {
  position: absolute; right: 14px; bottom: 14px; width: 480px; height: 480px;
  border: 3px solid #000; border-radius: 4px; overflow: hidden; z-index: 6; background: #000;
}
#s3-tgp-view { position: absolute; inset: 0; }
#s3-readout { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.s3-rd-north { flex: none; background: #fff; border-radius: 50%; }
.s3-rd-lines { display: inline-flex; flex-direction: column; gap: 4px; }
.s3-rd-1, .s3-rd-2 {
  background: #fff; color: #000; font-size: 15px; padding: 3px 12px;
  border: 1px solid #000; border-radius: 12px; white-space: nowrap; align-self: stretch;
}
.s3-snip {
  position: absolute; right: 10px; bottom: 8px; z-index: 7; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--st-active); color: #fff; border: none; border-radius: 4px;
  padding: 7px 14px; font-size: 13px; font-weight: 500; letter-spacing: .5px;
}
.s3-snip:hover { background: var(--st-active); }
#map.placing { cursor: crosshair; }

/* Coordinate readout — top-right, dark translucent (matches the live tool's panel position) */
/* Zoom control sits just below the B&R box (which is ~76px tall at top:76px). */
.leaflet-top.leaflet-right .leaflet-control-zoom { margin-top: 128px; }

/* Right-side tool stack (below the +/-). */
.tool-bar { display: flex; flex-direction: column; }
.tool-btn {
  width: 34px; height: 34px; padding: 0; background: #fff; border: none;
  border-bottom: 1px solid #ccc; color: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tool-btn:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.tool-btn:last-child { border-bottom: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.tool-btn:hover { background: #f4f4f4; }
.tool-btn.active { color: var(--st-active); }

/* Bearing & Range cursor tooltip */
.br-cursor-tip {
  background: rgba(0,0,0,0.6); color: #fff; border: none; box-shadow: none;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; padding: 2px 6px;
}
.br-cursor-tip::before { display: none; }

/* ---- Overlay Options dialog ---- */
.ov-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,0.5);
}
.ov-dialog {
  background: #fff; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  width: auto; min-width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; font-family: "Roboto","Helvetica","Arial",sans-serif;
}
.ov-header { display: flex; align-items: center; gap: 6px; padding: 18px 22px 6px; }
.ov-header .ov-def-set { margin-left: auto; }
.ov-title { font-size: 20px; font-weight: 500; color: rgba(0,0,0,0.87); }
.ov-close { background: none; border: none; font-size: 22px; color: rgba(0,0,0,0.5); cursor: pointer; line-height: 1; }
.ov-close:hover { color: rgba(0,0,0,0.8); }
.ov-tabs { padding: 0 22px; border-bottom: 1px solid #e0e0e0; display: flex; gap: 18px; }
.ov-tab { display: inline-block; padding: 10px 2px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: rgba(0,0,0,0.55); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.ov-tab:hover { color: rgba(0,0,0,0.8); }
.ov-tab.active { color: var(--st-active); border-bottom-color: var(--st-active); }
.ov-body { padding: 16px 22px; overflow-y: auto; display: flex; gap: 28px; align-items: flex-start; }
.ov-col { min-width: 120px; }
.ov-col-title { font-size: 14px; color: rgba(0,0,0,0.6); margin-bottom: 8px; font-weight: 700; }
.ov-subtitle { margin-top: 14px; font-weight: 400; }   /* group sub-headers stay light; only the column title is bold */
.ov-subtitle-bold { margin-top: 14px; }   /* a group header that reads as a column title (bold, like UTTR) */
/* AAR tab: search + Select/Clear All + a scrollable per-country accordion of track checkboxes. */
.ov-aar { width: 100%; display: flex; flex-direction: column; }
.ov-aar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.ov-aar-count { font-size: 13px; color: rgba(0,0,0,0.6); }
.ov-aar-head > span:last-child { display: flex; gap: 6px; }
.ov-aar-search { width: 100%; padding: 7px 10px; margin-bottom: 6px; border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px; font-size: 14px; }
.ov-aar-hint { font-size: 12px; color: rgba(0,0,0,0.45); margin-bottom: 8px; line-height: 1.4; }
.ov-aar-acc { max-height: 360px; overflow-y: auto; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; padding: 4px 10px; }
.ov-aar-acc .ov-acc-body { padding-left: 22px; }
.ov-aar-empty { font-size: 13px; color: rgba(0,0,0,0.4); padding: 12px; text-align: center; }
/* Per-country airspace accordion: clickable country header + collapsible type checkboxes. */
.ov-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px;
  color: rgba(0,0,0,0.87); cursor: pointer; user-select: none; }
.ov-acc-head .ov-caret { width: 12px; text-align: center; color: rgba(0,0,0,0.5); font-size: 18px; line-height: 1; transition: transform 0.15s ease; }
.ov-acc-head.open .ov-caret { transform: rotate(90deg); }
.ov-acc-body { padding-left: 26px; }
.ov-radio, .ov-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: rgba(0,0,0,0.87); cursor: pointer; }
.ov-radio input, .ov-check input { accent-color: var(--st-active); width: 18px; height: 18px; flex-shrink: 0; }

/* FAA obstacle tower icons (DOF overlay). Clear Leaflet's default white divIcon box. */
.obs-icon { background: transparent; border: none; cursor: pointer; }
/* "Loading obstacles…" bar, bottom-center of the map while obstacles are fetched. */
.obs-loading {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1000;
  background: rgba(0,0,0,0.72); color: #fff; font: 13px/1 "Roboto", sans-serif;
  padding: 7px 14px; border-radius: 14px; pointer-events: none; white-space: nowrap;
}
.ov-hint { font-size: 12px; color: rgba(0,0,0,0.55); margin-top: 6px; line-height: 1.4; max-width: 220px; }

/* "Update Available" pill (updatecheck.js): shown when the deployed build id differs from the
   running bundle's. Fixed under the (variable-height) toolbar, above map UI but below dialogs. */
.update-pill {
  position: fixed; left: 50%; top: calc(var(--tbh, 64px) + 10px); transform: translateX(-50%); z-index: 9500;
  background: #2b6cb0; color: #fff; border: none; border-radius: 999px; cursor: pointer;
  font: 600 13px "Roboto", sans-serif; padding: 9px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.update-pill:hover { background: #2c7be5; }

/* Weather: cloud-button panel (radar/satellite toggles) + bottom time slider. */
.wx-panel {
  position: fixed; z-index: 9000; display: none; min-width: 150px;
  background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  padding: 10px 12px; font: 14px "Roboto", sans-serif; color: rgba(0,0,0,0.85);
}
.wx-panel-title { font-weight: 600; margin-bottom: 6px; }
.wx-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.wx-check input { width: 16px; height: 16px; accent-color: var(--st-active); }
.wx-note { font-size: 11px; color: #c62828; margin-top: 4px; }
/* B&R ruler labels (multi-leg measure tool). */
.leaflet-tooltip.brr-lbl {
  background: #fff; border: 1px solid #c62828; color: #111; font: 12px/1.25 "Roboto", sans-serif;
  padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); white-space: nowrap;
}
.leaflet-tooltip.brr-lbl::before { display: none; }   /* no callout arrow */
.leaflet-tooltip.brr-live { background: rgba(255,255,255,0.85); border-style: dashed; }

.wx-timebar {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1000;
  display: none; align-items: center; gap: 10px; padding: 6px 12px;
  background: rgba(0,0,0,0.72); border-radius: 18px; color: #fff; font: 12px "Roboto", sans-serif;
}
/* Range sliders inside the Settings dialog (e.g. Weather opacity defaults). */
.settings-range {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.2); outline: none; cursor: pointer;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--st-active); cursor: pointer;
}
.settings-range::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--st-active); cursor: pointer;
}

/* Opacity sliders, sitting just above the timeline. */
.wx-opacity {
  position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 1000;
  display: none; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 12px;
  background: rgba(0,0,0,0.72); border-radius: 14px; color: #fff; font: 12px "Roboto", sans-serif;
}
.wx-opacity .wx-op { display: flex; align-items: center; gap: 7px; cursor: default; }
.wx-opacity .wx-op > span { opacity: 0.85; white-space: nowrap; width: 58px; }
.wx-opacity .wx-op input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 90px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.3); outline: none; cursor: pointer;
}
.wx-opacity .wx-op input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.wx-opacity .wx-op input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border: none; border-radius: 50%; background: #fff; cursor: pointer;
}
.wx-timebar .wx-play {
  background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; line-height: 1;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; flex: none;
}
.wx-timebar .wx-play:disabled { opacity: 0.4; cursor: default; }
.wx-timebar .wx-play.loading {           /* spinning wheel while Play preloads all frames */
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%;
  width: 14px; height: 14px; animation: wx-spin 0.8s linear infinite;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-timebar .wx-track { position: relative; width: 210px; height: 20px; display: flex; align-items: center; }
/* Progress track. Base is the light-gray groove; a blue fill grows with the playhead, and the part
   of the fill inside the nowcast region is red. Thumb is blue on observed frames, red on forecast.
   Insets = the thumb radius (7px) so the dots, fill, and thumb all line up. */
.wx-timebar .wx-trackbar {
  position: absolute; left: 7px; right: 7px; top: 50%; height: 6px; transform: translateY(-50%);
  background: rgba(255,255,255,0.25); border-radius: 3px; pointer-events: none; z-index: 0; overflow: hidden;
}
.wx-timebar .wx-fill-b { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #6b7686; }
.wx-timebar .wx-fill-r { position: absolute; top: 0; bottom: 0; left: 100%; width: 0; background: #e53935; }
/* Native range: transparent track (the trackbar shows through); the thumb colors by frame type. */
.wx-timebar .wx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 1; }
.wx-timebar .wx-range::-webkit-slider-runnable-track { background: transparent; height: 20px; }
.wx-timebar .wx-range::-moz-range-track { background: transparent; height: 20px; }
.wx-timebar .wx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #6b7686; box-shadow: 0 0 2px rgba(0,0,0,0.5); cursor: pointer; transition: background-color 0.25s ease; }
.wx-timebar .wx-range::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #6b7686; box-shadow: 0 0 2px rgba(0,0,0,0.5); cursor: pointer; transition: background-color 0.25s ease; }
.wx-timebar .wx-range.on-forecast::-webkit-slider-thumb { background: #e53935; }
.wx-timebar .wx-range.on-forecast::-moz-range-thumb { background: #e53935; }
.wx-timebar .wx-ticks { position: absolute; left: 7px; right: 7px; top: 50%; height: 0; pointer-events: none; z-index: 0; }
.wx-timebar .wx-tick {                                   /* gray frame dots; the thumb sits over the active one */
  position: absolute; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.6); transform: translate(-50%, -50%);
}
.wx-timebar .wx-tick.forecast { background: #e53935; }   /* nowcast frame dots are red */
/* Hover tooltip showing a frame's time, floating above the cursor over the slider. */
.wx-frame-tip {
  position: fixed; z-index: 9000; pointer-events: none; white-space: nowrap;
  background: rgba(0,0,0,0.85); color: #fff; font: 12px "Roboto", sans-serif;
  padding: 3px 8px; border-radius: 4px; transform: translate(-50%, calc(-100% - 10px));
}
.wx-timebar .wx-time { min-width: 116px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
/* "Loading weather…" bar (like the obstacles loader), just above the time slider. */
.wx-loading {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 1000;
  background: rgba(0,0,0,0.72); color: #fff; font: 13px/1 "Roboto", sans-serif;
  padding: 7px 14px; border-radius: 14px; pointer-events: none; white-space: nowrap;
}

/* Map text annotations: give a clear selected/editing state (the boxes are otherwise styled
   purely inline, so there was no visual cue for what you're editing). */
.map-text.selected { outline: 1px dashed rgba(86,97,111,0.9); outline-offset: 2px; }
.map-text[contenteditable="true"] {
  outline: 2px solid var(--st-active); outline-offset: 2px;
  background: rgba(0,0,0,0.45); border-radius: 3px;
  caret-color: #fff; cursor: text !important;
}
.ov-footer { display: flex; justify-content: flex-end; padding: 8px 18px 14px; }
.ov-acc-master { accent-color: var(--st-active); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.ov-close-btn { background: none; border: none; color: var(--st-active); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; padding: 8px 12px; }
.ov-close-btn:hover { background: rgba(86,97,111,0.08); border-radius: 4px; }


/* B&R box (top-right) — matches the live tool. */
.readout {
  position: absolute; right: 12px; top: 76px; z-index: 1000;
  background: rgba(0,0,0,0.5); color: #fff; padding: 2px 10px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 16px;
  line-height: 24px; text-align: right; pointer-events: none; white-space: nowrap;
}
/* The small declutter chevron is the only clickable part of the (otherwise click-through) box. */
.readout-declutter {
  pointer-events: auto; cursor: pointer; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: 7px;
  background: transparent; border: 0; border-radius: 4px; color: #fff; opacity: 0.6;
}
.readout-declutter:hover { opacity: 1; background: rgba(255,255,255,0.18); }
.readout-declutter svg { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Pickr color picker ---- */
.pcr-app { z-index: 20001 !important; }                 /* above the edit dialog (10000) and airplane picker (20000) */
.pcr-button { width: 34px; height: 26px; border-radius: 4px; border: 1px solid #bbb; }
.sp-color-btn { padding: 0; }

/* ---- Edit dialog ---- */
/* Drag-and-drop scenario load: full-page hint shown while a file is dragged over the page. */
.scn-drop-hint {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,30,45,0.35); pointer-events: none;
}
.scn-drop-hint .scn-drop-box {
  padding: 18px 28px; border: 3px dashed #fff; border-radius: 12px;
  background: rgba(20,30,45,0.78); color: #fff;
  font: 600 18px Roboto, system-ui, sans-serif; letter-spacing: 0.3px;
}
.sp-dialog-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
}
.sp-dialog {
  background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
}
.sp-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: #fff; color: rgba(0,0,0,0.87);
}
.sp-dialog-title { font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: .0075em; }
.sp-dialog-close {
  background: none; border: none; color: rgba(0,0,0,0.54); font-size: 18px;
  cursor: pointer; padding: 4px 8px; border-radius: 50%; line-height: 1;
}
.sp-dialog-close:hover { background: rgba(0,0,0,0.04); }
/* "Reset to Default" button in the Settings header — Clear-button (danger) look, pushed to the
   right next to the close ×. */
.settings-reset { margin-left: auto; margin-right: 8px; }

/* Bullseye ring distance labels */
/* Bullseye distance labels reuse .sp-label but aren't draggable. */
.sp-label.bull { cursor: default; }

.sp-dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
/* Side-by-side solve preview (Maneuvers Flown as Drawn | Exact Positions Solved) */
.apf-preview-body { flex-direction: row; align-items: flex-start; gap: 18px; }
.apf-prev-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.apf-prev-title { font-weight: 700; font-size: 17px; color: #1f2733; }
.apf-prev-grid { background: #0d1117; border: 1px solid #2b6cb0; border-radius: 8px; overflow: hidden; line-height: 0; }
.apf-preview .apf-prev-accept { min-width: 150px; }
@media (max-width: 820px) { .apf-preview-body { flex-direction: column; align-items: center; } }
.sp-field textarea {
  width: 100%; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 14px; font-family: "Roboto","Helvetica","Arial",sans-serif; resize: vertical; color: #222;
}
.sp-field input[type="number"] { width: 100%; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.sp-check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(0,0,0,0.8); cursor: pointer; }
.sp-check-row input { width: 16px; height: 16px; accent-color: var(--st-active); }
.sp-shape-toggle { display: flex; }
.sp-shape-btn { flex: 1; padding: 6px; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; font-size: 13px; }
.sp-shape-btn:first-child { border-radius: 4px 0 0 4px; }
.sp-shape-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.sp-shape-btn.active { background: var(--st-active); color: #fff; border-color: var(--st-active); }
.sp-shape-fields { display: flex; flex-direction: column; gap: 12px; }

.sp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #666; }
.sp-field input[type="text"],
.sp-field select {
  width: 100%; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 14px; color: #222;
}
.sp-field input[type="text"]:focus,
.sp-field select:focus { outline: none; border-color: var(--st-active); box-shadow: 0 0 0 2px rgba(86,97,111,0.2); }
.sp-field input[type="range"] { width: 100%; }

.sp-color-row { display: flex; align-items: center; gap: 8px; }
.sp-field input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.sp-btn-small {
  padding: 4px 10px; font-size: 12px; border: 1px solid #ccc; border-radius: 4px;
  background: #f5f5f5; cursor: pointer; color: #444;
}
.sp-btn-small:hover { background: #e0e0e0; }

.sp-dialog-coords { font-size: 12px; color: #888; font-family: monospace; margin-top: 4px; }

/* ---- Aircraft (enemy/friendly) ---- */
.ph-ac-wrap { background: transparent !important; border: none !important; }
/* Glow on the currently-selected aircraft so it's obvious which one is being edited. */
.ph-ac-wrap.ph-ac-selected .ph-ac-img {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #93a7bd);
}
.ph-ac-lbl.leaflet-tooltip {
  background: rgba(0,0,0,0.7); color: #fff; border: none; box-shadow: none;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; text-align: center; padding: 2px 4px;
}
.ph-ac-lbl.leaflet-tooltip-bottom::before { border-bottom-color: rgba(0,0,0,0.7); }
.ph-ac-lbl.leaflet-tooltip-top::before { border-top-color: rgba(0,0,0,0.7); }
.ph-ac-lbl.leaflet-tooltip-left::before { border-left-color: rgba(0,0,0,0.7); }
.ph-ac-lbl.leaflet-tooltip-right::before { border-right-color: rgba(0,0,0,0.7); }
/* Dragged off its aircraft: drop the arrow — the dashed leader shows the association instead. */
.ph-ac-lbl.moved::before { display: none; }
/* Inline label ("Inside" label position): the label lives INSIDE the aircraft icon, centred on the
   symbol. It sits in the non-rotating wrapper so it stays upright while the silhouette rotates to
   heading. Font size + padding are set inline, scaled to the icon size (see inlineLabelHTML). */
.ph-ac-inlbl {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); color: #fff; border-radius: 2px;
  font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.1;
  text-align: center; white-space: nowrap; pointer-events: none;
}

/* B/E position-call label (Phase B) — its own standalone tooltip, styled to match the aircraft label. */
.be-label.leaflet-tooltip {
  background: rgba(0,0,0,0.7); color: #fff; border: none; box-shadow: none;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; text-align: center; padding: 2px 4px; white-space: nowrap;
}
.be-label.leaflet-tooltip-top::before { border-top-color: rgba(0,0,0,0.7); }
.be-label.leaflet-tooltip-bottom::before { border-bottom-color: rgba(0,0,0,0.7); }
.be-label.leaflet-tooltip-left::before { border-left-color: rgba(0,0,0,0.7); }
.be-label.leaflet-tooltip-right::before { border-right-color: rgba(0,0,0,0.7); }

/* Aircraft picker dialog */
.ph-ac-pickov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 20000; display: flex; align-items: center; justify-content: center; }
.ph-ac-pick { background: #fff; border-radius: 8px; padding: 28px 24px 20px; width: 380px; box-sizing: border-box; font-family: Roboto, sans-serif; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.ph-ac-pick-title { font-size: 17px; font-weight: 500; margin-bottom: 18px; color: #222; }
.ph-ac-pick-row { margin-bottom: 14px; }
.ph-ac-pick-lbl { font-size: 12px; color: #666; margin-bottom: 5px; font-weight: 500; text-transform: uppercase; }
.ph-ac-pick select { width: 100%; padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; background: #fff; }
.ph-ac-pick .ph-inline { display: flex; align-items: center; gap: 8px; }
.ph-ac-pick .pcr-button { width: 52px; height: 34px; border-radius: 4px; }
.ph-ac-pick .ph-inline input { width: 56px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; text-align: center; flex: 0 0 auto; }
.ph-step { width: 30px; height: 32px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 700; }
.ph-deg { color: #888; font-size: 13px; }
.ph-presets { display: flex; gap: 4px; margin-top: 8px; }
.ph-hdg-preset { flex: 1; padding: 5px 0; border: 1px solid #ccc; background: #fafafa; border-radius: 4px; cursor: pointer; font-size: 12px; }
.ph-ac-pick-note { font-size: 11px; color: #999; margin: 8px 0 18px; }
.ph-ac-pick-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* Aircraft edit bar (top center) */
#ph-ac-panel { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #e3e6ea; border-radius: 9px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 8px 12px; z-index: 10001; display: none; align-items: center; gap: 10px; max-width: calc(100vw - 16px); overflow-x: auto; font-family: Roboto, sans-serif; font-size: 13px; color: #333; }
#ph-ac-panel input[type="text"], #ph-ac-panel #ph-ac-name, #ph-ac-panel select { height: 30px; padding: 0 8px; border: 1px solid #d4d8dd; border-radius: 5px; font-size: 13px; color: #333; background: #fff; box-sizing: border-box; }
#ph-ac-panel select { padding: 0 6px; cursor: pointer; }
#ph-ac-panel input:focus, #ph-ac-panel select:focus { outline: none; border-color: var(--st-active); box-shadow: 0 0 0 2px rgba(86,97,111,0.15); }
#ph-ac-panel #ph-ac-name { width: 150px; }
#ph-ac-panel #ph-ac-hdg { width: 54px; text-align: center; }
#ph-ac-panel #ph-ac-alt { width: 58px; text-align: center; }
#ph-ac-panel #ph-ac-orb-len, #ph-ac-panel #ph-ac-orb-wid { width: 62px; text-align: center; }
#ph-ac-panel #ph-ac-orb-hdg { width: 54px; text-align: center; }
#ph-ac-panel #ph-ac-orb-turn { text-align: center; text-align-last: center; }
#ph-ac-orb-fields { display: inline-flex; align-items: center; gap: 8px; }
.ph-ac-fld { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ph-ac-fld-lbl { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .03em; line-height: 1; white-space: nowrap; }   /* matches the Picture Designer's .ape-lbl */
#ph-ac-panel .pcr-button { width: 30px; height: 30px; border-radius: 5px; }
#ph-ac-panel label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #444; }
.ph-ac-copy, .ph-ac-del { height: 30px; padding: 0 13px; border-radius: 5px; cursor: pointer; font-size: 12.5px; font-weight: 500; background: #fff; }
.ph-ac-copy { border: 1px solid var(--st-active); color: var(--st-active); }
.ph-ac-copy:hover { background: rgba(86,97,111,0.08); }
.ph-ac-del { border: 1px solid #c62828; color: #c62828; }
.ph-ac-del:hover { background: rgba(198,40,40,0.08); }

/* Distance Calculator */
.dc-result { font-size: 16px; font-weight: 500; color: rgba(0,0,0,0.87); text-align: center; min-height: 20px; margin-top: 4px; }
.mui-field input.dc-error { background: rgba(255,0,0,0.18); }
.sp-dialog .mui-field input.kml-error { border: 2px solid #d32f2f; background: rgba(255,0,0,0.10); padding: 12px 11px; }

.sp-dialog-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 12px 16px;
}
.sp-btn-text {
  padding: 6px 12px; font-size: 14px; border-radius: 4px; cursor: pointer;
  background: none; border: none; color: var(--st-active); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
}
.sp-btn-text:hover { background: rgba(86,97,111,0.08); }

/* MUI-style outlined fields (floating label cut into the border). */
.sp-dialog .mui-field { position: relative; }
.sp-dialog .mui-field > .mui-label {
  position: absolute; top: -7px; left: 9px; background: #fff; padding: 0 5px;
  font-size: 12px; color: rgba(0,0,0,0.6); pointer-events: none;
}
.sp-dialog .mui-field input,
.sp-dialog .mui-field textarea,
.sp-dialog .mui-field select {
  width: 100%; padding: 13px 12px; border: 1px solid rgba(0,0,0,0.28); border-radius: 4px; box-sizing: border-box;
  font-size: 16px; font-family: "Roboto","Helvetica","Arial",sans-serif; color: rgba(0,0,0,0.87); background: #fff;
}
.sp-dialog .mui-field textarea { resize: vertical; }
/* Safari clips a <select>'s text when it has large vertical padding — use a fixed height with
   horizontal-only padding so the option text centers (matches the inputs; harmless in Chrome). */
.sp-dialog .mui-field select { height: 47px; padding-top: 0; padding-bottom: 0; }
.sp-dialog .mui-field input:focus,
.sp-dialog .mui-field textarea:focus,
.sp-dialog .mui-field select:focus { outline: none; border: 2px solid var(--st-active); padding: 12px 11px; }
.sp-dialog .mui-field select:focus { padding-top: 0; padding-bottom: 0; }
.sp-dialog .mui-field:focus-within > .mui-label { color: var(--st-active); }
.sp-dialog .mui-caption { font-size: 12px; color: rgba(0,0,0,0.6); margin: 4px 0 0 12px; }

/* Inline rows (Point Color, Opacity). */
.sp-dialog .mui-inline { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(0,0,0,0.87); }
.sp-dialog .mui-inline input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.sp-dialog .mui-inline input[type="range"] { flex: 1; accent-color: var(--st-active); }

/* MUI switch. */
.mui-switch-row { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(0,0,0,0.87); cursor: pointer; }
.mui-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.mui-switch input { opacity: 0; width: 0; height: 0; }
.mui-switch-track {
  position: absolute; inset: 0; background: rgba(0,0,0,0.25); border-radius: 11px; transition: background 0.15s;
}
.mui-switch-track::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.mui-switch input:checked + .mui-switch-track { background: var(--st-active); }
.mui-switch input:checked + .mui-switch-track::before { transform: translateX(16px); }
/* Compact toggle for dense inline toolbars (text style panel, aircraft panel, 3D settings) */
.mui-switch.sm { width: 28px; height: 16px; }
.mui-switch.sm .mui-switch-track::before { width: 12px; height: 12px; left: 2px; top: 2px; }
.mui-switch.sm input:checked + .mui-switch-track::before { transform: translateX(12px); }
.ph-ac-sw { display: inline-flex; align-items: center; gap: 4px; }
/* Edit-bar control groups: each stays on one line; a thin divider separates them so a wrap reads as clean sections. */
.ph-ac-grp { display: inline-flex; align-items: center; gap: 8px; }
.ph-ac-grp + .ph-ac-grp { border-left: 1px solid #e2e5e9; padding-left: 10px; }

.sp-dialog .sp-dialog-rule { border: none; border-top: 1px solid #e0e0e0; margin: 4px 0; }

/* Bullseye dialog: unit radio row. */
.sp-dialog #be-units { gap: 18px; }
.sp-dialog .be-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; cursor: pointer; }
.sp-dialog .be-radio input { accent-color: var(--st-active); }

/* Overlay/airspace labels — permanent tooltips (bundle: black translucent, white text). */
.leaflet-tooltip.ov-label {
  background: rgba(0,0,0,0.6); border: none; box-shadow: none; color: #fff;
  padding: 2px 4px; font-size: 14px; font-weight: 400; white-space: nowrap;
}
.leaflet-tooltip.ov-label::before { display: none; } /* no callout arrow */

/* MGRS grid labels — small yellow text, no background. */
.leaflet-tooltip.mgrs-grid-label {
  background: transparent; border: 0; box-shadow: none; color: #ffd54f;
  font-size: 11px; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000; padding: 0;
}
.leaflet-tooltip.mgrs-grid-label::before { display: none; }
.leaflet-tooltip.mgrs-gzd { font-size: 15px; }
.leaflet-tooltip.mgrs-100k { font-size: 12px; font-weight: 700; }
.leaflet-tooltip.mgrs-fine { font-size: 10px; font-weight: 500; opacity: 0.9; }

/* Show Lineup Card — printable Mission Data tables. */
.lu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 4000;
  display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 24px;
}
.lu-card {
  background: #fff; border-radius: 6px; width: min(1100px, 95vw);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4); padding: 12px 18px 24px;
}
.lu-header { display: flex; align-items: center; }
.lu-title { flex: 1; text-align: left; font-size: 24px; font-weight: 400; color: rgba(0,0,0,0.87); }
.lu-close { background: none; border: none; font-size: 20px; color: #666; cursor: pointer; }
.lu-printrow { margin: 4px 0 0; }
.lu-print { background: none; border: none; color: var(--st-active); cursor: pointer; padding: 6px; line-height: 0; }
.lu-print:hover { color: var(--st-primary); }

/* Each group sits in its own bordered, rounded box. */
.lu-group { border: 2px solid rgba(0,0,0,0.87); border-radius: 4px; margin-top: 16px; padding: 8px 12px 4px; }
.lu-grp-head { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; color: rgba(0,0,0,0.87); margin: 4px 0 4px 4px; }
.lu-grp-ico { display: block; flex-shrink: 0; }

/* Borderless tables — horizontal row separators only, no cell/header background. */
.lu-table { width: 100%; border-collapse: collapse; font-size: 13px; color: rgba(0,0,0,0.87); }
.lu-table th, .lu-table td {
  border: none; border-bottom: 1px solid #e0e0e0; padding: 12px 14px;
  text-align: left; vertical-align: middle;
}
.lu-table thead th { background: none; font-weight: 500; color: rgba(0,0,0,0.87); }
.lu-table tbody tr:last-child td { border-bottom: none; }
.lu-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.lu-ico { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.lu-remarks { font-size: 12px; color: rgba(0,0,0,0.6); margin-top: 3px; }
.lu-elev { color: rgba(0,0,0,0.7); }

.lu-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
.lu-close-btn {
  background: none; border: none; color: var(--st-active); font-size: 14px; font-weight: 500;
  letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; padding: 8px 12px;
}
.lu-close-btn:hover { background: rgba(86,97,111,0.08); border-radius: 4px; }

@media print {
  body > *:not(.lu-overlay) { display: none !important; }
  .lu-overlay { position: static; background: none; padding: 0; display: block; overflow: visible; }
  .lu-card { box-shadow: none; width: 100%; }
  .lu-printrow, .lu-close, .lu-footer { display: none !important; }
}

/* Standalone Bullseye entry — solid frame, transparent (bundle: border:1 solid, m:2). */
.sidebar-bullseye {
  border: 1px solid rgba(0,0,0,0.87); border-radius: 4px;
  margin: 8px 8px; background: transparent;
}

.sp-btn-danger {
  padding: 5px 11px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 4px; cursor: pointer; background: #fff; border: 1px solid #c62828; color: #c62828;
}
.sp-btn-danger:hover { background: #ffebee; }
.sp-btn-primary {
  padding: 6px 16px; font-size: 14px; border-radius: 4px; cursor: pointer;
  background: var(--st-active); border: none; color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
}
.sp-btn-primary:hover { background: var(--st-active); }

/* Packages (Feature C): floating Make/Unpackage action + azimuth/range line labels. */
#pkg-action-btn {
  position: absolute; z-index: 1000; padding: 5px 12px; font-size: 13px; white-space: nowrap;
}
.pkg-line-label { background: none; border: none; }   /* override Leaflet's default div-icon box */
.pkg-line-label .pkg-lbl-box {   /* designer style: bg-filled blanking box, bold black, no border */
  display: inline-block; transform: translate(-50%, -50%);
  background: #fff; padding: 0 3px; white-space: nowrap;
  font: 700 13px/17px Helvetica, Arial, sans-serif; color: #111;
}

/* ---- Route building ---- */
.toolbar-btn.active {
  background: var(--st-active); border-color: var(--st-active); color: #fff;
  box-shadow: 0 0 0 2px rgba(86,97,111,0.4);
}

/* ---- Coordinate probe popup ---- */
.probe-popup { font-family: "Roboto","Helvetica","Arial",sans-serif; min-width: 180px; }
.probe-line { font-size: 13px; color: rgba(0,0,0,0.87); line-height: 1.5; font-variant-numeric: tabular-nums; }
.probe-elev { font-size: 13px; color: rgba(0,0,0,0.87); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ============================================================
   Mobile / tablet (≤ 820px wide) — phase 1 of the responsive pass.
   The sidebar becomes a slide-in overlay (toolbar hamburger toggles it),
   the top bar scrolls horizontally, and dialogs fit the viewport.
   ============================================================ */
@media (max-width: 820px), ((pointer: coarse) and (max-height: 500px)) {
  /* Single-column app: no sidebar grid column, no brand cell. The toolbar row
     grows so the buttons can wrap instead of needing a sideways swipe.
     Second media arm = landscape phones: wider than 820px but touch + short. */
  #app { grid-template-columns: 0 1fr; grid-template-rows: auto 1fr; }
  #brand { display: none; }

  /* Hamburger always visible; it toggles the overlay (see main.js). */
  #sidebar-open { display: inline-flex !important; align-items: center; justify-content: center; }

  /* Sidebar = slide-in overlay over the map; the giant box-shadow dims the rest
     of the screen, and tapping the visible map closes it (main.js). */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(78vw, 320px); z-index: 3000;
    border-right: 1px solid #e0e0e0;
    transform: translateX(-105%); transition: transform 0.2s ease;
  }
  #app:not(.sidebar-collapsed) #sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35); }

  /* Top bar: wrap to as many rows as needed — every button visible, no swiping. */
  #toolbar { flex-wrap: wrap; row-gap: 2px; padding: 4px 6px; gap: 2px; min-height: 48px; }
  .toolbar-btn { min-width: 0; padding: 4px 7px; font-size: 14px; }
  .route-add-btn { width: 34px; height: 34px; }
  #route-editor-group { flex-wrap: wrap; row-gap: 2px; }

  /* Dialogs (point/shape/bullseye/settings share .sp-dialog; Overlay Options = .ov-dialog):
     cap to the VISIBLE viewport (--vvh shrinks when the keyboard opens, vh doesn't),
     top-align so the keyboard occludes as little as possible, and scroll the body. */
  .sp-dialog-overlay { align-items: flex-start; padding-top: 8px; }
  .sp-dialog { max-width: 94vw; }
  .sp-dialog-body { max-height: calc(var(--vvh, 100vh) - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ov-dialog { max-width: 96vw; max-height: calc(var(--vvh, 100vh) - 30px); overflow-y: auto; }

  /* B&R readout: smaller, and anchored just below the (variable-height) toolbar. */
  .readout { font-size: 13px; line-height: 20px; top: calc(var(--tbh, 64px) + 8px); right: 8px; }

  /* Leaflet zoom control sits below the readout. */
  .leaflet-top.leaflet-right .leaflet-control-zoom { margin-top: 104px; }
}

/* ---- Air Picture Designer ---- */
#picture { grid-area: map; position: relative; overflow: hidden; background: #fff; }
#picture[hidden] { display: none; }
#picture #ap-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: default; display: block; }
#picture #ap-svg.adding { cursor: crosshair; }
/* Floating view toggle pill (All Maneuvers / Starting Picture), top-right of the canvas. */
#ap-frameview-pill { position: absolute; top: 12px; right: 12px; z-index: 600; background: rgba(31,39,51,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 7px 15px; font: 500 12.5px Roboto, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
#ap-frameview-pill:hover { background: rgba(31,39,51,1); }
/* Best-effort solve prompt: top-center, NO backdrop, so the short aircraft stay visible while deciding. */
#apf-miss-prompt { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 620; display: flex; flex-direction: column; gap: 9px; max-width: min(560px, 90%); padding: 11px 15px; background: rgba(31,39,51,0.97); color: #fff; border: 1px solid #2b6cb0; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.45); font: 500 13px Roboto, sans-serif; line-height: 1.35; }
#apf-miss-prompt .apf-miss-actions { display: flex; gap: 8px; justify-content: flex-end; }
#apf-miss-prompt .apf-miss-btn { padding: 7px 14px; border-radius: 7px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-size: 13px; }
#apf-miss-prompt .apf-miss-accept { background: #1f9d57; color: #fff; border-color: #1f9d57; }
#apf-miss-prompt .apf-miss-accept:hover { background: #1b8b4d; }
#apf-miss-prompt .apf-miss-revert { background: transparent; color: #cbd5e1; border-color: #4b5563; }
#apf-miss-prompt .apf-miss-revert:hover { border-color: #9aa6b2; color: #fff; }
/* Zoom +/- control, top-right, matching the 2D Leaflet zoom bar. */
#ap-zoom { position: absolute; top: 60px; right: 14px; z-index: 20; display: flex; flex-direction: column;
  border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.4); overflow: hidden; }
#ap-zoom button { width: 30px; height: 30px; border: none; border-bottom: 1px solid #ccc; background: #fff; color: #333;
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
#ap-zoom button:last-child { border-bottom: none; }
#ap-zoom button:hover { background: #f4f4f4; }
#picture #ap-svg.grabbing, #picture #ap-svg.grabbing * { cursor: grabbing !important; }
/* Inline text-box editor (mirrors the 2D map's click-and-type text box). */
#ap-textedit {
  position: absolute; display: none; z-index: 60; min-width: 6px;
  white-space: pre; line-height: 1.15; padding: 1px 2px;
  outline: 1px dashed var(--st-active); background: rgba(255,255,255,0.55);
  caret-color: var(--st-active); cursor: text;
}
/* Picture tool group in the real toolbar (like #route-editor-group). */
#picture-toolgroup { display: inline-flex; align-items: center; }
#picture-toolgroup .ap-tool-gap { display: inline-block; width: 14px; }
#picture-toolgroup #ap-add-opts, #picture-toolgroup #ap-markup-opts { display: none; align-items: center; }
#picture-toolgroup .ap-tool-sep { display: inline-block; width: 1px; height: 22px; background: rgba(255,255,255,0.4); margin: 0 8px; }
/* Phase 2: frame bar docked at the bottom of the canvas. */
#ap-frames {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: none; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--st-chrome); border-top: 1px solid var(--st-border); box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
  padding: 6px 12px; font-family: Roboto, sans-serif; font-size: 13px;
}
#ap-frames .apf-lbl { font-size: 11px; font-weight: 600; color: var(--st-muted); text-transform: uppercase; letter-spacing: .03em; }
#ap-frames .apf-sep { width: 1px; height: 22px; background: var(--st-border); margin: 0 4px; }
#ap-frames .apf-frame, #ap-frames .apf-btn {
  height: 30px; border: 1px solid var(--st-border-2); background: var(--st-btn); border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--st-text); padding: 0 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: background .12s, border-color .12s;
}
#ap-frames .apf-frame { min-width: 30px; padding: 0 8px; }
#ap-frames .apf-frame:hover, #ap-frames .apf-btn:hover { background: var(--st-btn-hover); border-color: var(--st-active); }
#ap-frames .apf-frame.active, #ap-frames .apf-btn.active { background: var(--st-active); color: #fff; border-color: var(--st-active); box-shadow: inset 0 1px 3px rgba(0,0,0,0.30); }
#ap-frames .apf-del { color: #ff8a8a; border-color: #5e3a3a; }
#ap-frames .apf-bf-enter { background: var(--st-primary); color: #fff; border-color: var(--st-primary); font-weight: 600; }
#ap-frames .apf-bf-enter:hover { background: var(--st-btn-hover); border-color: var(--st-active); }
#ap-frames .apf-bf-solve { background: #1f9d57; color: #fff; border-color: #1f9d57; font-weight: 600; }
#ap-frames .apf-bf-solve:hover { background: #1b8b4d; border-color: #1b8b4d; }
/* Solver: the Solve button floats directly above the "Create Final Picture & Solve" toggle. */
#ap-frames .apf-bf-wrap { position: relative; display: inline-flex; gap: 6px; }
#ap-frames .apf-bf-wrap .apf-bf-solve { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; justify-content: center; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
#ap-frames .apf-bf-wrap .apf-bf-unlock { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
/* Solved bar: Edit + Unlock float together as a centered row above the ✓ Solved pill. */
#ap-frames .apf-bf-float { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: inline-flex; gap: 6px; white-space: nowrap; }
#ap-frames .apf-bf-float .apf-bf-unlock { position: static; left: auto; transform: none; }
#ap-frames .apf-bf-edit { background: #2b6cb0; color: #fff; border-color: #2b6cb0; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
#ap-frames .apf-bf-edit:hover { background: #2c7be5; border-color: #2c7be5; }
/* Edit & Resolve mode: Resolve (green) + Cancel sit in-flow, side by side. */
#ap-frames .apf-bf-resolve { background: #1f9d57; color: #fff; border-color: #1f9d57; font-weight: 600; }
#ap-frames .apf-bf-resolve:hover { background: #1b8b4d; border-color: #1b8b4d; }
/* Solved (locked) state: green status pill + amber Unlock floating above it. */
#ap-frames .apf-bf-solved { background: #1f9d57; color: #fff; border-color: #1f9d57; font-weight: 600; cursor: default; }
#ap-frames .apf-bf-solved:hover { background: #1f9d57; border-color: #1f9d57; }
/* Solved: hide the frame tabs + maneuver selection (keep their space so Play/Ranges/Solved stay put); Play + Ranges remain clickable. */
#ap-frames.picsolved .apf-lbl, #ap-frames.picsolved .apf-frame, #ap-frames.picsolved .apf-add,
#ap-frames.picsolved .apf-del, #ap-frames.picsolved .apf-sep, #ap-frames.picsolved .apf-man { visibility: hidden; }
#ap-frames .apf-bf-unlock { background: #b9770e; color: #fff; border-color: #b9770e; font-weight: 600; }
#ap-frames .apf-bf-unlock:hover { background: #a3680c; border-color: #a3680c; }
/* F2 align/distribute — distinct blue group; stays active while the rest of the solver dock is grayed. */
/* Icon-only buttons (dots): snug padding, no text line-height, centered SVG. */
#ap-frames .apf-align { background: #2b6cb0; color: #fff; border-color: #2b6cb0; padding: 5px 9px; line-height: 0; display: inline-flex; align-items: center; }
#ap-frames .apf-align:hover { background: #245a94; border-color: #245a94; }
#ap-frames .apf-align svg { display: block; }
/* Solver: the rest of the maneuver dock is inert (frame tabs, +/✕, play, ranges, maneuver buttons). */
#ap-frames.solver .apf-frame, #ap-frames.solver .apf-add, #ap-frames.solver .apf-del,
#ap-frames.solver .apf-play, #ap-frames.solver .apf-speed, #ap-frames.solver .apf-stop,
#ap-frames.solver .apf-ranges, #ap-frames.solver .apf-man { opacity: .4; pointer-events: none; }
#ap-frames.solver .apf-hint, #ap-frames.picsolved .apf-hint { display: none; }
#ap-frames .apf-hint { margin-left: auto; padding-left: 14px; color: var(--st-muted); font-size: 12px; font-style: italic; white-space: nowrap; }
/* In Picture Designer mode the map-only chrome is irrelevant — hide it.
   The map File/Edit/Tools menus (data-menu) and route-editor group give way to the
   picture-specific menus; the view toggle (#view-toggle) stays. */
body.pic-mode #sidebar-open,
body.pic-mode #search-wrap,
body.pic-mode .toolbar-menu-wrap[data-menu],
body.pic-mode #route-editor-group { display: none !important; }
/* No mission-data sidebar/brand in the designer — reclaim the full width. */
body.pic-mode #brand,
body.pic-mode #sidebar { display: none; }
body.pic-mode #app { grid-template-columns: 0 1fr; }
/* Toolbar (with its menu dropdowns) must sit above the contextual edit bar. */
body.pic-mode #toolbar { position: relative; z-index: 30; }
/* Contextual edit bar for the selected aircraft/text — docked directly under the
   top toolbar, full width (only shown while something is selected). */
#ap-edit {
  position: fixed; top: 76px; left: 10px; width: 178px; max-height: calc(100vh - 150px);
  background: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  padding: 12px; z-index: 20; display: none; flex-direction: column; align-items: stretch; gap: 9px;
  font-family: Roboto, sans-serif; font-size: 13px; overflow-y: auto;
}
#ap-edit input, #ap-edit select { padding: 3px 5px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
/* Shape-kind picker bar (below the toolbar), like the text editor bar. */
#ap-shapebar {
  position: fixed; top: 76px; left: 10px; width: 178px; max-height: calc(100vh - 150px);
  background: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  padding: 12px; z-index: 20; display: none; flex-direction: column; align-items: stretch; gap: 8px;
  font-family: Roboto, sans-serif; overflow-y: auto;
}
#ap-shapebar .apsb-lbl { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
#ap-shapebar .apsb-btn {
  display: flex; width: 100%; align-items: center; gap: 5px; height: 30px; padding: 0 12px;
  border: 1px solid #c4cad1; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #2b3138;
}
#ap-shapebar .apsb-btn .btn-icon { display: inline-flex; line-height: 0; }
#ap-shapebar .apsb-btn:hover { background: #eef3f8; border-color: #9fb3c6; }
#ap-shapebar .apsb-btn.active { background: var(--st-active); color: #fff; border-color: var(--st-active); }
#ap-shapebar .apsb-hint { margin: 4px 0 0; color: #667; font-size: 12px; font-style: italic; white-space: normal; }
#ap-edit .ape-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
#ap-edit .ape-grp .ape-lbl { flex-basis: 100%; margin-bottom: 1px; }
#ap-edit .ape-lbl { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .03em; }
#ap-edit .ape-unit { font-size: 13px; color: #555; margin-left: 3px; font-family: Roboto, sans-serif; }
#ap-edit #ape-alt { width: 42px; }
/* Transient tip banner (e.g. while Add Aircraft is active). */
#ap-hint {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--st-active); color: #fff; font-family: Roboto, sans-serif; font-size: 12.5px;
  padding: 5px 14px; border-radius: 0 0 8px 8px; z-index: 25; display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); white-space: nowrap;
}
/* All-Frames hint sits at the bottom (above the frame dock) so it never covers the caption. */
#ap-hint.ap-hint-bottom { top: auto; bottom: 56px; border-radius: 8px; }
/* Contextual tooltip shown while hovering a range/azimuth line. */
#ap-linehint {
  position: fixed; z-index: 60; display: none; pointer-events: none;
  background: rgba(33,33,33,0.95); color: #fff; font-family: Roboto, sans-serif;
  font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#ap-edit #ape-text { width: 148px; }
#ap-edit #ape-gname { width: 118px; }
#ap-edit .ape-sep { width: 100%; height: 1px; background: #e3e6ea; margin: 1px 0; }
#ap-edit .ape-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #555; }
#ap-edit .ape-dial { display: inline-flex; cursor: grab; touch-action: none; user-select: none; }
#ap-edit .ape-dial:active { cursor: grabbing; }
#ap-edit button:not(.sp-color-btn) { background: #f1f3f5; border: 1px solid #ccc; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 13px; }
#ap-edit .ape-del { color: #c00; border-color: #e0a0a0; width: 100%; margin-top: 2px; }
/* All Maneuvers: interim-frame ghost aircraft are hidden until hovered (the final ghost + any selected one stay shown). */
#picture g.apg-interim { opacity: 0; transition: opacity .08s; }
#picture g.apg-interim:hover { opacity: .42; }
/* Left/Right chooser that pops above a Flank/Beam/Drag maneuver button. */
#ap-man-popup { position: fixed; z-index: 9500; display: flex; gap: 6px; padding: 6px; background: var(--st-chrome-2); border: 1px solid var(--st-border-2); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
#ap-man-popup::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--st-chrome-2); }
#ap-man-popup button { height: 30px; min-width: 64px; border: 1px solid var(--st-border-2); background: var(--st-btn); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--st-text); padding: 0 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: background .12s, border-color .12s; }
#ap-man-popup button:hover { background: var(--st-btn-hover); border-color: var(--st-active); }
.ap-lib-row { display: flex; align-items: center; padding: 8px 6px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ap-lib-row:hover { background: rgba(0,0,0,0.04); }
.ap-lib-name { flex: 1 1 auto; font-size: 15px; }
/* Preset dialog inline row — match the rest of the dialog's input sizing. */
.apr-row select, .apr-row input { font-size: 16px; padding: 11px 10px; border: 1px solid rgba(0,0,0,0.28); border-radius: 4px; font-family: "Roboto","Helvetica","Arial",sans-serif; color: rgba(0,0,0,0.87); background: #fff; }
.apr-row input { width: 92px; }
.ap-lib-acts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ap-lib-ren { background: none; border: none; color: #057; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.ap-lib-ren:hover { background: rgba(0,0,0,0.06); }
.ap-lib-del { background: none; border: none; color: #c00; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.ap-lib-del:hover { background: rgba(0,0,0,0.06); }
.ap-lib-empty { padding: 10px 12px; color: #777; font-size: 13px; }
.ap-style-btn { width: 30px; height: 28px; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer; font-size: 15px; margin-left: 6px; }
.ap-style-btn.active { background: #c3ccd6; border-color: #6b7686; }

/* ---- Picture Designer on mobile ----
   MUST come after the base #ap-* rules above: same specificity, so source order decides — these need
   to be later to win. (The earlier copy lived inside the 2D @media block, before these base rules,
   so it lost the cascade — which is why the bars/tips stayed cut off.) */
@media (max-width: 820px), ((pointer: coarse) and (max-height: 500px)) {
  /* Toolbar row grows to fit the wrapped pic toolbar (don't clip it to 64px). */
  body.pic-mode #app { grid-template-rows: auto 1fr; }
  /* The pic toolgroup is one flex item — let it and its option groups wrap instead of overflowing. */
  body.pic-mode #picture-toolgroup { flex-wrap: wrap; row-gap: 2px; }
  #picture-toolgroup #ap-add-opts, #picture-toolgroup #ap-markup-opts { flex-wrap: wrap; }
  /* Edit bar (aircraft + text box) and shape bar WRAP so every control is visible — no horizontal
     scroll cutting things off. (Top is set in JS from the measured toolbar height.) */
  #ap-edit { flex-wrap: wrap; white-space: normal; overflow-x: visible; row-gap: 4px; padding: 6px 8px; }
  #ap-edit input, #ap-edit select { font-size: 16px; padding: 6px; }   /* 16px stops iOS zoom-on-focus */
  #ap-shapebar { flex-wrap: wrap; overflow-x: visible; white-space: normal; }
  body.pic-mode #ap-frames { flex-wrap: wrap; }
  /* Hide the long inline/contextual tips on a phone — they just eat space and wrap awkwardly. */
  #ap-frames .apf-hint, #ap-shapebar .apsb-hint { display: none; }
  #ap-hint { max-width: 92vw; white-space: normal; text-align: center; }
  /* Finger-size controls (≈40px). */
  #ap-frames .apf-frame, #ap-frames .apf-btn, #ap-shapebar .apsb-btn { min-height: 40px; }
  /* Zoom: bigger and clearly visible, mid-right, above the bars/dock. */
  #ap-zoom { top: 50%; transform: translateY(-50%); right: 8px; z-index: 22; }
  #ap-zoom button { width: 44px; height: 44px; font-size: 24px; }
}