/* ═══════════════════════════════════════════════════════════════
   MASTER PLAN — Territorial Development Viewer
   Aesthetic: institutional cartography. Hairlines, tabular figures,
   condensed signage type, monochrome blue on paper white.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ink & paper */
  --paper:#ffffff;
  --paper-2:#f7fafd;
  --paper-3:#eef4fa;
  --ink:#0e1c2b;
  --ink-2:#3d5266;
  --muted:#7488a0;

  /* blues */
  --navy:#07182b;
  --navy-2:#0d2c4a;
  --blue-900:#083568;
  --blue-800:#0a4685;
  --blue-700:#0b57a4;
  --blue-600:#0e6bc4;
  --blue-500:#1a82e0;
  --blue-400:#4c9fea;
  --blue-300:#84bef2;
  --blue-200:#b7d8f8;
  --blue-100:#dcebfb;
  --blue-050:#eff6fd;

  --line:#d5e2ef;
  --line-2:#e8f0f8;
  --accent:#0e6bc4;

  --panel-w:328px;
  --top-h:60px;
  --table-h:288px;

  --shadow-1:0 1px 2px rgba(9,42,76,.06), 0 2px 8px rgba(9,42,76,.05);
  --shadow-2:0 2px 6px rgba(9,42,76,.09), 0 12px 32px rgba(9,42,76,.13);
  --shadow-3:0 24px 70px rgba(6,28,52,.28);

  --f-display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"IBM Plex Sans", -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --ease:cubic-bezier(.4,.16,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0; overflow:hidden;
  font-family:var(--f-body); font-size:13px; color:var(--ink);
  background:var(--paper-3);
  -webkit-font-smoothing:antialiased;
}
/* icon defaults — must NOT touch Leaflet's own SVG renderer */
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
.leaflet-pane svg{width:auto;height:auto;fill:initial;stroke:initial;
    stroke-width:initial;stroke-linecap:initial;stroke-linejoin:initial}

