:root{
  --brand:#1c3f77; --brand-d:#142f5a; --brand-2:#2b5aa8;
  --accent:#e5851f; --accent-d:#c96f12; --accent-soft:#fff3e4;
  --ink:#17202e; --muted:#5a6576;
  --line:#e4e8f0; --bg:#eef2f8; --panel:#ffffff; --ok:#1f9d55; --warn:#b26a00; --err:#c02626;
  --radius:14px; --radius-sm:10px;
  --shadow:0 6px 22px rgba(20,40,80,.08); --shadow-lg:0 18px 50px rgba(20,40,80,.16);
  --font:'Public Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand);text-decoration:none}
.muted{color:var(--muted)}
.sm{font-size:12.5px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Auth / install ---------- */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d4d8c 0%,#0a3a6b 100%);padding:20px}
.auth-card{background:var(--panel);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:28px;width:100%;max-width:380px}
.auth-card.wide{max-width:520px}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-row h1{font-size:18px;margin:0}
.brand-row p{margin:0}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink)}
.form input,.form select{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,77,140,.12)}
fieldset{border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 14px;display:flex;flex-direction:column;gap:12px}
legend{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 6px}
.btn{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:11px 16px;font:inherit;
  font-weight:600;cursor:pointer;display:inline-block;text-align:center}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}
