:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172b3a;background:#f6f8fb;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:1px solid #cfdbe3;border-radius:10px;background:#fff;color:#234052;padding:10px 12px}button:disabled{opacity:.38;cursor:default}.primary{background:#1564ad;border-color:#1564ad;color:#fff;font-weight:650}.top{height:64px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dae2e8;background:#fff;gap:10px}.brand,.topactions{display:flex;align-items:center;gap:10px}.brand{min-width:0}.brand h1{font-size:19px;margin:0;white-space:nowrap}.back{color:#17629d;text-decoration:none;font-size:14px;font-weight:600}.sep{border-left:1px solid #cad6de;height:25px}.tag{font-size:11px;background:#edf4fc;border-radius:12px;padding:5px 8px;color:#275e91}.quiet{background:#f8fafc}.layout{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100dvh - 64px)}.sidebar{overflow-y:auto;background:white;border-right:1px solid #d9e3e9;padding:0 0 24px}.section{padding:17px;border-bottom:1px solid #e5edf0}.section label{display:block;font-size:13px;font-weight:700;margin:0 0 9px}.section h2{font-size:14px;margin:0 0 12px}.section p{font-size:13px;line-height:1.45;color:#466173}.section .small,.small{font-size:12px;line-height:1.45;color:#567184}.search{display:flex;gap:6px}.search input{min-width:0;flex:1;padding:10px;border:1px solid #c8d5df;border-radius:9px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool{text-align:left;font-size:13px;padding:12px 8px;min-height:56px}.tool.active{background:#e9f3ff;border:2px solid #176aaa;color:#155286}.secondary-tools{display:flex;gap:8px;margin-top:9px}.secondary-tools button{flex:1}.audit{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#60778a}.audit strong{font-size:13px;color:#213b4a}.workspace{position:relative;min-width:0;background:#dce7df}.workspace #map{position:absolute;inset:0}.floatbar{position:absolute;z-index:600;top:15px;left:50%;transform:translateX(-50%);padding:8px;background:#fff;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 3px 16px #0002;max-width:calc(100% - 20px)}.floatbar span{font-size:12px;white-space:nowrap}.status{position:absolute;z-index:600;left:12px;bottom:15px;background:#fff;color:#1f3543;padding:9px 12px;border-radius:10px;box-shadow:0 2px 12px #0002;max-width:min(560px,calc(100% - 24px));font-size:13px}.status.error{color:#a6312e}.locked{position:absolute;inset:0;z-index:900;background:#e8eef3;display:grid;place-items:center;padding:16px}.locked[hidden]{display:none}.lockcard{background:#fff;border-radius:18px;padding:28px;max-width:420px;box-shadow:0 5px 30px #122b3b20}.lockcard h2{margin-top:0}.lockcard p{color:#5a6f7d;line-height:1.5}.lockcard form{display:flex;gap:8px}.lockcard input{width:170px;min-width:0;flex:1;padding:11px;border:1px solid #b9cbd8;border-radius:10px}.lockcard a{color:#196daa}dialog{border:0;border-radius:18px;box-shadow:0 12px 60px #0003;max-width:min(440px,calc(100vw - 32px));padding:20px;color:#213d50}dialog::backdrop{background:#0d253b6b}dialog h2{font-size:19px;margin-top:0}dialog p{line-height:1.5}dialog label{display:block;margin:10px 0 6px;font-weight:600}dialog input{padding:10px;border:1px solid #b8c9d5;border-radius:9px;width:100%}dialog menu{padding:0;display:flex;gap:9px;justify-content:flex-end;margin:22px 0 0}.vertex-icon{background:transparent;border:0}.vertex-point{width:19px;height:19px;background:#fff;border:3px solid #1d67af;border-radius:50%;box-shadow:0 2px 6px #0007;display:block}.vertex-icon.chosen .vertex-point{background:#ffd65a;border-color:#bd660c}.leaflet-container{background:#e2ebe8!important;touch-action:pan-x pan-y}.leaflet-interactive{cursor:pointer}.leaflet-control-attribution{font-size:10px!important}@media(max-width:800px){.top{height:auto;min-height:64px;flex-wrap:wrap;padding:8px}.brand h1{font-size:16px}.brand .tag{display:none}.topactions{width:100%;justify-content:space-between}.topactions button{padding:9px;font-size:12px}.layout{height:calc(100dvh - 108px);display:flex;flex-direction:column}.sidebar{order:2;flex:0 0 auto;height:228px;overflow-y:auto;border-right:0;border-top:1px solid #cad7e1;padding-bottom:env(safe-area-inset-bottom)}.section{padding:11px 14px}.section:nth-child(n+3){display:none}.section h2{margin-bottom:7px}.tools{grid-template-columns:repeat(3,1fr)}.tool{min-height:40px;padding:7px;font-size:11px}.secondary-tools{margin-top:6px}.workspace{order:1;flex:1;min-height:150px}.floatbar{top:7px}.status{font-size:12px;bottom:7px}.lockcard{padding:18px}}@media(max-height:600px) and (min-width:801px){.layout{grid-template-columns:270px 1fr}.section{padding:10px}.tools .tool{min-height:40px}}

.history-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #e2e9ee;font-size:13px}.history-row button{font-size:12px}.secondary-tools{flex-wrap:wrap}