/* micro label — the recurring typographic motif */
.micro{
  font-family:var(--f-body); font-size:9.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.mono{font-family:var(--f-mono); font-size:11.5px; font-variant-numeric:tabular-nums}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#c3d5e6;border-radius:9px;border:2px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--blue-300)}

/* ══ SPLASH ══════════════════════════════════════════════════ */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(1200px 600px at 50% 42%, #12365e 0%, transparent 70%),
    linear-gradient(170deg, #07182b, #041020);
  display:grid; place-items:center;
  transition:opacity .55s var(--ease), visibility .55s;
}
#splash.gone{opacity:0;visibility:hidden}
#splash::after{ /* survey grid */
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(132,190,242,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(132,190,242,.5) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.splash-inner{position:relative;z-index:1;text-align:center}
.splash-mark{
  width:56px;height:56px;margin:0 auto 22px;position:relative;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;
  animation:markSpin 3s var(--ease) infinite;
}
.splash-mark span{background:var(--blue-400);border-radius:1px;opacity:.35}
.splash-mark span:nth-child(1){animation:blink 1.6s infinite 0s}
.splash-mark span:nth-child(2){animation:blink 1.6s infinite .2s}
.splash-mark span:nth-child(4){animation:blink 1.6s infinite .4s}
.splash-mark span:nth-child(3){animation:blink 1.6s infinite .6s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes markSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
.splash-title{
  font-family:var(--f-display); font-size:38px; font-weight:700;
  letter-spacing:.3em; color:#fff; text-indent:.3em;
}
.splash-sub{
  font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-300); margin-top:6px;
}
.splash-bar{width:180px;height:2px;background:rgba(132,190,242,.2);margin:26px auto 0;overflow:hidden}
.splash-bar i{display:block;height:100%;width:38%;background:var(--blue-400);animation:sweep 1.15s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}

/* ══ HEADER ══════════════════════════════════════════════════ */
#topbar{
  position:relative; z-index:800; height:var(--top-h);
  display:flex; align-items:center; gap:14px; padding:0 14px 0 10px;
  background:linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 62%, #123f6b 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 14px rgba(6,24,43,.34);
}
#topbar::after{ /* hairline rule + tick marks, like a map collar */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:
    repeating-linear-gradient(90deg, var(--blue-400) 0 1px, transparent 1px 14px) bottom/100% 3px no-repeat;
  opacity:.5;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:34px;height:34px;flex:none;color:var(--blue-300)}
.bm-hex{stroke:var(--blue-300);stroke-width:1.6;fill:rgba(132,190,242,.1)}
.bm-grid{stroke:rgba(132,190,242,.42);stroke-width:1}
.bm-dot{fill:#fff;stroke:none}
.brand-text{min-width:0}
.brand-text h1{
  margin:0; font-family:var(--f-display); font-size:23px; font-weight:700;
  letter-spacing:.15em; color:#fff; line-height:1.05; white-space:nowrap;
}
.brand-text p{
  margin:1px 0 0; font-size:9.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-300);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* search */
.search-wrap{position:relative;flex:1;max-width:430px;margin-left:auto}
.search-ico{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--blue-300);pointer-events:none;z-index:2
}
#searchInput{
  width:100%;height:36px;padding:0 32px 0 34px;
  font-family:var(--f-body);font-size:12.5px;color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(132,190,242,.26);
  border-radius:2px; outline:none; transition:.22s var(--ease);
}
#searchInput::placeholder{color:rgba(183,216,248,.62)}
#searchInput:focus{
  background:rgba(255,255,255,.15); border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(26,130,224,.22);
}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:0;background:none;color:var(--blue-200);
  font-size:17px;line-height:1;cursor:pointer;border-radius:2px;display:none
}
.search-clear:hover{background:rgba(255,255,255,.14);color:#fff}
.search-wrap.has-text .search-clear{display:block}
.search-results{
  position:absolute;top:calc(100% + 7px);left:0;right:0;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow-2); max-height:340px;overflow-y:auto;display:none;
}
.search-results.open{display:block;animation:dropIn .18s var(--ease)}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sr-group{
  padding:7px 12px 4px;border-bottom:1px solid var(--line-2);
  background:var(--paper-2); position:sticky; top:0;
}
.sr-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;
  border-bottom:1px solid var(--line-2); transition:background .12s
}
.sr-item:hover,.sr-item.hi{background:var(--blue-050)}
.sr-swatch{width:9px;height:9px;flex:none;border-radius:1px}
.sr-name{font-size:12.5px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-meta{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.sr-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:12px}

.top-actions{display:flex;gap:2px;flex:none}

/* buttons */
.icon-btn{
  width:34px;height:34px;flex:none;padding:8px;border:0;border-radius:2px;
  background:none;color:var(--blue-200);cursor:pointer;transition:.16s var(--ease)
}
.icon-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.icon-btn:active{transform:scale(.94)}
.icon-btn.sm{width:26px;height:26px;padding:6px}
#tablePanel .icon-btn,.modal .icon-btn{color:var(--muted)}
#tablePanel .icon-btn:hover,.modal .icon-btn:hover{background:var(--paper-3);color:var(--ink)}
.link-btn{
  border:0;background:none;padding:0;cursor:pointer;color:var(--accent);
  font-family:var(--f-body);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.link-btn:hover{text-decoration:underline}

/* ══ SHELL ═══════════════════════════════════════════════════ */
#shell{
  position:absolute;top:var(--top-h);left:0;right:0;bottom:0;
  display:flex; transition:bottom .32s var(--ease);
}
body.table-open #shell{bottom:var(--table-h)}

/* ══ PANEL ═══════════════════════════════════════════════════ */
#panel{
  width:var(--panel-w);flex:none;display:flex;flex-direction:column;
  background:var(--paper); border-right:1px solid var(--line);
  box-shadow:2px 0 14px rgba(9,42,76,.05); z-index:500;
  transition:margin-left .34s var(--ease);
}
body.panel-closed #panel{margin-left:calc(var(--panel-w) * -1)}