.btn.ghost:hover{background:#f4f7fb}
.btn.sm{padding:7px 12px;font-size:13px}
.link{background:none;border:none;color:var(--brand);cursor:pointer;font:inherit;padding:0}
.link:hover{text-decoration:underline}

.err-box{background:#fdecec;border:1px solid #f3c2c2;color:var(--err);padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:12px}
.ok-box{background:#eefaf1;border:1px solid #b8e6c6;padding:18px;border-radius:12px}
.ok-box h2{margin:0 0 8px}
.ok-inline{background:#eefaf1;border:1px solid #b8e6c6;color:var(--ok);padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}
.warn{color:var(--warn)}
code{background:#f0f2f6;padding:2px 6px;border-radius:5px;font-size:.9em}

/* ---------- Topbar ---------- */
.topbar{background:var(--brand);color:#fff;display:flex;align-items:center;gap:18px;
  padding:0 18px;height:56px;position:sticky;top:0;z-index:500}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.nav{display:flex;gap:4px;margin-left:8px;flex:1}
.nav a{color:#dce6f2;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav a.on{background:rgba(255,255,255,.18);color:#fff}
.user{display:flex;align-items:center;gap:10px}
.user .uname{font-size:13.5px;color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.user a.uname:hover{border-bottom-color:currentColor}
.chip{background:rgba(255,255,255,.16);color:#fff;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.topbar .logout{color:#dce6f2;display:flex;align-items:center}
.topbar .logout:hover{color:#fff}

/* ---------- Layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:22px 18px 60px}
.page-head{margin-bottom:18px}
.page-head h1{margin:0 0 2px;font-size:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-head h2{margin:0;font-size:16px}
.two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat .n{font-size:26px;font-weight:700;color:var(--brand)}
.stat .l{font-size:12px;color:var(--muted)}

/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid #f0f2f6;vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.badge.draft{background:#eef0f3;color:#5b6675}
.badge.submitted{background:#fdf1dd;color:#9a6800}
.badge.approved{background:#e6f6ec;color:#1f7a44}

/* ---------- Map ---------- */
.map-shell{position:relative;display:grid;grid-template-columns:1fr 250px;gap:16px;height:calc(100vh - 160px);min-height:460px}
#map{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.map-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;overflow:auto}
.map-panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 6px}
.map-panel h2:not(:first-of-type){margin-top:14px}
.status-key,.legend-list{list-style:none;padding:0;margin:0;font-size:13px}
.status-key li,.legend-list li{display:flex;align-items:center;gap:8px;padding:3px 0}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.dot.draft{background:#9aa4b2}.dot.submitted{background:#d98c00}.dot.approved{background:#1f9d55}
.ln{width:24px;flex:none}
.ward-lbl{background:none;border:none;box-shadow:none;color:#0a3a6b;font-weight:700;font-size:12px}

/* ---------- Footer ---------- */
.foot{max-width:1080px;margin:0 auto;padding:16px 18px;display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .map-shell{grid-template-columns:1fr;height:auto}
  #map{height:60vh}
  .nav a{padding:8px 9px}
  .user .uname{display:none}
  .foot{flex-direction:column;gap:4px}
}

/* ---------- Phase 2: upload / ingest ---------- */
.ingest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.stat.sm2{padding:12px 14px}
.stat.sm2 .n{font-size:22px}
h3.sub{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:16px 0 8px}
.check{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}
.check input{width:auto}
.form input[type=file]{padding:8px;background:#fafbfc}
@media (max-width:820px){ .ingest-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- Phase 3: register / detail / photos ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0}
.filter-row .inl{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.filter-row .inl.grow{flex:1;min-width:150px}
.filter-row .inl select,.filter-row .inl input{font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.filter-row .chk{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.head-actions{display:flex;gap:8px;align-items:center}
.ward-figs{display:flex;flex-wrap:wrap;gap:8px 22px;margin:2px 0 16px;padding-bottom:14px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.ward-figs b{font-size:16px;font-weight:700;color:var(--brand);margin-right:4px}
.ward-figs span.muted b{color:var(--muted)}
.mini-prog{height:6px;width:90px;background:#eef0f3;border-radius:20px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px}
.mini-prog span{display:block;height:100%;background:var(--brand)}
.chip.sm{font-size:10.5px;padding:2px 8px;background:#eef2f7;color:#3a4a5e}
.tick{color:var(--ok);font-weight:700}
.row-todo td{background:#fffdf6}
.crumb .link{font-size:13px}
.crumb h1{margin-top:4px}
.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:9px;resize:vertical}
#minimap{height:320px;border-radius:10px;border:1px solid var(--line)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.photo{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.photo img{width:100%;height:120px;object-fit:cover;display:block}
.photo figcaption{padding:6px 8px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:6px;align-items:center}
.link.del{color:var(--err)}
.photo-add{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.photo-add input[name=caption]{flex:1;min-width:160px;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} .filter-row .inl.grow{min-width:120px} }

/* ---------- Phase 4: map editor ---------- */
.editor-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 14px;margin-bottom:14px}
.inl-form{margin:0}
.editor-bar .inl{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
.editor-bar .inl select{font-weight:400;padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.tools{display:flex;align-items:center;gap:8px}
.tool{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 13px;font:inherit;font-weight:600;
  font-size:13px;cursor:pointer;color:var(--ink)}
.tool.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tgl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.hint{margin-left:auto;font-size:13px;color:var(--brand-d);font-weight:600}
.editor-shell{display:grid;grid-template-columns:1fr 340px;gap:14px;height:calc(100vh - 200px);min-height:480px}
.editor-shell #map{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.editor-shell #map.cutting{cursor:crosshair}
.edit-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;overflow:auto}
.edit-panel .empty p{margin:0 0 10px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head h2{margin:0;font-size:16px}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.btn.danger{background:#fff;color:var(--err);border:1px solid #f0c2c2}
.btn.danger:hover{background:#fdecec}
.hidden{display:none!important}
@media (max-width:820px){ .editor-shell{grid-template-columns:1fr;height:auto} .editor-shell #map{height:55vh} .hint{margin-left:0;width:100%} }

/* ---------- Register viewer card + condition key ---------- */
.cond-key{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.cond-key i{width:14px;height:6px;border-radius:3px;display:inline-block;margin-left:6px}
.reg-card .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.reg-card .card-top h2{margin:0;font-size:18px;line-height:1.25}
.reg-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
table.kv{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}
table.kv th{text-align:left;color:var(--muted);font-weight:600;padding:6px 10px 6px 0;white-space:nowrap;vertical-align:top;width:110px}
table.kv td{padding:6px 0;border-bottom:1px solid #f0f2f6}
table.kv tr:last-child td{border-bottom:none}
.card-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:12px}
.card-photos img{width:100%;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.reg-check{background:#f4f8ff;border:1px solid #d6e6fb;border-radius:9px;padding:9px 11px;margin-bottom:12px;font-size:13px!important}

/* ======= Full-screen map pages ======= */
main.fullbleed{max-width:none;margin:0;padding:0;overflow:hidden;
  height:calc(100vh - var(--topbar-h, 62px));
  height:calc(100dvh - var(--topbar-h, 62px))}   /* dvh keeps mobile browser bars out of it */
html:has(main.fullbleed),body:has(main.fullbleed){height:100%;overflow:hidden}
html.app-fixed,html.app-fixed body{height:100%;overflow:hidden}
.mapfull{position:relative;width:100%;height:100%}
.mapfull #map{position:absolute;inset:0;z-index:1}
.mapfull #map.cutting{cursor:crosshair}

.ov{position:absolute;z-index:600;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 24px rgba(15,30,60,.16)}
.ov-tools{top:14px;left:14px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.ov-ward{margin:0}
.ov-ward select{font:inherit;font-weight:600;padding:9px 12px;border:1px solid var(--line);border-radius:9px;width:100%;background:#fff}
.modebar{display:flex;gap:4px;background:#f1f4f8;border-radius:10px;padding:4px}
.mode{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:none;background:none;
  border-radius:8px;padding:7px 6px;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.mode .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mode.on{background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(13,77,140,.3)}
.ov-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;color:var(--ink)}
.ov-btn:hover{background:#f4f7fb}
.ov-hint{top:14px;left:50%;transform:translateX(-50%);padding:8px 16px;font-size:13px;font-weight:600;color:var(--brand-d);
  border-radius:20px;max-width:60vw;text-align:center}
.ov-legend{left:14px;bottom:20px;padding:10px 13px;font-size:12.5px}
.lg-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:6px}
.lg-row{display:flex;align-items:center;gap:8px;padding:2px 0}
.lg-row i{width:16px;height:6px;border-radius:3px;display:inline-block}
.lg-tg{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted)}

.ov-list{top:14px;left:190px;width:270px;max-height:calc(100% - 40px);display:flex;flex-direction:column;overflow:hidden}
.list-head{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}
.list-head input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.ov-list ul{list-style:none;margin:0;padding:6px;overflow:auto}
.ov-list li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px}
.ov-list li:hover{background:#f2f6fb}
.ldot{width:9px;height:9px;border-radius:50%;flex:none}
.lname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llen{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.x{border:none;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.x:hover{color:var(--ink)}

/* right drawer */
.drawer{position:absolute;top:0;right:0;z-index:650;width:370px;max-width:88vw;height:100%;background:#fff;
  border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(15,30,60,.14);padding:18px;overflow:auto;
  transform:translateX(105%);transition:transform .22s ease}
.drawer.open{transform:translateX(0)}
.drawer-x{position:absolute;top:10px;right:12px}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 30px 12px 0}
.drawer-head h2{margin:0;font-size:17px;line-height:1.25}
.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* contractors editor */
.contractors{border:1px solid var(--line);border-radius:10px;padding:11px;margin:12px 0}
.ct-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px}
.btn.xs{padding:4px 10px;font-size:12px}
.ct-row{display:grid;grid-template-columns:1fr 100px 66px 1fr auto;gap:6px;margin-bottom:6px;align-items:center}
.ct-row input{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;min-width:0}
.ct-del{color:var(--err)}

/* contractors in viewer card */
.ct-view{border-top:1px solid var(--line);padding-top:10px;margin-bottom:12px}
.ct-view-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:6px}
.ct-item{padding:6px 0;border-bottom:1px solid #f2f4f7;font-size:14px}
.ct-item:last-child{border-bottom:none}
.ct-seg-v{font-size:12px;color:var(--muted)}

@media (max-width:820px){
  .ov-list{left:14px;top:120px;width:calc(100% - 28px)}
  .drawer{width:100%;max-width:100%}
  .ov-hint{max-width:80vw}
}

/* box-select connect: route mouse events to the map, not the road canvas */
.mapfull #map.boxing{cursor:crosshair}
.mapfull #map.boxing .leaflet-overlay-pane{pointer-events:none}
.leaflet-control-layers{border-radius:10px!important;box-shadow:0 4px 16px rgba(15,30,60,.16)!important;border:1px solid var(--line)!important}

/* draw mode + undo/redo */
.mapfull #map.drawing{cursor:crosshair}
.mapfull #map.drawing .leaflet-overlay-pane{pointer-events:none}
.undoredo{display:flex;gap:6px}
.ov-btn.ur{display:flex;align-items:center;gap:5px;flex:1;justify-content:center;padding:7px 8px}
.ov-btn.ur .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ov-btn:disabled{opacity:.4;cursor:not-allowed}

/* ===== Custom dialogs & toasts ===== */
.ui-overlay{position:fixed;inset:0;background:rgba(15,25,45,.5);display:flex;align-items:center;justify-content:center;
  z-index:3000;opacity:0;transition:opacity .16s;padding:20px;backdrop-filter:blur(1px)}
.ui-overlay.show{opacity:1}
.ui-modal{background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32);max-width:430px;width:100%;
  padding:22px 22px 18px;transform:translateY(10px) scale(.98);transition:transform .16s}
.ui-overlay.show .ui-modal{transform:none}
.ui-modal-title{font-size:17px;font-weight:700;margin-bottom:8px}
.ui-modal-body{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:20px}
.ui-modal-foot{display:flex;justify-content:flex-end;gap:10px}
.btn.primary{background:var(--brand);color:#fff;border:none}
.btn.primary:hover{background:var(--brand-d)}
.ui-toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:3200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.ui-toast{background:#1a2230;color:#fff;padding:11px 20px;border-radius:24px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;transform:translateY(12px);transition:all .25s;max-width:88vw;text-align:center}
.ui-toast.show{opacity:1;transform:none}
.ui-toast.error{background:#c0392b}
.ui-toast.ok{background:#1f7a44}

/* ===== Modernised editor drawer ===== */
.drawer{padding:0;display:flex;flex-direction:column}
.drawer > form{display:flex;flex-direction:column;height:100%;overflow:auto;padding:16px 18px 0}
.drawer-head{position:sticky;top:0;background:#fff;margin:0 -18px 14px;padding:2px 18px 12px;border-bottom:1px solid var(--line);z-index:2;padding-right:40px}
.drawer-head h2{font-size:17px}
.drawer-x{top:12px;right:14px;z-index:3}
.reg-check{background:linear-gradient(180deg,#f5f9ff,#eef4fd);border:1px solid #d6e6fb;border-radius:10px;
  padding:11px 13px;margin-bottom:14px;font-size:13px!important;display:flex;align-items:center;gap:10px;font-weight:600!important}
.reg-check input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.form label{gap:5px}
.form label{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.form input,.form select,.form textarea{font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);font-size:14px}
.form input:disabled{background:#f4f6f9;color:var(--muted)}
.contractors{background:#fafbfd}
.ct-head{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.drawer-actions{position:sticky;bottom:0;background:#fff;margin:14px -18px 0;padding:13px 18px;border-top:1px solid var(--line);
  box-shadow:0 -6px 16px rgba(15,30,60,.05)}

/* ===== Upload page polish ===== */
.upload-hint{background:#f5f9ff;border:1px dashed #b9d4f2;border-radius:12px;padding:14px 16px;color:#3a5b82;font-size:13.5px;margin-bottom:16px}
.form input[type=file]{border:1.5px dashed var(--line);background:#fafbfc;padding:14px;border-radius:10px;cursor:pointer}
.form input[type=file]:hover{border-color:var(--brand);background:#f5f9ff}

/* cut-by-line: route events to map */
.mapfull #map.cutting .leaflet-overlay-pane{pointer-events:none}

/* viewer drawer card gets its own padding (no form wrapper) */
.drawer > .reg-card{padding:18px;overflow:auto;flex:1}
.drawer > .reg-card .btn.ghost{margin-top:6px}

/* ============================================================
   REDESIGN LAYER — civic identity (Public Sans + saffron accent)
   ============================================================ */
h1,h2,h3{letter-spacing:-.01em}

/* ---- Topbar ---- */
.topbar{background:linear-gradient(180deg,#1c3f77,#183869);height:62px;gap:20px;
  box-shadow:0 2px 0 var(--accent), 0 6px 18px rgba(20,40,80,.14);border:none}
.topbar .brand{display:flex;align-items:center;gap:11px;color:#fff}
.topbar .brand img{width:38px;height:38px;border-radius:50%;background:#fff;object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.25);flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:14.5px;font-weight:800;letter-spacing:.01em}
.brand-txt small{font-size:11px;color:#b9c9e2;font-weight:500}
.nav a{color:#c5d2e6;padding:9px 13px;border-radius:9px;font-size:14px;font-weight:600;position:relative}
.nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.nav a.on{background:rgba(255,255,255,.14);color:#fff}
.nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-11px;height:3px;border-radius:3px;background:var(--accent)}
.user .chip{background:rgba(255,255,255,.16)}
.topbar .logout{color:#c5d2e6}

/* ---- Auth ---- */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 620px at 50% -8%, #2b5aa8 0, transparent 60%),
             linear-gradient(160deg,#1c3f77 0%,#12294f 60%,#0e1f3d 100%);position:relative}
.auth-bg::before{content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(#fff 1px,transparent 1.4px);background-size:22px 22px}
.auth-wrap{position:relative;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px}
.auth-card{background:var(--panel);border-radius:20px;box-shadow:var(--shadow-lg);padding:34px 30px 30px;width:100%;
  text-align:center;border-top:4px solid var(--accent)}
.auth-card.wide{max-width:560px;text-align:left}
.auth-seal{width:96px;height:96px;margin:-70px auto 14px;border-radius:50%;background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 5px #fff,0 0 0 6px var(--line);overflow:hidden}
.auth-seal img{width:100%;height:100%;object-fit:cover}
.auth-card h1{font-size:19px;margin:0 0 3px;font-weight:800;color:var(--brand)}
.auth-sub{margin:0 0 20px;color:var(--muted);font-size:13.5px}
.auth-card .form{text-align:left}
.auth-card .btn{margin-top:6px;padding:12px;font-size:15px}
.auth-foot{color:#9fb3d4;font-size:12px}
.auth-foot b{color:#cdd9ec}

/* ---- Buttons ---- */
.btn{border-radius:10px;font-weight:700;box-shadow:0 1px 2px rgba(20,40,80,.12);transition:transform .06s, background .15s, box-shadow .15s}
.btn:hover{box-shadow:0 3px 10px rgba(20,40,80,.18)}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--accent)}
.btn.accent:hover{background:var(--accent-d)}
.btn.ghost{box-shadow:none;border:1px solid var(--line);font-weight:600}
.btn.primary{background:var(--brand)}
.btn.primary:hover{background:var(--brand-d)}

/* ---- Inputs ---- */
.form input,.form select,.form textarea{border-radius:10px;padding:11px 13px;transition:border-color .15s, box-shadow .15s}
.form label{font-weight:600}

/* ---- Page head / hero ---- */
.wrap{max-width:1120px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:25px;font-weight:800}
.hero{background:linear-gradient(120deg,#1c3f77,#254e8e);color:#fff;border-radius:18px;padding:22px 24px;
  margin-bottom:20px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(229,133,31,.5), transparent 70%)}
.hero img{width:60px;height:60px;border-radius:50%;background:#fff;object-fit:cover;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.6);position:relative}
.hero .h-txt{position:relative}
.hero h1{margin:0 0 3px;font-size:22px;font-weight:800}
.hero p{margin:0;color:#c7d5ec;font-size:13.5px}
.hero .h-role{display:inline-block;margin-top:7px;background:rgba(255,255,255,.16);color:#fff;
  font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:20px}

/* ---- Cards ---- */
.card{border-radius:16px;box-shadow:var(--shadow);padding:20px}
.card-head h2{font-size:16px;font-weight:800}
.card-head h2::before{content:"";display:inline-block;width:4px;height:15px;border-radius:3px;
  background:var(--accent);margin-right:9px;vertical-align:-2px}

/* ---- Stat cards ---- */
.stat-grid{gap:14px}
.stat{border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;position:relative;overflow:hidden;
  transition:transform .12s, box-shadow .12s;border:1px solid var(--line)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.stat:nth-child(3)::before{background:var(--accent)}
.stat .n{font-size:30px;font-weight:800;color:var(--brand);line-height:1.1}
.stat .l{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* ---- Tables ---- */
.tbl{font-size:14px}
.tbl th{font-size:10.5px;font-weight:800;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line)}
.tbl td{padding:11px 12px}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#f7f9fd}
.mini-prog{height:7px;border-radius:6px;background:#eaeef4;overflow:hidden;width:110px;margin-bottom:3px}
.mini-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:6px}
.badge{font-weight:700;letter-spacing:.01em}

/* ---- Footer ---- */
.foot{max-width:1120px;border-top:1px solid var(--line);margin-top:8px}
.foot .qx{color:var(--brand);font-weight:700}

@media (max-width:820px){
  .hero{flex-direction:row}
  .brand-txt small{display:none}
}

/* ===== Elevation ===== */
.elev-box{background:#f7faff;border:1px solid #dbe6f5;border-radius:12px;padding:13px 14px;margin:14px 0}
.elev-box .ct-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.elev-src{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 8px;border-radius:20px;background:#e8eef8;color:var(--brand)}
.elev-src.survey{background:#e3f4ea;color:#12694a}
.elev-src.manual{background:var(--accent-soft);color:#8a4d05}
.elev-src.none{background:#eef0f4;color:var(--muted)}
.elev-chart{margin-top:10px}
.elev-svg{width:100%;height:84px;display:block;background:#fff;border:1px solid var(--line);border-radius:8px}
.elev-svg .es{font-size:8.5px;fill:var(--muted);font-family:var(--font)}
.elev-empty{font-size:12.5px;color:var(--muted);padding:8px 0}
.elev-tip{font-weight:700 !important;font-size:11.5px !important}

/* viewer card */
.elev-view{margin-top:16px;background:#f7faff;border:1px solid #dbe6f5;border-radius:12px;padding:13px 14px}
.elev-view .ct-view-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.elev-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.elev-stats div{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 6px;text-align:center}
.elev-stats b{display:block;font-size:14px;font-weight:800;color:var(--brand);line-height:1.25}
.elev-stats span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.elev-ends{margin-top:9px;font-size:12.5px;color:var(--muted);text-align:center}
.elev-view .elev-svg{margin-top:10px}

/* legend key for point types */
.lg-elev{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--muted)}
.lg-elev i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:0}

/* ===== Terrain surface, readout, legend ===== */
.elev-readout{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:900;
  background:rgba(23,32,46,.92);color:#fff;border-radius:12px;padding:8px 16px;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;backdrop-filter:blur(3px)}
.elev-readout b{display:block;font-size:17px;font-weight:800;line-height:1.15}
.elev-readout span{font-size:10.5px;color:#b9c9e2;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.terrain-legend{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.tl-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.tl-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);line-height:1.7;font-variant-numeric:tabular-nums}
.tl-row i{width:16px;height:10px;border-radius:3px;display:inline-block;flex:none}
.ep-info{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.terrain-ov{image-rendering:auto}

/* ===== 3D terrain page ===== */
.t3d-wrap{position:relative;width:100%;overflow:hidden;background:#eef2f8;
  height:calc(100vh - var(--topbar-h, 62px));
  height:calc(100dvh - var(--topbar-h, 62px))}
.t3d-canvas{position:absolute;inset:0}
.t3d-canvas canvas{display:block;cursor:grab}
.t3d-canvas canvas:active{cursor:grabbing}
.t3d-panel{position:absolute;top:16px;left:16px;z-index:20;width:270px;background:rgba(255,255,255,.96);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:16px;backdrop-filter:blur(6px);max-height:calc(100% - 32px);overflow:auto}
.t3d-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.t3d-head h1{font-size:17px;margin:0;font-weight:800}
.t3d-ward select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:12.5px;font-weight:600}
.t3d-readout{background:linear-gradient(135deg,#1c3f77,#2b5aa8);color:#fff;border-radius:12px;padding:11px 13px;margin:12px 0}
.t3d-readout b{display:block;font-size:22px;font-weight:800;line-height:1.15}
.t3d-readout span{font-size:10.5px;color:#c3d3ea;font-weight:600}
.t3d-ctl{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:12px 0 4px}
.t3d-ctl span{color:var(--brand);font-size:12px}
.t3d-ctl input[type=range]{width:100%;margin-top:6px;accent-color:var(--brand)}
.t3d-hint{font-size:11px;color:var(--muted);margin:12px 0 10px;line-height:1.5}
.t3d-load{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:rgba(238,242,248,.92);color:var(--muted);font-size:13.5px;font-weight:600}
.t3d-load .spin{width:34px;height:34px;border:3px solid #d3ddec;border-top-color:var(--brand);border-radius:50%;animation:t3dspin .8s linear infinite}
@keyframes t3dspin{to{transform:rotate(360deg)}}
@media (max-width:760px){ .t3d-panel{width:auto;left:10px;right:10px;top:10px;padding:13px} .t3d-readout b{font-size:19px} }

/* base station list + note on the 3D panel */
.t3d-bases{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.t3d-bases:empty{display:none}
.bs-row{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.8}
.bs-row b{color:#7b3fa0;font-weight:800;font-variant-numeric:tabular-nums}
.bs-row span{color:var(--muted)}
.t3d-note{font-size:10.5px;color:var(--muted);margin-top:9px;line-height:1.5}

/* 3D: ground selector + hovered road card */
.t3d-ctl select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  font:inherit;font-size:13px;font-weight:600;text-transform:none;letter-spacing:normal;color:var(--ink);background:#fff}
.t3d-road{margin-top:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:10px;padding:10px 12px;display:none}
.t3d-road.on{display:block}
.t3d-road b{display:block;font-size:13.5px;font-weight:800;line-height:1.3}
.t3d-road .r-meta{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.t3d-road .r-chip{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 8px;border-radius:20px;background:#eef2f8;color:var(--brand);margin-right:5px}
.t3d-road .r-chip.good{background:#e3f4ea;color:#12694a}
.t3d-road .r-chip.fair{background:#fdf0dc;color:#8a4d05}
.t3d-road .r-chip.poor{background:#fbe6e4;color:#96261b}

/* ===== Public places on the map ===== */
.place-pin{background:none;border:none}
.place-pin .pp{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  box-shadow:0 2px 6px rgba(15,30,60,.35),0 0 0 2px #fff;color:#fff}
.place-pin .pp svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.place-lbl{background:rgba(255,255,255,.94)!important;border:1px solid var(--line)!important;border-radius:7px!important;
  box-shadow:0 2px 8px rgba(15,30,60,.16)!important;padding:3px 8px!important;color:var(--ink)!important;
  font-size:11.5px!important;font-weight:600!important;white-space:nowrap}
.place-lbl::before{display:none!important}
.place-lbl b{font-weight:700}
.pl-sub{display:block;font-size:10px;color:var(--muted);font-weight:600}
.place-cats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}

/* 3D compass */
.t3d-compass-box{position:absolute;right:18px;bottom:18px;z-index:20}
.t3d-compass{width:52px;height:52px;position:relative;filter:drop-shadow(0 3px 8px rgba(15,30,60,.25))}
.t3d-compass svg{width:100%;height:100%}
.t3d-compass .cc{fill:rgba(255,255,255,.92);stroke:#dbe3ee;stroke-width:1.5}
.t3d-compass .cn{fill:#e5851f}
.t3d-compass .cs{fill:#9fb0c8}
.t3d-compass .cn-lbl{position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:800;color:#1c3f77;letter-spacing:.04em}
#t3dReset{width:100%}

/* 3D side panel: compact rows so nothing wraps or dominates */
.t3d-panel{width:238px;padding:14px;font-size:13px}
.t3d-panel .lg-tg{font-size:12.5px;padding:5px 0;gap:8px;line-height:1.35;font-weight:600;border:none}
.t3d-panel .lg-tg input{width:15px;height:15px;flex:none}
.t3d-panel h1{font-size:15.5px}
.t3d-panel .muted.sm{font-size:11.5px;line-height:1.45;margin:2px 0 10px}
.t3d-readout{padding:9px 11px;margin:10px 0}
.t3d-readout b{font-size:19px}
.t3d-readout span{font-size:10px}
.t3d-ctl{font-size:10.5px;margin:10px 0 2px}
.t3d-ctl select{padding:5px 8px;font-size:12.5px}
.t3d-note{font-size:10px;margin-top:8px}
.t3d-hint{font-size:10.5px;margin:9px 0 8px}
.t3d-panel .tl-row{font-size:10.5px;line-height:1.55}
.t3d-panel #t3dReset{padding:7px;font-size:12.5px;margin-top:6px}
.t3d-bases{padding:8px 9px;margin-top:8px}
.bs-row{font-size:11px;line-height:1.6}
@media (max-width:760px){ .t3d-panel{width:auto;left:8px;right:8px;top:8px;padding:11px} }

/* ===== Survey layer legend ===== */
.lg-title2{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.lg-layers{display:flex;flex-direction:column;gap:1px;max-height:230px;overflow:auto;margin:2px -4px 0;padding:0 4px}
.lg-lay{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:4px 3px;border-radius:6px;cursor:pointer;line-height:1.3}
.lg-lay:hover{background:#f4f7fc}
.lg-lay input{width:14px;height:14px;flex:none;accent-color:var(--brand);margin:0}
.lg-lay i{width:16px;height:4px;border-radius:2px;flex:none}
.ll-name{flex:1;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-n{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;font-weight:700}

/* 3D road condition key */
.t3d-roadkey{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.t3d-roadkey .rk{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.7;color:var(--ink);font-weight:600}
.t3d-roadkey .rk i{width:16px;height:4px;border-radius:2px;display:inline-block;flex:none}

/* ===== Measured width points ===== */
.wp-pin{background:none;border:none}
.wp-pin .wpv{display:flex;align-items:center;justify-content:center;min-width:30px;height:15px;padding:0 4px;
  background:#1c3f77;color:#fff;border-radius:7px;font-size:9px;font-weight:800;
  box-shadow:0 1px 4px rgba(15,30,60,.3),0 0 0 1.5px #fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.wp-pin .wpd{display:block;width:9px;height:9px;border-radius:50%;background:#1c3f77;
  box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(15,30,60,.35)}
.wp-view{margin-top:16px;background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.wp-row{display:flex;align-items:baseline;gap:9px;font-size:12.5px;line-height:1.9}
.wp-row b{color:var(--brand);font-weight:800;font-variant-numeric:tabular-nums;min-width:58px}
.wp-row span{color:var(--muted)}

/* ============================================================
   ROAD DETAIL PANEL — clear hierarchy: name, route, numbers, people
   ============================================================ */
.drawer > .reg-card{padding:0;overflow:auto;flex:1}

/* headline */
.rc-head{padding:20px 20px 16px;background:linear-gradient(135deg,#1c3f77,#26529a);color:#fff;position:relative}
.rc-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.rc-head.rc-good::after{background:#26c06a}
.rc-head.rc-fair::after{background:#f0a020}
.rc-head.rc-poor::after{background:#f0564a}
.rc-title{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.rc-title h2{margin:0;font-size:21px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#fff}
.rc-unnamed{color:#b8caE4;font-weight:700;font-style:italic}
.rc-cond{flex:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.18);color:#fff;white-space:nowrap;margin-top:3px}
.rc-cond.good{background:#26c06a;color:#04331a}
.rc-cond.fair{background:#f0a020;color:#3d2600}
.rc-cond.poor{background:#f0564a;color:#3d0d08}
.rc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.rc-chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.16);color:#eaf1fb;letter-spacing:.01em}
.rc-chip.dim{background:rgba(255,255,255,.09);color:#b9c9e2}

/* the route — the first thing an officer looks for */
.rc-route{display:flex;gap:13px;padding:16px 20px;background:var(--accent-soft);border-bottom:1px solid #f0dcc2}
.rr-line{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.rr-dot{width:11px;height:11px;border-radius:50%;flex:none}
.rr-dot.start{background:#fff;box-shadow:0 0 0 3px var(--accent)}
.rr-dot.end{background:var(--accent);box-shadow:0 0 0 3px rgba(229,133,31,.28)}
.rr-bar{flex:1;width:3px;background:linear-gradient(180deg,var(--accent),rgba(229,133,31,.45));margin:3px 0;border-radius:2px;min-height:26px}
.rr-txt{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.rr-item span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#a06a1e}
.rr-item b{display:block;font-size:15px;font-weight:700;color:#5a3a08;line-height:1.35;margin-top:1px}
.rc-route.empty{display:block;color:#a06a1e;font-size:12.5px;font-weight:600;text-align:center}

/* headline numbers */
.rc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.rs{background:#fff;padding:13px 10px;text-align:center}
.rs b{display:block;font-size:20px;font-weight:800;color:var(--brand);line-height:1.15;font-variant-numeric:tabular-nums}
.rs span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:3px}
.rs em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.rs-tag{font-style:normal;font-size:8.5px;background:var(--accent-soft);color:#8a4d05;padding:1px 5px;border-radius:20px;letter-spacing:.03em}

/* sections */
.rc-sec{padding:16px 20px;border-bottom:1px solid var(--line)}
.rc-sec-t{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:11px}
.rc-count{background:#eef2f8;color:var(--brand);border-radius:20px;padding:1px 8px;font-size:10px;font-weight:800}
.rc-empty{font-size:12.5px;color:var(--muted);font-style:italic}

/* contractors — proper cards, not a buried line */
.rc-conts{display:flex;flex-direction:column;gap:9px}
.rc-cont{display:flex;align-items:center;gap:11px;background:#f8fafd;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:10px;padding:11px 13px}
.rc-cav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
.rc-cbody{min-width:0}
.rc-cbody b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.rc-cbody span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* remarks + edit */
.rc-note{margin:16px 20px;background:#fffdf6;border:1px solid #f0e4c8;border-left:3px solid var(--accent);
  border-radius:10px;padding:11px 13px;font-size:13px;color:#5c4a22;line-height:1.55}
.rc-note span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#a06a1e;margin-bottom:4px}
.rc-edit{margin:4px 20px 20px;display:inline-block}
.drawer > .reg-card .wp-view,.drawer > .reg-card .elev-view{margin:16px 20px;border-radius:12px}
.drawer > .reg-card .card-photos{margin:0}

/* ============================================================
   MAP OVERLAYS — one scrolling column on the left, nothing overlaps
   ============================================================ */
.ov-left{position:absolute;top:14px;left:14px;bottom:14px;z-index:600;width:248px;
  display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;padding-right:2px;
  scrollbar-width:thin}
.ov-left::-webkit-scrollbar{width:6px}
.ov-left::-webkit-scrollbar-thumb{background:rgba(28,63,119,.22);border-radius:3px}
.ov-left > .ov{position:static !important;top:auto;left:auto;bottom:auto;right:auto;
  transform:none;width:100%;max-width:100%;flex:none}
.ov-left .ov-legend{max-height:none}
.ov-left .lg-layers{max-height:none;overflow:visible}
.ov-list{top:14px;left:274px}
@media (max-width:820px){
  .ov-left{width:calc(100% - 28px);bottom:auto;max-height:52%}
  .ov-list{left:14px;top:auto;bottom:14px;width:calc(100% - 28px)}
}

/* ============================================================
   ROAD EDIT DRAWER — sectioned, nothing runs off the edge
   ============================================================ */
.drawer{width:400px}
.ed-form{padding:16px 18px 0}
.ed-form *,.ed-form *::before,.ed-form *::after{box-sizing:border-box}
.ed-sec{border-top:1px solid var(--line);padding:14px 0 2px;margin-top:4px}
.ed-sec:first-of-type{border-top:none}
.ed-sec-t{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.ed-hint{font-size:11px;color:var(--muted);margin:-4px 0 9px;line-height:1.45}
.ed-note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.ed-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.ed-f{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}
.ed-f input,.ed-f select,.ed-f textarea{width:100%;max-width:100%;min-width:0;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;font-weight:400;text-transform:none;
  letter-spacing:normal;color:var(--ink);background:#fff}
.ed-f input:focus,.ed-f select:focus,.ed-f textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(28,63,119,.10)}
.ed-f input:disabled{background:#f4f6f9;color:var(--muted)}
.ed-f textarea{resize:vertical}
.reg-check{display:flex;align-items:center;gap:10px;font-size:13px!important;text-transform:none!important;letter-spacing:normal!important}
.reg-check span{font-weight:700;color:var(--ink)}
.reg-check small{display:block;font-weight:500;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:normal}

/* elevation summary (read-only: it comes from the survey points) */
.ed-elev{background:#f7faff;border:1px solid #dbe6f5;border-radius:11px;padding:11px 12px;margin:10px 0 4px}
.ee-t{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.ee-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:7px}
.ee-row span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 4px;text-align:center;
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);display:block}
.ee-row b{display:block;font-size:13.5px;font-weight:800;color:var(--brand);text-transform:none;letter-spacing:normal}
.ed-elev .elev-svg{height:70px;margin-top:9px}

/* contractor blocks, with tender number */
.ct-row{position:relative;background:#f8fafd;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:11px;padding:12px 13px 2px;margin-bottom:10px}
.ct-row .ct-del{position:absolute;top:7px;right:8px;font-size:17px;line-height:1;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:2px 5px;border-radius:6px}
.ct-row .ct-del:hover{background:#fdecea;color:var(--err)}
.ct-row .ed-f:last-child{margin-bottom:10px}

/* ============================================================
   FIX: tools must all be visible; contractor fields must stack
   ============================================================ */
/* six tools wrap onto two rows instead of running off the panel */
.ov-left .modebar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ov-left .mode{flex:none;min-width:0;padding:8px 2px;font-size:10.5px;line-height:1.2;word-break:normal}
.ov-left .mode .i{width:17px;height:17px}
.ov-left .undoredo{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* contractor block: one field per line, not four squeezed across */
.ed-form .ct-row{display:block !important;grid-template-columns:none !important;
  background:#f8fafd;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:11px;padding:12px 13px 2px;margin-bottom:10px;align-items:stretch}
.ed-form .ct-row input{padding:9px 11px;font-size:13.5px;width:100%;border-radius:9px}
.ed-form .ct-row .ed-f{margin-bottom:10px}
.ed-form .ct-row .ed-g2{gap:9px}

/* contractor stretch: picking in the editor, highlighting in the viewer */
.ct-portion{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:10px}
.cp-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px}
.cp-pick{display:flex;align-items:center;gap:7px}
.cp-btn{flex:1;border:1px solid var(--line);background:#f7f9fc;border-radius:8px;padding:7px 6px;font:inherit;
  font-size:12px;font-weight:700;color:var(--brand);cursor:pointer}
.cp-btn:hover{background:#eef3fa}
.cp-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cp-arrow{color:var(--muted);font-weight:800;flex:none}
.cp-val{font-size:11.5px;color:var(--ink);margin-top:8px;line-height:1.5}
.cp-val b{color:var(--brand);font-variant-numeric:tabular-nums}
.cp-len{color:var(--muted)}
.cp-none{color:var(--muted);font-style:italic}
.cp-clear{background:none;border:none;color:var(--err);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:0 2px}
.rc-cont.has-part{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.rc-cont.has-part:hover{border-left-color:var(--accent);box-shadow:0 3px 10px rgba(20,40,80,.10)}
.rc-cont.on{border-left-color:var(--accent);background:var(--accent-soft)}
.rc-part{display:block;font-size:11px;font-weight:700;color:var(--accent-d);margin-top:3px}
.rc-part.dim{color:var(--muted);font-weight:600;font-style:italic}
.rc-tender{display:block;font-size:11px;color:var(--brand);font-weight:700;margin-top:2px}

/* ============================================================
   PLAN A STRETCH — two search boxes, the roads between, an estimate
   ============================================================ */
.ov-route{padding:12px 13px}
.rp-t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.rp-box{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.rp-dot{width:10px;height:10px;border-radius:50%;flex:none}
.rp-dot.start{background:#fff;box-shadow:0 0 0 3px var(--brand)}
.rp-dot.end{background:var(--accent);box-shadow:0 0 0 3px rgba(229,133,31,.3)}
.rp-in{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px}
.rp-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(28,63,119,.10)}
.rp-pick{flex:none;border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:32px;
  cursor:pointer;color:var(--brand);font-size:14px;line-height:1}
.rp-pick:hover{background:#eef3fa}
.rp-pick.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rp-suggest{display:none;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:9px;margin:4px 0 8px}
.rp-suggest.on{display:block}
.rs-item{display:flex;align-items:center;gap:8px;width:100%;border:none;background:#fff;padding:8px 9px;
  text-align:left;cursor:pointer;border-bottom:1px solid var(--line);font:inherit}
.rs-item:last-child{border-bottom:none}
.rs-item:hover{background:#f2f6fb}
.rs-ic{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.rs-ic.road{background:var(--brand)} .rs-ic.place{background:#0f8a6a} .rs-ic.web{background:var(--accent)}
.rs-tx{min-width:0}
.rs-tx b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-tx span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-none{padding:9px;font-size:12px;color:var(--muted)}
.rp-actions{display:flex;gap:6px;margin-top:4px}
.rp-actions .btn{flex:1;padding:8px}
.rp-result{display:none;margin-top:10px}
.rp-result.on{display:block}
.rp-busy,.rp-err{font-size:12px;color:var(--muted);padding:8px 0}
.rp-err{color:var(--err)}
.rp-sum{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rp-sum div{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:7px 8px;text-align:center}
.rp-sum b{display:block;font-size:14px;font-weight:800;color:var(--brand)}
.rp-sum span{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.rp-note{font-size:10.5px;color:var(--muted);margin-top:6px}
.rp-list{max-height:190px;overflow:auto;margin-top:8px;border:1px solid var(--line);border-radius:9px}
.rl-item{display:block;width:100%;text-align:left;border:none;background:#fff;border-bottom:1px solid var(--line);
  padding:7px 9px;cursor:pointer;font:inherit}
.rl-item:last-child{border-bottom:none}
.rl-item:hover{background:#f2f6fb}
.rl-n{display:block;font-size:12.5px;font-weight:700}
.rl-m{display:block;font-size:10.5px;color:var(--muted)}
.rl-c{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;padding:1px 6px;border-radius:20px;margin-top:3px}
.rl-c.good{background:#e3f4ea;color:#12694a}.rl-c.fair{background:#fdf0dc;color:#8a4d05}.rl-c.poor{background:#fbe6e4;color:#96261b}
.rp-est{width:100%;margin-top:9px}
.rp-pin .rpp{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  color:#fff;font-weight:800;font-size:12px;box-shadow:0 2px 7px rgba(15,30,60,.4),0 0 0 2px #fff}
.rp-pin .rpp.from{background:var(--brand)} .rp-pin .rpp.to{background:var(--accent)}

/* estimate dialog */
.est-modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:min(760px,94vw);
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.est-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;
  background:linear-gradient(135deg,#1c3f77,#26529a);color:#fff}
.est-head h2{margin:0;font-size:18px;font-weight:800}
.est-head p{margin:3px 0 0;font-size:12px;color:#c3d3ea}
.est-head .x{color:#fff;opacity:.85}
.est-body{padding:16px 20px 20px;overflow:auto}
.est-loading{padding:24px 0;text-align:center;color:var(--muted);font-size:13px}
.est-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-bottom:14px}
.est-facts div{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:9px;text-align:center}
.est-facts b{display:block;font-size:15px;font-weight:800;color:var(--brand)}
.est-facts span{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.est-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.est-tbl th{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;
  padding:7px 8px;border-bottom:2px solid var(--line)}
.est-tbl td{padding:7px 8px;border-bottom:1px solid var(--line)}
.est-tbl td.num,.est-tbl th.num{text-align:right}
.est-tbl tr.off{opacity:.4}
.est-tbl i{font-style:normal;color:var(--muted);font-size:10.5px}
.est-rate{width:78px;border:1px solid var(--line);border-radius:7px;padding:5px 7px;font:inherit;font-size:12.5px;text-align:right}
.est-tot{margin-top:14px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.est-tot div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:4px 0}
.est-tot span{color:var(--muted)}
.est-tot b{font-variant-numeric:tabular-nums}
.est-tot .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:16px}
.est-tot .grand b{color:var(--brand);font-weight:800}
.est-pct{width:52px;border:1px solid var(--line);border-radius:6px;padding:3px 5px;font:inherit;font-size:12px;text-align:right}
.est-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.est-dis{font-size:10.5px;color:var(--muted);line-height:1.5;flex:1}
.rc-est{margin:4px 20px 8px;display:block;width:calc(100% - 40px)}
@media (max-width:700px){ .est-foot{flex-direction:column;align-items:stretch} }

/* ============================================================
   PLAN BAR — top centre of the map, clearly visible
   ============================================================ */
.ov-plan{top:14px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 300px));
  padding:10px 12px;z-index:700}
.pb-row{display:flex;align-items:center;gap:8px}
.pb-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:10px;padding:0 8px;background:#fff}
.pb-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(28,63,119,.10)}
.pb-field .rp-in{border:none;box-shadow:none;padding:9px 0;font-size:13px;flex:1;min-width:0;background:none}
.pb-field .rp-in:focus{outline:none;box-shadow:none}
.pb-field .rp-pick{border:none;background:none;width:24px;height:26px;font-size:14px}
.pb-field .rp-pick:hover{background:#eef3fa;border-radius:6px}
.pb-arrow{color:var(--muted);font-weight:800;flex:none}
.pb-go{flex:none;white-space:nowrap}
.pb-clear{flex:none;width:34px;padding:8px 0;font-size:16px;line-height:1}
.ov-plan .rp-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;z-index:20;
  box-shadow:var(--shadow-lg);max-height:280px}
.ov-plan .rp-result{max-height:min(52vh,420px);overflow:auto;margin-top:10px}
.ov-plan .rp-sum{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.ov-plan .rp-list{max-height:240px}
.ov-hint{top:auto;bottom:16px;left:50%;transform:translateX(-50%)}
@media (max-width:900px){
  .ov-plan{width:calc(100% - 28px);left:14px;transform:none}
  .pb-row{flex-wrap:wrap}
  .pb-field{flex:1 1 100%}
  .pb-arrow{display:none}
  .pb-go{flex:1}
}

/* measurement sheet options */
.est-opts{background:#f7f9fc;border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:14px}
.eo-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.eo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.eo-f{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
.eo-f input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;
  text-transform:none;letter-spacing:normal;color:var(--ink);width:100%}
.est-facts em{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:2px}
.est-roads{margin-top:12px;font-size:11.5px;color:var(--muted);line-height:1.6}
.est-roads b{color:var(--ink)}

/* saved API key, shown masked */
.key-row{display:flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;margin-bottom:10px;flex-wrap:wrap}
.key-mask{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:var(--brand);
  letter-spacing:.08em}
.rs-ic.landmark{background:#b8860b}

/* the height readout sits at the bottom centre, so the hint moves above it */
.ov-hint{bottom:64px !important}
@media (max-width:900px){ .ov-hint{bottom:74px !important;max-width:calc(100% - 28px)} }
.key-test{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.key-test .muted{line-height:1.5}

/* ============================================================
   LAYOUT: the plan bar sits beside the left column, never over it
   ============================================================ */
.ov-plan{left:auto;right:70px;transform:none;
  width:min(700px,calc(100% - 360px));top:14px}
.ov-left{top:14px;max-height:calc(100% - 28px)}
/* leave room for the layer switcher at the top right */
.leaflet-top.leaflet-right{margin-top:2px}
@media (max-width:1240px){
  /* narrower screens: keep the bar clear of the 322px column */
  .ov-plan{right:14px;width:calc(100% - 350px)}
}
@media (max-width:900px){
  .ov-plan{left:14px;right:14px;width:auto;top:auto;bottom:14px}
  .ov-left{max-height:44%;width:calc(100% - 28px)}
  .ov-hint{display:none}
}
/* the legend column: tighter rows so it fits without endless scrolling */
.ov-left .ov-legend{padding:10px 12px}
.ov-left .lg-row{font-size:11.5px;line-height:1.55}
.ov-left .lg-tg{font-size:11.5px;padding:5px 0}
.ov-left .ep-info{font-size:10px}
.ov-left .terrain-legend{padding:8px 9px}
.ov-left .tl-row{line-height:1.5}
.kt-word{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;width:130px}
.kt-out{width:100%;margin-top:8px}
.kt-sum{font-size:13px;font-weight:700;padding:8px 11px;border-radius:9px;margin-bottom:8px}
.kt-sum.ok{background:#e3f4ea;color:#12694a}
.kt-sum.bad{background:#fbe6e4;color:#96261b}
.kt-row{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;margin-bottom:6px;font-size:12px}
.kt-row b{font-size:12.5px}
.kt-ok{color:#12694a;font-weight:700}
.kt-bad{color:#96261b;font-weight:700}
.kt-msg{color:var(--muted);word-break:break-word}
.kt-raw{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--muted);
  background:#f6f8fb;border-radius:6px;padding:6px 8px;margin-top:4px;word-break:break-all;line-height:1.45}
.kt-fix{background:#fffdf6;border:1px solid #f0e4c8;border-left:3px solid var(--accent);border-radius:10px;
  padding:11px 13px;margin-bottom:8px;font-size:12.5px;line-height:1.6;color:#5c4a22}
.kt-fix b{display:block;margin-bottom:5px;color:#8a5a10}
.kt-fix ol{margin:0;padding-left:18px}
.kt-fix li{margin-bottom:4px}
.kt-ip{margin-top:8px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.kt-ip b{display:inline;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--brand)}
.rs-src{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:1px 6px;border-radius:20px;vertical-align:1px}
.rs-src.google{background:#e8f0fe;color:#1a56c4}
.rs-src.osm{background:#e8f3ec;color:#12694a}

/* set A / B with the mouse */
.pb-field .rp-pick{width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:800;
  background:#eef2f8;color:var(--brand);border:1px solid var(--line)}
.pb-field .rp-pick:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.pb-field .rp-pick.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rp-menu{position:absolute;z-index:800;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-lg);padding:6px;min-width:172px;transform:translate(-6px,-6px)}
.rm-t{font-size:10.5px;color:var(--muted);font-weight:700;padding:4px 8px 6px;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);margin-bottom:4px}
.rp-menu button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;
  padding:8px 9px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.rp-menu button:hover{background:#f2f6fb}
.rm-a,.rm-b{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  color:#fff;font-size:11px;font-weight:800;flex:none}
.rm-a{background:var(--brand)} .rm-b{background:var(--accent)}


/* ============================================================
   MAP UI v2 — a small toolbar; everything else opens from it
   ============================================================ */
.mapbar{position:absolute;top:14px;left:14px;z-index:700;display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 6px 22px rgba(20,40,80,.14);backdrop-filter:blur(6px)}
.mb-ward select{border:none;background:#f3f6fb;border-radius:10px;padding:9px 30px 9px 12px;font:inherit;
  font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6576' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.mb-ward select:hover{background-color:#e9eff8}
.mb-sep{width:1px;height:26px;background:var(--line);margin:0 3px}
.mb-btn{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;background:none;
  border-radius:10px;padding:7px 11px;cursor:pointer;font:inherit;font-size:10px;font-weight:700;
  color:var(--muted);text-decoration:none;letter-spacing:.02em;transition:background .14s,color .14s}
.mb-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mb-btn:hover{background:#f2f6fb;color:var(--brand)}
.mb-btn.on{background:var(--brand);color:#fff}

/* panels slide out from under the toolbar */
.mpanel{position:absolute;top:76px;left:14px;z-index:690;width:296px;max-height:calc(100% - 104px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),visibility .18s}
.mpanel.on{opacity:1;visibility:visible;transform:none}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex:none}
.mp-head b{font-size:13.5px;font-weight:800}
.mp-x{font-size:19px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:6px}
.mp-x:hover{background:#f2f6fb;color:var(--ink)}
.mp-body{padding:13px 14px;overflow:auto}
.mp-body.mp-tight{padding:10px}
.mp-tip{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 0 0;
  background:#f7f9fc;border-radius:8px;padding:8px 10px}
.mp-search-in{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;margin-bottom:8px}
.mp-list #listItems{list-style:none;margin:0;padding:0;max-height:none}
.mp-search{width:330px}
.mp-search .pb-field{position:relative;display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:10px;padding:0 8px;background:#fff;margin-bottom:8px}
.mp-search .rp-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;
  box-shadow:var(--shadow-lg);max-height:260px}
.mp-search .rp-actions{display:flex;gap:7px}
.mp-search .rp-actions .btn{flex:1}
.mp-search .rp-result{max-height:44vh;overflow:auto}
.mp-layers .lg-layers{max-height:none;overflow:visible}

/* the old overlay boxes are gone */
.ov-left,.ov-plan,.ov-tools,.ov-legend,.ov-list{display:none !important}
.ov-hint{top:auto;bottom:66px;left:50%;transform:translateX(-50%);z-index:600;
  transition:opacity .4s;pointer-events:none}
.ov-hint.fade{opacity:0}
@media (max-width:820px){
  .mapbar{left:8px;right:8px;top:8px;justify-content:space-between;padding:5px}
  .mb-btn span{display:none}
  .mb-btn{padding:9px 12px}
  .mpanel{left:8px;right:8px;width:auto;top:64px;max-height:62%}
  .mp-search{width:auto}
}

/* editor toolbar: tools inline, in one row */
.mapbar .modebar{display:flex;gap:3px;background:none;padding:0;border-radius:0}
.mapbar .mode{flex:none;min-width:0;padding:7px 10px;font-size:10px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);background:none;border:none;cursor:pointer}
.mapbar .mode .i{width:19px;height:19px}
.mapbar .mode:hover{background:#f2f6fb;color:var(--brand)}
.mapbar .mode.on{background:var(--brand);color:#fff}
.mapbar .mb-btn:disabled{opacity:.35;cursor:not-allowed}
.mapbar .mb-btn:disabled:hover{background:none;color:var(--muted)}
@media (max-width:1100px){ .mapbar .mode span,.mapbar .mode{font-size:9.5px} }
@media (max-width:820px){
  .mapbar{flex-wrap:wrap;gap:2px}
  .mapbar .mode{padding:8px 9px}
}
.rp-note.gap{background:#fdecea;color:#96261b;border-radius:8px;padding:7px 9px;font-weight:600;line-height:1.5}

/* what each ward has */
.wd-yes{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.wd-no{color:var(--muted);font-size:12px}
.wd-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin:1px 4px 1px 0}
.wd-tag.cad{background:#e3f4ea;color:#12694a}
.wd-tag.man{background:var(--accent-soft);color:#8a4d05}

/* foldable sections in the road panel */
.fold{border:1px solid var(--line);border-radius:12px;background:#fbfcfe;margin:16px 20px}
.fold > summary{display:flex;align-items:center;gap:9px;cursor:pointer;padding:12px 14px;list-style:none;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary .ct-view-t{margin:0;flex:1;font:inherit;color:inherit;letter-spacing:inherit}
.fold > summary:hover{background:#f4f7fc;border-radius:12px}
.fold-i{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;flex:none;transition:transform .18s}
.fold[open] > summary .fold-i{transform:rotate(180deg)}
.fold[open] > summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.fold-body{padding:12px 14px}
.fold .elev-stats,.fold .wp-row{margin:0}
.drawer > .reg-card .fold{margin:16px 20px}

/* create-a-map dialog */
.ms-modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:min(620px,94vw);
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.ms-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;
  background:linear-gradient(135deg,#1c3f77,#26529a);color:#fff}
.ms-head h2{margin:0;font-size:18px;font-weight:800}
.ms-head p{margin:3px 0 0;font-size:12px;color:#c3d3ea}
.ms-head .x{color:#fff;opacity:.85}
.ms-body{padding:16px 20px;overflow:auto}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ms-t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 8px}
.ms-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.ms-chk{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;background:#fbfcfe}
.ms-chk:hover{background:#f2f6fb}
.ms-chk input{width:15px;height:15px;accent-color:var(--brand)}
.ms-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.rc-est + .rc-est{margin-top:0}

/* map sheet preview inside the dialog */
.ms-modal.wide{width:min(1180px,96vw)}
.ms-prev{display:none;border-top:1px solid var(--line);background:#e9edf4;padding:10px}
.ms-prev.on{display:block}
.ms-prev iframe{width:100%;height:min(56vh,600px);border:1px solid var(--line);border-radius:8px;background:#fff}

/* ============================================================
   EDIT DRAWER — the action bar is always on screen, whatever the
   height of the display or the length of the form
   ============================================================ */
.drawer > form.ed-form{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding:14px 18px 0}
.ed-form .drawer-head{flex:none}
.ed-form .ed-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -18px;padding:0 18px 6px}
.ed-form .drawer-actions{position:static;flex:none;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin:0 -18px;padding:10px 18px;border-top:1px solid var(--line);background:#fff;
  box-shadow:0 -6px 16px rgba(15,30,60,.06)}
.ed-form .drawer-actions .btn{flex:0 0 auto}
.ed-form .drawer-actions .btn[type="submit"]{flex:1 1 100px;min-width:96px}
/* shorter screens: give the form back every pixel we can */
@media (max-height:820px){
  .drawer > form.ed-form{padding-top:11px}
  .ed-form .ed-sec{padding:11px 0 2px}
  .ed-form .ed-f{margin-bottom:8px}
  .ed-form .ed-f input,.ed-form .ed-f select,.ed-form .ed-f textarea{padding:7px 10px;font-size:13px}
  .ed-form .drawer-actions{padding:8px 18px;gap:6px}
  .ed-form .drawer-actions .btn{padding:8px 12px;font-size:13px}
  .ed-elev{padding:9px 10px}
  .ct-portion{padding:7px 9px}
}
@media (max-height:680px){
  .ed-form .ed-sec-t{margin-bottom:7px}
  .ed-form .drawer-head h2{font-size:17px}
  .ed-form .drawer-actions .btn{padding:7px 11px;font-size:12.5px}
}