.history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e2eaf0;font-size:13px}.history-row button{font-size:12px;padding:7px 10px}.history-row small{display:block;color:#678}#historyItems{max-height:40vh;overflow:auto}
/* Keep the map and controls usable even when iPhone text sizes wrap the header. */
body{display:flex;flex-direction:column;height:100dvh}
.top{flex:0 0 auto}
.layout{height:auto;min-height:0;flex:1}
@media(max-width:800px){
 .topactions{flex-wrap:wrap;justify-content:flex-start}
 .topactions button{flex:1 1 auto}
 .layout{height:auto;min-height:0;flex:1}
 .workspace{min-height:200px}
}


/* FIX IPHONE 2026-11-04: self-contained Leaflet tile/layout rules.
   Independent of the remote Leaflet stylesheet: without these rules, Safari
   displays map tiles as overlapping, displaced 256px images above the UI. */
.workspace { overflow: hidden; isolation: isolate; }
.workspace #map.leaflet-container { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden !important; outline: 0; background: #e2ebe8; }
#map .leaflet-pane, #map .leaflet-map-pane, #map .leaflet-tile, #map .leaflet-marker-icon,
#map .leaflet-marker-shadow, #map .leaflet-tile-container,
#map .leaflet-pane > svg, #map .leaflet-pane > canvas,
#map .leaflet-zoom-box, #map .leaflet-image-layer, #map .leaflet-layer {
  position: absolute; left: 0; top: 0;
}
#map .leaflet-map-pane { z-index: 1; }
#map .leaflet-tile-pane { z-index: 200; }
#map .leaflet-overlay-pane { z-index: 400; }
#map .leaflet-shadow-pane { z-index: 500; }
#map .leaflet-marker-pane { z-index: 600; }
#map .leaflet-tooltip-pane { z-index: 650; }
#map .leaflet-popup-pane { z-index: 700; }
#map .leaflet-map-pane svg { z-index: 200; }
#map .leaflet-map-pane canvas { z-index: 100; }
#map .leaflet-tile-container { pointer-events: none; }
#map .leaflet-zoom-animated { transform-origin: 0 0; }
#map img.leaflet-tile, #map .leaflet-marker-icon, #map .leaflet-marker-shadow {
  max-width: none !important; max-height: none !important; border: 0;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
#map img.leaflet-tile { visibility: hidden; }
#map img.leaflet-tile-loaded { visibility: inherit; }
#map .leaflet-container a { -webkit-tap-highlight-color: transparent; }
#map .leaflet-interactive { cursor: pointer; }
#map .leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
#map .leaflet-top, #map .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
#map .leaflet-top { top: 0; } #map .leaflet-bottom { bottom: 0; }
#map .leaflet-left { left: 0; } #map .leaflet-right { right: 0; }
#map .leaflet-top .leaflet-control { margin-top: 10px; }
#map .leaflet-bottom .leaflet-control { margin-bottom: 10px; }
#map .leaflet-left .leaflet-control { margin-left: 10px; }
#map .leaflet-right .leaflet-control { margin-right: 10px; }
#map .leaflet-bar { background: white; border: 2px solid rgba(0,0,0,.15); border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
#map .leaflet-bar a { display: block; width: 30px; height: 30px; line-height: 30px; background: white; text-decoration: none; text-align: center; color: black; font-size: 22px; font-weight: bold; border-bottom: 1px solid #ccc; }
#map .leaflet-bar a:last-child { border-bottom: 0; }
#map .leaflet-control-attribution { background: rgba(255,255,255,.85); font-size: 10px; line-height: 1.35; padding: 0 5px; }
#map .leaflet-control-attribution a { color: #0078a8; text-decoration: none; }
#map .leaflet-tooltip { position: absolute; padding: 6px; background: white; border: 1px solid #ddd; border-radius: 3px; color: #222; white-space: nowrap; box-shadow: 0 1px 3px #0002; pointer-events: none; }
#map .leaflet-tooltip::before { content: ''; position: absolute; border: 6px solid transparent; }
#map .leaflet-fade-anim .leaflet-tile, #map .leaflet-fade-anim .leaflet-popup { will-change: opacity; }
#map .leaflet-grab { cursor: grab; }
#map .leaflet-dragging .leaflet-grab { cursor: grabbing; }
/* The toolbar and status float INSIDE the map viewport, never above the header/sidebar. */
.workspace .floatbar, .workspace .status { z-index: 900; }
@media (max-width: 800px) {
  .layout { min-height: 0; }
  .layout > .workspace { min-height: 180px; }
  .layout > .sidebar { min-height: 0; }
  .workspace .floatbar { width: max-content; max-width: calc(100% - 24px); }
}

/* FLEXIBLE POLYGON MIDPOINTS - draggable/tappable '+' handles between corners */
#map .midpoint-icon { background:transparent; border:0; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
#map .midpoint-point { width:17px; height:17px; border:2px solid #fff; border-radius:50%; background:#007cbf; box-shadow:0 1px 5px #0007; color:#fff; font-size:13px; font-weight:800; line-height:13px; text-align:center; display:block; pointer-events:none; -webkit-user-select:none; user-select:none; }
#map .midpoint-icon:hover .midpoint-point { background:#0066a2; transform:scale(1.18); }
#map .vertex-icon { touch-action:none; }
@media(max-width:800px){ .floatbar span { white-space:normal; line-height:1.25; } }