.tabs{display:flex;background:var(--paper-2);border-bottom:1px solid var(--line)}
.tab{
  flex:1;padding:12px 4px 10px;border:0;background:none;cursor:pointer;
  font-family:var(--f-body);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  position:relative;transition:.16s var(--ease)
}
.tab:hover{color:var(--ink-2);background:rgba(14,107,196,.05)}
.tab.is-active{color:var(--blue-700);background:var(--paper)}
.tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)
}
.tab-body{flex:1;overflow:hidden;position:relative}
.tab-pane{position:absolute;inset:0;overflow-y:auto;display:none;padding-bottom:16px}
.tab-pane.is-active{display:block;animation:paneIn .26s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.pane-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px 9px; position:sticky;top:0;z-index:3;
  background:var(--paper); border-bottom:1px solid var(--line-2)
}
.pane-note{margin:14px 15px 0;padding:11px 12px;background:var(--paper-2);border-left:2px solid var(--blue-300)}
.pane-note p{margin:5px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-2)}

/* layer list */
.layer-list{list-style:none;margin:0;padding:4px 0 0}
.layer-item{border-bottom:1px solid var(--line-2);transition:background .15s}
.layer-item:hover{background:var(--paper-2)}
.layer-item.off .li-name{color:var(--muted)}
.layer-item.off .li-swatch{opacity:.3}
.li-row{display:flex;align-items:center;gap:10px;padding:9px 15px;cursor:pointer}
.li-check{
  width:15px;height:15px;flex:none;border:1.5px solid #b5c7da;border-radius:2px;
  background:var(--paper);display:grid;place-items:center;transition:.16s var(--ease)
}
.layer-item:not(.off) .li-check{background:var(--accent);border-color:var(--accent)}
.li-check svg{width:10px;height:10px;color:#fff;stroke-width:3;opacity:0;transition:opacity .16s}
.layer-item:not(.off) .li-check svg{opacity:1}
.li-swatch{width:15px;height:15px;flex:none;border-radius:2px;transition:opacity .2s}
.li-text{flex:1;min-width:0}
.li-name{display:block;font-size:12.5px;font-weight:500;line-height:1.25;transition:color .2s}
.li-count{font-family:var(--f-mono);font-size:9.5px;color:var(--muted)}
.li-zoom{
  width:24px;height:24px;flex:none;padding:5px;border:0;border-radius:2px;
  background:none;color:#a8bcd0;cursor:pointer;transition:.15s;opacity:0
}
.layer-item:hover .li-zoom{opacity:1}
.li-zoom:hover{background:var(--blue-100);color:var(--blue-700)}
.li-opacity{display:flex;align-items:center;gap:9px;padding:0 15px 10px 40px}
.li-opacity input{flex:1;-webkit-appearance:none;height:3px;border-radius:2px;background:var(--line);outline:none}
.li-opacity input::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);cursor:pointer;
  box-shadow:0 1px 3px rgba(9,42,76,.28)
}
.li-opacity input::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--paper);
  border:2px solid var(--accent);cursor:pointer
}
.li-opacity .mono{font-size:10px;color:var(--muted);width:30px;text-align:right}

/* legend */
.legend-body{padding:6px 15px 0}
.lg-block{padding:12px 0;border-bottom:1px solid var(--line-2)}
.lg-block:last-child{border-bottom:0}
.lg-title{
  display:block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-800);margin-bottom:9px
}
.lg-row{display:flex;align-items:center;gap:10px;padding:3.5px 0}
.lg-key{width:22px;height:14px;flex:none;border-radius:2px}
.lg-key.line{height:0;border-top-width:3px;border-top-style:solid;border-radius:0}
.lg-key.pt{width:22px;display:grid;place-items:center}
.lg-key.pt i{width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(9,42,76,.3)}
.lg-label{font-size:12px;color:var(--ink-2);flex:1}
.lg-val{font-family:var(--f-mono);font-size:10px;color:var(--muted)}

