/* Black-dominant interface with red accents. */
:root {
  --bg:#080808; --bg2:#121212; --bg3:#1b1b1b; --bg4:#0d0d0d;
  --panel:#111111; --panel2:#202020;
  --line:#383838; --border:#383838; --border2:#2b2b2b;
  --txt:#eeeeee; --text:#eeeeee; --muted:#aaaaaa; --text2:#aaaaaa; --text3:#929292;
  --accent:#e02020; --accent2:#999999; --red:#e02020; --green:#bcbcbc;
  --gold:#e02020; --gold-soft:#dddddd; --primary:#e02020;
  --secondary:#111111; --tertiary:#202020; --light:#dddddd; --dark:#080808;
  --indigo:#777777; --purple:#999999; --iput:#0c0c0c;
  color-scheme:dark;
}
body {background:var(--bg)}
header,.search-header {background:#090909;border-bottom:1px solid #303030;box-shadow:inset 0 2px #cc3333,0 4px 18px #0004}
.header-brand h1 {color:#eeeeee}
.header-brand span {color:#999999}
#map,.leaflet-container {background:#090909}
.side-panel,.placement-flyout,.quick-card,.item-editor,.map-context-menu,#mapSearchResults:not(:empty) {background:#121212;border-color:var(--line)}
.panel-head,.item-editor-head,.legend-head {background:#191919}
.fab {background:#141414;border-color:#3a3a3a;color:#d8d8d8}
.fab:hover,button.btn:hover {background:#252525;border-color:#666666}
.fab.active,.placement-fab.active,.shape-choice.active,button.btn.accent,.radio-pill input:checked + span,.seg button.active {
  background:#450b0b;border-color:#d02020;color:#f1f1f1;outline-color:#d0202033;
}
#mapSearch,input[type="text"],input[type="number"],textarea,select {background-color:#0b0b0b;color:#eeeeee;border-color:#3a3a3a}
.header-search label {color:#aaaaaa}
.chk input {accent-color:#d02020}
.btn.primary {background:#730d0d;color:#eeeeee;border-color:#c51c1c;box-shadow:none}
.metric strong,.source-line a {color:#dddddd}
.toast-item {border-left-color:#d02020}
button.btn.warn,.editor-action.delete {color:#e63b3b}
button.btn.warn {background:#281c1c;border-color:#764040}

/* Maps and panel controls live in the header; placement tools stay on the map. */
.search-header {gap:16px}
.search-header .maps-card {flex:0 0 60px;align-self:center}
.search-header .maps-card .radio-group {top:100%;left:0;z-index:2}
.header-search {flex:1;width:auto;max-width:680px;margin:0 auto 0 0}
.header-tools {display:flex;align-items:center;gap:8px;flex:none}
.header-tools .fab {display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:44px;padding:0 12px;box-shadow:none;font-size:12px;font-weight:700}
.header-tools .fab svg {flex:none}
#fabTeleport svg {color:#c7c7c7}
#fabOverlays svg {color:#c7c7c7}
#fabRadar svg {color:#e02020}
@media(max-width:1050px) {
 .search-header {gap:12px;padding-inline:12px}
 .header-tools .header-tool-label {display:none}
 .header-tools .fab {width:44px;padding:0}
 .header-brand h1 {font-size:17px}
}
@media(max-width:700px) {
 :root {--header-height:132px}
 .search-header {display:grid;grid-template-columns:60px minmax(0,1fr) auto;grid-template-rows:44px 44px;gap:12px;padding:14px 12px;flex-wrap:initial}
 .header-brand {grid-column:1 / 3;grid-row:1;display:block;width:auto}
 .header-brand h1 {font-size:17px}
 .header-tools {grid-column:3;grid-row:1;gap:6px}
 .search-header .maps-card {grid-column:1;grid-row:2}
 .header-search {grid-column:2 / 4;grid-row:2;max-width:none;width:100%;margin:0}
 .header-search label {display:none}
 #mapSearch {height:44px}
}

/* Red highlights on neutral black surfaces, including drawing controls. */
.header-brand h1,.header-search label {color:#e62b2b}
#fabTeleport svg,#fabOverlays svg,#fabRadar svg {color:#e62b2b}
.fab,.maps-card {border-color:#653030}
.fab:hover,button.btn:hover,.maps-card summary:hover {background:#320a0a;border-color:#d02020}
.panel-head,.item-editor-head,.legend-head {background:#1c0909;border-bottom-color:#783333}
.dial-face {border-color:#a21b1b;background:radial-gradient(circle at 38% 28%,#383030,#161616 78%)}
.dial-pointer::before {background:#e02020;box-shadow:0 0 5px #d0202055}
.dial-center {background:#b51c1c}
.dial-control input {display:none!important}
.map-context-menu {width:218px}
.map-context-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.map-context-grid .btn {display:grid;place-items:center;width:44px;height:44px;padding:9px;color:#e62b2b}
.map-context-grid svg {width:24px;height:24px;pointer-events:none}
.map-context-head {align-items:center}
.map-context-head .btn {padding:3px 8px}
.map-context-coords {font-size:10px}

/* Stable zoom position; both panels occupy only the space below it. */
#app .leaflet-top.leaflet-right,
#app.panel-open .leaflet-top.leaflet-right {top:0;right:10px;left:auto}
#app .side-panel,
#app .side-panel.command-panel,
#app .side-panel.command-panel.wide {
  top:88px!important;right:12px;bottom:12px!important;
  height:auto!important;
  max-height:calc(100dvh - var(--header-height) - 100px)!important;
  background:#0b0b0b;border-color:#592020;
}
#app .side-panel .panel-head {flex:0 0 auto}
#app .side-panel .panel-body {
  flex:1 1 auto;min-height:0;max-height:none!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}
#app .command-panel textarea {min-height:80px!important;max-height:25dvh!important}
#app .command-panel .hintbar {margin-top:4px;padding:5px 7px}
#app .command-panel .panel-body {padding:8px}
/* All UI surfaces are opaque neutral black, without map colours bleeding through. */
.fab,.quick-card,.placement-flyout,.item-editor,.map-context-menu,
.leaflet-popup-content-wrapper,.leaflet-popup-tip {background:#101010}
.card,.tool-card,.legend-cat {background:#141414}
button.btn.good {background:#730d0d;border-color:#c51c1c;color:#fff}
.fab.active,.placement-fab.active,.shape-choice.active,
button.btn.accent,.radio-pill input:checked + span,.seg button.active {
  background:#730d0d;border-color:#df2424;color:#fff;
}
.panel-head,.item-editor-head,.legend-head {background:#270909;border-bottom-color:#a21b1b}

/* The map page has exactly two viewport regions: persistent header and map. */
body.map-page {display:block;height:100dvh;overflow:hidden;margin:0;font-size:clamp(12px,1vw,14px)}
.map-page .search-header {
  position:fixed;inset:0 0 auto;z-index:2000;
  display:flex;visibility:visible;opacity:1;
  width:100%;height:var(--header-height);min-height:var(--header-height);
  box-sizing:border-box;flex-wrap:nowrap;
}
.map-page #app {position:fixed;inset:var(--header-height) 0 0;height:auto;min-height:0;width:100%}
.map-page .header-brand {min-width:0}
.map-page .header-brand h1 {font-size:clamp(16px,1.5vw,21px)}
.map-page .panel-title {font-size:clamp(13px,1.1vw,16px)}
.map-page .panel-sub {font-size:clamp(11px,.9vw,12px)}
.map-page .panel-body {font-size:clamp(12px,1vw,14px)}
.map-page .panel-head {gap:8px}
.map-page .panel-head > div {min-width:0}
.map-page button.btn {white-space:normal;overflow-wrap:anywhere}
.map-page footer {display:none}
@media(min-width:1051px) {
 .map-page .header-tool-label {display:inline}
 .map-page .header-tools {margin-left:auto}
}
@media(max-width:700px) {
 .map-page {--header-height:116px;--btn:44px}
 .map-page .search-header {
  display:grid;grid-template-columns:54px minmax(0,1fr) auto;
  grid-template-rows:40px 44px;gap:8px;padding:12px 8px;
 }
 .map-page .header-brand {grid-column:1 / 3;grid-row:1}
 .map-page .header-brand h1 {font-size:16px;line-height:1.2}
 .map-page .header-brand span {font-size:10px}
 .map-page .header-tools {grid-column:3;grid-row:1;gap:4px}
 .map-page .header-tools .fab {width:44px;height:40px;padding:0}
 .map-page .search-header .maps-card {width:54px!important;grid-row:2}
 .map-page .header-search {grid-row:2;grid-column:2 / 4;min-width:0}
 .map-page #mapSearch {font-size:16px;padding:8px;min-width:0}
 .map-page #app .side-panel,
 .map-page #app .side-panel.command-panel,
 .map-page #app .side-panel.command-panel.wide {
  width:calc(100% - 68px)!important;right:8px;
  top:84px!important;bottom:8px!important;
  max-height:calc(100dvh - var(--header-height) - 92px)!important;
 }
 .map-page .panel-head {padding:8px}
 .map-page .panel-title {font-size:13px}
 .map-page .panel-sub,.map-page .tiny {font-size:11px;overflow-wrap:anywhere}
 .map-page .panel-body {padding:8px;font-size:12px;gap:8px}
 .map-page .panel-body .grid2 {grid-template-columns:minmax(0,1fr)}
 .map-page .panel-body .grid3 {grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .map-page .panel-body input,.map-page .panel-body select {font-size:16px;min-height:38px;padding:6px;min-width:0}
 .map-page .panel-body textarea {font-size:12px}
 .map-page button.btn {font-size:12px;min-height:36px;padding:6px 8px}
 .map-page .radio-pill span {font-size:11px;padding:6px 7px}
 .map-page .radio-group {gap:5px}
 .map-page .legend-items {padding:6px}
 .map-page #placementFlyout {width:min(280px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;font-size:12px}
 .map-page .item-editor {max-width:calc(100vw - 16px)!important}
 .map-page .map-context-grid .btn {min-height:44px}
}
@media(max-width:360px) {
 .map-page .header-brand span {display:none}
 .map-page .header-brand h1 {font-size:14px}
 .map-page .header-tools {gap:2px}
 .map-page .header-tools .fab {width:40px;min-width:40px}
 .map-page .panel-body .grid3 {grid-template-columns:minmax(0,1fr)}
}

/* Preserve Leaflet's negative anchor margins so vertex centres match geometry. */
.vertex-handle-wrap {background:transparent;border:0;padding:0;line-height:0}
.vertex-handle-wrap .vertex-icon {background:#39c76a;border-color:#fff!important}
.vertex-handle-wrap .draft-vertex-icon {background:#39c76a}
.map-page .header-brand {width:clamp(150px,18vw,250px);flex-shrink:1}
.header-banner {display:block;width:100%;height:auto;max-height:48px;object-fit:contain;object-position:left center}
.search-header .maps-card .radio-group {grid-template-columns:minmax(0,1fr)!important;width:150px!important}
.map-page .maps-card .radio-pill span {padding:10px 8px!important;font-size:12px!important}
.map-page .map-context-menu {width:66px;max-height:calc(100dvh - 20px);overflow-y:auto;overflow-x:hidden;padding:5px}
.map-page .map-context-grid {grid-template-columns:minmax(0,1fr);gap:4px}
.map-page .map-context-grid .btn {width:44px;height:44px;justify-self:center}
.map-page .map-context-head {justify-content:center;padding:0 0 4px}
.map-page .map-context-head .btn {width:44px;height:32px}
.map-page .map-context-coords {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px) {
 .map-page .header-brand {width:100%;max-width:210px}
 .header-banner {max-height:38px}
}

/* Responsive control system: one size drives icons, toolbars and menu rows. */
.map-page {--control-size:clamp(30px,4.6vw,44px);--accent:#ff0000;--primary:#ff0000;--red:#ff0000}
.map-page .search-header {border-top:2px solid #ff0000;box-shadow:0 4px 18px #0004}
.map-page .header-search {flex:0 1 340px;max-width:340px;width:50%;margin-right:auto}
.map-page .header-tools .fab,.map-page .float-stack .fab {
 height:var(--control-size);min-height:var(--control-size);min-width:var(--control-size);
}
.map-page .float-stack .fab {width:var(--control-size)}
.map-page .fab svg,.map-page button.btn svg,.maps-card summary svg {width:clamp(16px,2.7vw,20px);height:clamp(16px,2.7vw,20px);flex:none}
.map-page .fab svg,.map-page .maps-card summary,.map-page .map-context-grid .btn {color:#ff0000}
.map-page .fab,.map-page .maps-card {border-color:#ff0000}
.map-page .fab.active,.map-page .shape-choice.active {border-color:#ff0000;outline-color:#ff000055;background:#4a0000}
.map-point-icon.role-pra {background:#ff0000}
.map-page button.btn:has(svg),.map-page .editor-action {display:inline-grid;place-items:center;min-width:var(--control-size);min-height:var(--control-size);padding:5px}
.map-page .editor-action svg {width:18px;height:18px}
.map-page .search-header .maps-card {width:var(--control-size)!important;flex-basis:var(--control-size)}
.map-page .maps-card summary {height:var(--control-size)}
.maps-options {position:absolute;left:0;top:100%;width:150px;padding:6px;background:#101010;border:1px solid #ff0000;border-radius:8px;box-shadow:0 8px 24px #0009;max-height:calc(100dvh - var(--header-height) - 12px);overflow:auto}
.maps-card:not([open]) .maps-options {display:none}
.map-page .search-header .maps-card .radio-group {position:static;width:100%!important;max-width:none;padding:0;border:0;box-shadow:none}
.map-page .maps-card .radio-pill span {padding:6px!important;min-height:var(--control-size);font-size:clamp(10px,1.4vw,12px)!important}
.map-page .map-context-menu {width:calc(var(--control-size) + 20px);scrollbar-width:thin}
.map-page .map-context-grid .btn {width:var(--control-size);height:var(--control-size);min-height:var(--control-size);padding:4px}
.map-page .map-context-head .btn {width:var(--control-size);height:var(--control-size);min-height:var(--control-size)}
@media(max-width:1050px){.map-page .header-tools .fab{width:var(--control-size);padding:0}}
@media(max-width:700px) {
 .map-page {--header-height:94px}
 .map-page .search-header {grid-template-columns:var(--control-size) minmax(0,1fr) auto;grid-template-rows:32px 32px;padding:10px 8px;gap:8px}
 .map-page .header-tools .fab {width:var(--control-size);height:var(--control-size);min-width:var(--control-size)}
 .map-page .header-brand {max-width:160px}
 .map-page .header-banner {max-height:30px}
 .map-page .header-search {width:50%;max-width:170px;justify-self:start;grid-column:2 / 4;min-width:112px}
 .map-page #mapSearch {height:32px;padding:4px 6px}
 .map-page .header-tools {gap:4px}
 .map-page .search-header .maps-card {width:var(--control-size)!important}
 .map-page .float-stack {left:6px;top:8px;gap:5px}
 .map-page .tool-cluster {gap:5px}
 .map-page #app .side-panel,.map-page #app .side-panel.command-panel,.map-page #app .side-panel.command-panel.wide {
  width:calc(100% - var(--control-size) - 22px)!important;right:6px;top:78px!important;bottom:6px!important;
  max-height:calc(100dvh - var(--header-height) - 84px)!important;
 }
 .map-page .panel-body {font-size:11px;padding:6px!important}
 .map-page .panel-title {font-size:12px}
 .map-page .panel-sub {font-size:10px}
 .map-page .panel-head {padding:6px}
 .map-page .panel-body input,.map-page .panel-body select {min-height:30px;padding:4px}
 .map-page button.btn {font-size:11px;min-height:var(--control-size);padding:4px 6px}
 .map-page .panel-body .grid3 {grid-template-columns:repeat(3,minmax(0,1fr))}
 .map-page .item-editor {font-size:11px;width:min(300px,calc(100vw - 12px))!important}
 .map-page .item-editor-name {font-size:14px!important}
 .map-page .dial-face {width:48px;height:48px}
 .map-page #placementFlyout {width:min(252px,calc(100vw - 12px))!important;font-size:11px}
 .map-page .shape-picker,.map-page .editor-shape-picker {grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* Guided help with a visible pointer to the current control. */
.help-highlight {position:fixed;z-index:9000;pointer-events:none;border:2px solid #ff0000;border-radius:8px;box-shadow:0 0 0 3px #0008}
.help-pointer {position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9001}
.help-card {position:fixed;z-index:9002;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:14px;background:#111;border:1px solid #ff0000;border-radius:10px;color:#eee;box-shadow:0 10px 40px #000b;font:13px/1.45 system-ui}
.help-card h2 {margin:0 30px 8px 0;font-size:16px;color:#fff}
.help-card p {margin:0 0 12px}
.help-card .help-close {position:absolute;right:8px;top:8px}
.help-card button {background:#202020;color:#fff;border:1px solid #666;border-radius:5px;min-height:30px;padding:4px 10px;cursor:pointer}
.help-card button:focus-visible {outline:2px solid #ff0000}
.help-nav {display:flex;align-items:center;justify-content:space-between;gap:8px}
.help-count {color:#aaa;font-size:11px}
@media(max-width:700px){.help-card{font-size:12px;padding:10px}.help-card h2{font-size:14px}}

/* Keep all header controls together and let the banner use the remaining width. */
.map-page .search-header {display:grid;grid-template-columns:minmax(0,1fr) var(--control-size) minmax(120px,340px) auto;gap:6px;align-items:center}
.map-page .header-brand {grid-column:1;grid-row:1;width:100%;max-width:none;height:100%;min-width:0}
.map-page .header-banner {width:100%;height:100%;max-height:54px;object-fit:contain;object-position:left center}
.map-page .search-header .maps-card {grid-column:2;grid-row:1;position:relative;z-index:5;align-self:center}
.map-page .maps-options {z-index:10}
.map-page .header-search {grid-column:3;grid-row:1;width:100%;max-width:none;min-width:0;margin:0;align-self:center;z-index:2}
.map-page .header-search label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.map-page #mapSearch {height:var(--control-size);margin:0}
.map-page .header-tools {grid-column:4;grid-row:1;margin:0;gap:6px}
@media(max-width:700px) {
 .map-page .search-header {grid-template-columns:minmax(0,1fr) var(--control-size) minmax(100px,170px) auto;grid-template-rows:32px 32px;gap:6px;padding:10px 8px}
 .map-page .header-brand {grid-column:1 / -1;grid-row:1;height:32px;max-width:none}
 .map-page .header-banner {max-height:32px}
 .map-page .search-header .maps-card {grid-column:2;grid-row:2}
 .map-page .header-search {grid-column:3;grid-row:2;width:100%;min-width:0;max-width:none}
 .map-page .header-tools {grid-column:4;grid-row:2;gap:4px}
}

/* Compact labelled context actions, with a separate small close affordance. */
.map-page .map-context-menu {width:154px;padding:5px;max-height:calc(100dvh - 16px)}
.map-page .map-context-head {justify-content:flex-end;margin:0 0 3px;padding:0;border:0}
.map-page .map-context-head .btn {width:20px;height:20px;min-width:20px;min-height:20px;padding:0;border:0;background:transparent;font-size:19px;line-height:1}
.map-page .map-context-grid {gap:2px}
.map-page .map-context-grid .btn {display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:27px;min-height:27px;padding:3px 7px;font-size:12px;color:#eee;text-align:left}
.map-page .map-context-grid .btn svg {width:16px;height:16px;color:#ff0000}
.map-page .map-context-grid .btn span {white-space:nowrap}
/* Help is always beside Maps, outside the dropdown. */
.map-page .search-header {grid-template-columns:minmax(0,1fr) var(--control-size) var(--control-size) minmax(120px,340px) auto}
.map-page .header-search {grid-column:4}
.map-page .header-tools {grid-column:5}
.map-lock {display:none}
.navigation-locked #map {touch-action:none;overscroll-behavior:none}
@media(max-width:700px) {
 .map-page {--control-size:40px;--header-height:104px}
 .map-page .search-header {grid-template-columns:minmax(0,1fr) 40px 40px minmax(70px,170px) auto;grid-template-rows:32px 40px;gap:5px;padding:12px 8px}
 .map-page .header-brand {grid-column:1 / -1}
 .map-page .search-header .maps-card {grid-column:2;grid-row:2}
 .map-page .header-search {grid-column:4;grid-row:2}
 .map-page .header-tools {grid-column:5;grid-row:2;gap:3px}
 .map-page #mapSearch {height:40px;font-size:16px}
 .map-page .fab svg,.map-page button.btn svg,.maps-card summary svg {width:20px;height:20px}
 .map-page .map-lock {display:grid}
 .map-page .map-context-grid .btn {height:30px;min-height:30px}
 .map-page .map-context-grid .btn svg {width:16px;height:16px}
 .map-page .map-context-head .btn {min-height:20px;height:20px}
}
@media(hover:none) and (pointer:coarse){.map-page .map-lock{display:grid}}

/* Keep help physically grouped with the banner rather than as a grid item. */
.map-page .search-header {grid-template-columns:minmax(0,1fr) var(--control-size) minmax(120px,340px) auto}
.map-page .header-brand {display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0}
.map-page .header-banner {flex:0 1 auto;width:auto;height:auto;max-width:calc(100% - var(--control-size) - 8px);max-height:54px}
.map-page .header-brand #mapHelp {display:grid;place-items:center;flex:0 0 var(--control-size);width:var(--control-size);height:var(--control-size);min-height:var(--control-size);margin:0;padding:0;font-size:20px;color:#ff0000;border:1px solid #ff0000;border-radius:10px}
.map-page .header-search {grid-column:3}
.map-page .header-tools {grid-column:4}
@media(max-width:700px) {
 .map-page {--header-height:112px}
 .map-page .search-header {grid-template-columns:minmax(0,1fr) 40px minmax(70px,170px) auto;grid-template-rows:40px 40px}
 .map-page .header-brand {grid-column:1 / -1;grid-row:1;height:40px}
 .map-page .header-banner {max-height:32px}
 .map-page .header-search {grid-column:3;grid-row:2}
 .map-page .header-tools {grid-column:4;grid-row:2}
}

/* Radar panel is content-height; keep the taller Teleport and Layers panels unchanged. */
.map-page #app #panelTools.radar-mode {
  bottom:auto!important;
  height:max-content!important;
  max-height:calc(100dvh - var(--header-height) - 104px)!important;
}
.map-page #app #panelTools.radar-mode .panel-body {
  flex:0 1 auto!important;
  min-height:0!important;
  max-height:calc(100dvh - var(--header-height) - 155px)!important;
  overflow-y:auto!important;
}
.map-page #panelTools .radar-copy-button {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%;
  padding:8px!important;
  white-space:normal!important;
  line-height:1.25!important;
  text-align:center;
}
.map-page #panelTools .radar-copy-button svg {
  display:block;
  width:16px!important;
  height:16px!important;
  flex:0 0 16px;
}
.map-page #panelTools .radar-copy-button span {display:inline-block;min-width:0}
.map-page #panelTools .radar-copy-button:disabled {opacity:.46;cursor:not-allowed}
@media(max-width:700px) {
  .map-page #app #panelTools.radar-mode {top:78px!important;max-height:calc(100dvh - var(--header-height) - 86px)!important}
  .map-page #app #panelTools.radar-mode .panel-body {max-height:calc(100dvh - var(--header-height) - 140px)!important}
}