/* basemap */
.basemap-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px 15px 0}
.bm-card{
  position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  cursor:pointer;background:var(--paper-2);transition:.2s var(--ease)
}
.bm-card:hover{border-color:var(--blue-300);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.bm-card.is-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,107,196,.2)}
.bm-thumb{height:62px;background-size:cover;background-position:center;background-color:var(--blue-100)}
.bm-card span{
  display:block;padding:6px 8px;font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--paper);border-top:1px solid var(--line-2)
}
.bm-card.is-active span{color:var(--blue-700)}
.bm-card.is-active::after{
  content:"";position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
  box-shadow:0 1px 4px rgba(6,28,52,.4)
}

/* overview / summary */
.summary-body{padding:14px 15px 0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.stat{background:var(--paper);padding:12px 12px 11px}
.stat b{
  display:block;font-family:var(--f-display);font-size:27px;font-weight:600;
  line-height:1;color:var(--blue-800);font-variant-numeric:tabular-nums;
}
.stat b em{font-style:normal;font-size:12px;color:var(--muted);margin-left:3px;font-family:var(--f-body)}
.stat .micro{display:block;margin-top:5px}
.zone-table{width:100%;border-collapse:collapse;margin-top:4px}
.zone-table th{
  text-align:left;padding:0 0 7px;border-bottom:1px solid var(--line);
  font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.zone-table th:last-child,.zone-table td:last-child{text-align:right}
.zone-table td{padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12px}
.zone-table tr{cursor:pointer;transition:background .14s}
.zone-table tbody tr:hover{background:var(--blue-050)}
.zt-name{display:flex;align-items:center;gap:8px}
.zt-name i{width:10px;height:10px;border-radius:2px;flex:none}
.zt-bar{display:block;position:relative;height:3px;background:var(--line-2);margin-top:5px;width:100%}
.zt-bar i{position:absolute;inset:0 auto 0 0;background:var(--blue-400)}

/* ══ MAP ═════════════════════════════════════════════════════ */
#mapWrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--paper-3)}
#map.measuring{cursor:crosshair}
/* Leaflet marks interactive paths pointer-events:auto, which beats an
   inherited "none" on the pane — so silence them individually. */
body.measuring .leaflet-pane path.leaflet-interactive,
body.measuring .leaflet-pane .leaflet-marker-icon{pointer-events:none}
.leaflet-container{font-family:var(--f-body)}
.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom{display:none} /* custom chrome only */

/* road casing — a light halo keeps the dark alignment legible on imagery */
.leaflet-pane-roads-pane{filter:drop-shadow(0 0 1.2px rgba(255,255,255,.95))}

/* feature labels */
.map-label{
  font-family:var(--f-display);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff,0 0 8px #fff;
  white-space:nowrap;pointer-events:none;
}
.map-label.sm{font-size:10px;letter-spacing:.06em;color:var(--blue-800)}
.leaflet-tooltip.map-label{background:none;border:0;box-shadow:none;padding:0}
.leaflet-tooltip.map-label::before{display:none}

/* landmark markers */
.lm-pin{
  width:11px;height:11px;border-radius:50%;
  background:var(--blue-600);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(11,87,164,.5), 0 1px 4px rgba(9,42,76,.4);
  transition:transform .18s var(--ease)
}
.lm-pin:hover{transform:scale(1.45)}
.lm-pin.airport{background:var(--navy);border-radius:2px;transform:rotate(45deg)}
.lm-pin.airport:hover{transform:rotate(45deg) scale(1.45)}

/* popups */
.leaflet-popup-content-wrapper{
  border-radius:2px;box-shadow:var(--shadow-2);padding:0;border:1px solid var(--line)
}
.leaflet-popup-content{margin:0;width:290px!important;font-size:12px}
.leaflet-popup-tip{box-shadow:var(--shadow-1)}
.pop-head{
  padding:11px 14px 10px;
  background:linear-gradient(100deg,var(--navy),var(--navy-2));
  border-bottom:2px solid var(--blue-500)
}
.pop-head .micro{color:var(--blue-300)}
.pop-head h3{
  margin:3px 0 0;font-family:var(--f-display);font-size:19px;font-weight:600;
  letter-spacing:.06em;color:#fff;line-height:1.15
}
.pop-body{max-height:260px;overflow-y:auto}
.pop-body table{width:100%;border-collapse:collapse}
.pop-body td{padding:7px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.pop-body tr:last-child td{border-bottom:0}
.pop-body td:first-child{
  width:42%;font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)
}
.pop-body td:last-child{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);word-break:break-word}
.pop-foot{padding:8px 14px;background:var(--paper-2);border-top:1px solid var(--line)}

/* toolbar */
.map-tools{
  position:absolute;top:13px;right:13px;z-index:600;
  display:flex;flex-direction:column;gap:9px
}
.tool-group{
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column
}
.tool{
  width:34px;height:34px;padding:8px;border:0;background:var(--paper);
  color:var(--ink-2);cursor:pointer;transition:.15s var(--ease);
  border-bottom:1px solid var(--line-2)
}
.tool:last-child{border-bottom:0}
.tool:hover{background:var(--blue-050);color:var(--blue-700)}
.tool:active{background:var(--blue-100)}
.tool.is-active{background:var(--accent);color:#fff}

/* measure box */
.measure-box{
  position:absolute;top:13px;right:60px;z-index:600;width:224px;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow-2);padding:11px 13px 12px;display:none
}
.measure-box.open{display:block;animation:dropIn .2s var(--ease)}
.mb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mb-value{
  font-family:var(--f-display);font-size:29px;font-weight:600;line-height:1;
  color:var(--blue-800);font-variant-numeric:tabular-nums
}
.mb-value em{font-style:normal;font-size:13px;color:var(--muted);margin-left:2px;font-family:var(--f-body)}
.mb-hint{margin:8px 0 0;font-size:10.5px;line-height:1.5;color:var(--muted)}
.mb-hint kbd{
  font-family:var(--f-mono);font-size:9.5px;background:var(--paper-3);
  border:1px solid var(--line);border-radius:2px;padding:1px 4px
}

/* status strip */
.status-strip{
  position:absolute;left:0;right:0;bottom:0;height:28px;z-index:600;
  display:flex;align-items:center;gap:12px;padding:0 13px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);font-size:11px
}
.st-item{display:flex;align-items:center;gap:7px;min-width:0}
.st-item.align-r{margin-left:auto}
.st-sep{width:1px;height:13px;background:var(--line);flex:none}
.st-grow{flex:1}
.status-strip .mono{color:var(--ink-2)}

/* scale bar */
.scale-bar{
  position:absolute;left:13px;bottom:38px;z-index:600;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  padding:4px 7px 3px;border-radius:2px;box-shadow:var(--shadow-1)
}
.scale-bar .sb-line{height:6px;border:1px solid var(--ink-2);border-top:0;transition:width .18s var(--ease)}
.scale-bar .sb-txt{
  font-family:var(--f-mono);font-size:9.5px;color:var(--ink-2);
  text-align:center;margin-top:2px;letter-spacing:.02em
}

/* measurement graphics */
.measure-vertex{
  width:8px;height:8px;border-radius:50%;background:#fff;
  border:2px solid var(--blue-700);box-shadow:0 1px 3px rgba(9,42,76,.4)
}
.measure-tip{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  background:var(--navy);color:#fff;border:0;border-radius:2px;
  padding:2px 6px;box-shadow:var(--shadow-1);white-space:nowrap
}
.leaflet-tooltip.measure-tip::before{display:none}

/* ══ ATTRIBUTE TABLE ═════════════════════════════════════════ */
#tablePanel{
  position:absolute;left:0;right:0;bottom:0;height:var(--table-h);z-index:700;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(9,42,76,.09);
  display:flex;flex-direction:column;
  transform:translateY(100%); transition:transform .32s var(--ease); visibility:hidden;
}
body.table-open #tablePanel{transform:none;visibility:visible}
.tp-head{
  display:flex;align-items:center;gap:11px;padding:0 12px;height:38px;flex:none;
  background:var(--paper-2);border-bottom:1px solid var(--line)
}
#tableLayer{
  height:25px;padding:0 24px 0 8px;border:1px solid var(--line);border-radius:2px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237488a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 6px center/11px no-repeat;
  -webkit-appearance:none;appearance:none;
  font-family:var(--f-body);font-size:11.5px;font-weight:500;color:var(--ink);
  cursor:pointer;outline:none
}
#tableLayer:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,107,196,.15)}
.tp-count{color:var(--muted)}
.tp-body{flex:1;overflow:auto}
#attrTable{width:100%;border-collapse:collapse;font-size:11.5px}
#attrTable th{
  position:sticky;top:0;z-index:2;text-align:left;white-space:nowrap;
  padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--line);
  font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;user-select:none
}
#attrTable th:hover{color:var(--blue-700);background:var(--paper-2)}
#attrTable th::after{content:"";display:inline-block;width:8px;opacity:.55;margin-left:5px}
#attrTable th.asc::after{content:"\2191";opacity:1;color:var(--accent)}
#attrTable th.desc::after{content:"\2193";opacity:1;color:var(--accent)}
#attrTable td{
  padding:7px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2)
}
#attrTable td:first-child{font-family:var(--f-body);font-weight:500;color:var(--ink)}
#attrTable tbody tr{cursor:pointer;transition:background .12s}
#attrTable tbody tr:hover{background:var(--blue-050)}
#attrTable tbody tr.sel{background:var(--blue-100)}

/* ══ MODAL ═══════════════════════════════════════════════════ */
.modal{
  position:fixed;inset:0;z-index:2000;display:none;place-items:center;
  background:rgba(7,24,43,.55);backdrop-filter:blur(3px);padding:20px
}
.modal.open{display:grid;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:2px;box-shadow:var(--shadow-3);
  padding:26px 30px 22px;animation:cardIn .28s var(--ease);
  border-top:3px solid var(--accent)
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:12px}
.modal-card h2{
  margin:5px 0 12px;font-family:var(--f-display);font-size:31px;font-weight:600;
  letter-spacing:.05em;color:var(--navy);line-height:1.05
}
.modal-card p{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin:20px 0 18px}
.help-grid p{margin:4px 0 0;font-size:11.5px;line-height:1.55}
.help-foot{padding-top:13px;border-top:1px solid var(--line);color:var(--muted)}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:980px){
  .search-wrap{max-width:230px}
  .brand-text p{display:none}
}
@media (max-width:760px){
  :root{--panel-w:100%;--table-h:230px}
  #panel{position:absolute;inset:0 auto 0 0;z-index:900}
  body.panel-closed #panel{margin-left:-100%}
  .brand-text h1{font-size:19px}
  .search-wrap{max-width:none}
  .top-actions{display:none}
  .help-grid{grid-template-columns:1fr}
  .measure-box{right:auto;left:13px;top:auto;bottom:70px}
}

/* ══ PRINT ═══════════════════════════════════════════════════ */
@media print{
  #topbar,#panel,.map-tools,.status-strip,#tablePanel,.measure-box,.modal,#splash{display:none!important}
  #shell{position:static;bottom:0}
  #mapWrap,#map{position:absolute!important;inset:0!important}
  .scale-bar{box-shadow:none}
  @page{size:landscape;margin:8mm}
}