@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── TOKENS ── */
:root {
  --bg:         #0c0e0d;
  --sidebar:    #101311;
  --section:    #161a17;
  --row:        #1a1f1b;
  --hi:         #1c2a1e;
  --border:     #232924;
  --border2:    #2c342e;
  --text:       #dde8de;
  --t2:         #7a9180;
  --t3:         #445549;
  --green:      #5fb870;
  --green-dim:  #243d28;
  --gold:       #c9a84c;
  --gold-dim:   #3a2e12;
  --red:        #c05050;
  --red-dim:    #3a1818;
  --blue:       #5b9bd5;
  --teal:       #4bbfb0;
  --teal-dim:   #133530;
  --mono:       'IBM Plex Mono', monospace;
  --sans:       'IBM Plex Sans', sans-serif;
  --r:          3px;
  --sw:         370px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased;}

/* ── LAYOUT ── */
#map{position:fixed;top:0;left:var(--sw);right:0;bottom:0;z-index:0;}
#sidebar{position:fixed;top:0;left:0;width:var(--sw);height:100vh;z-index:10;display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid var(--border);overflow:hidden;}

/* ── HEADER ── */
#sidebar-header{flex-shrink:0;padding:18px 18px 14px;border-bottom:1px solid var(--border);}
#brand{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
#brand-eyebrow{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
#brand-title{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.15;}

/* ── GEOCODER ── */
#geocoder-container .mapboxgl-ctrl-geocoder{width:100%;max-width:100%;min-width:unset;background:var(--section);border:1px solid var(--border2);border-radius:var(--r);box-shadow:none;font-family:var(--mono);font-size:12px;}
#geocoder-container .mapboxgl-ctrl-geocoder input{background:transparent;color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 36px 9px 34px;height:auto;}
#geocoder-container .mapboxgl-ctrl-geocoder input::placeholder{color:var(--t3);}
#geocoder-container .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon{fill:var(--t3);top:9px;}
#geocoder-container .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--button{background:transparent;}
#geocoder-container .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--button svg{fill:var(--t3);}
.suggestions{background:var(--section)!important;border:1px solid var(--border2)!important;border-radius:var(--r)!important;box-shadow:0 8px 32px rgba(0,0,0,.6)!important;margin-top:3px!important;}
.suggestions>li>a{color:var(--text)!important;font-family:var(--mono)!important;font-size:11px!important;padding:9px 13px!important;}
.suggestions>.active>a,.suggestions>li>a:hover{background:var(--row)!important;color:var(--green)!important;}
.mapboxgl-ctrl-geocoder--suggestion-title{color:var(--text)!important;}
.mapboxgl-ctrl-geocoder--suggestion-address{color:var(--t2)!important;}

/* ── SIDEBAR BODY ── */
#sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
#sidebar-body::-webkit-scrollbar{width:3px;}
#sidebar-body::-webkit-scrollbar-thumb{background:var(--border2);}

/* ── PLACEHOLDER ── */
#placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:240px;padding:32px;text-align:center;}
#placeholder-icon{font-size:44px;color:var(--t3);line-height:1;}
#placeholder p{font-family:var(--mono);font-size:11px;color:var(--t3);line-height:1.7;}
.placeholder-hint{font-size:10px;color:var(--t3);}

/* ── PARCEL HEADER ── */
#parcel-header{padding:14px 18px;background:var(--hi);border-bottom:1px solid var(--border);}
.meta-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-bottom:3px;}
#f-searched-address{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--green);word-break:break-word;line-height:1.3;margin-bottom:8px;}
.parcel-id-row{display:flex;align-items:baseline;gap:8px;}
.parcel-id-row .meta-label{margin-bottom:0;}
#f-parcelid{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--t2);word-break:break-all;}

/* ── DATA SECTIONS ── */
.ds{border-bottom:1px solid var(--border);}
.ds:last-child{border-bottom:none;}
.st{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);padding:11px 18px;cursor:pointer;user-select:none;transition:opacity 120ms;}
.st:hover{opacity:.75;}
.chev{font-family:var(--mono);font-size:10px;color:var(--t3);margin-left:auto;}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dot.green{background:var(--green);}
.dot.gold{background:var(--gold);}
.dot.red{background:var(--red);}
.dot.teal{background:var(--teal);}
.dot.blue{background:var(--blue);}
.dot.soil{background:#b87333;}
.dot.owner{background:#7b6ba0;}
.sb{overflow:hidden;max-height:3000px;opacity:1;transition:max-height .28s ease,opacity .2s ease;padding:0 18px 14px;}
.sb.collapsed{max-height:0!important;opacity:0;padding:0;pointer-events:none;}

/* ── ROWS ── */
.rows{display:flex;flex-direction:column;gap:1px;}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 8px;border-radius:var(--r);transition:background 120ms;}
.row:hover{background:var(--row);}
.row.hi{background:var(--row);}
.k{font-size:11px;color:var(--t2);white-space:nowrap;flex-shrink:0;font-family:var(--mono);cursor:pointer;text-decoration:underline dotted var(--t3);text-underline-offset:3px;}
.k:hover{color:var(--text);}
.v{font-size:11px;color:var(--text);text-align:right;word-break:break-word;font-family:var(--mono);font-weight:500;}
.v.gold-v{color:var(--gold);font-weight:600;font-size:12px;}
.v.teal-v{color:var(--teal);font-weight:600;font-size:12px;}
.v.winter-v{color:#7ec8e3;font-weight:600;font-size:12px;}
.v.road-paved{color:var(--green);}
.v.road-unpaved{color:var(--gold);}
.v.road-private{color:var(--t2);}

/* ── COMMUTE SECTION ── */
#winter-toggle{width:100%;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;padding:6px 12px;border-radius:var(--r);border:1px solid var(--border2);background:var(--section);color:var(--t2);cursor:pointer;margin-bottom:8px;transition:all 150ms;}
#winter-toggle:hover{border-color:var(--teal);color:var(--teal);}
#winter-toggle.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.winter-note{font-family:var(--mono);font-size:9px;color:#7ec8e3;background:var(--teal-dim);border:1px solid var(--teal);border-radius:var(--r);padding:7px 9px;margin-top:8px;line-height:1.6;}

/* ── TAX CARD ── */
.tax-card{margin-top:10px;padding:10px;background:var(--hi);border:1px solid var(--border2);border-radius:var(--r);}
.tax-card-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.tax-note{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:8px;font-style:italic;}

/* ── SUPERFUND BLOCK ── */
#superfund-block{margin-top:10px;padding:10px;background:var(--section);border:1px solid var(--border2);border-radius:var(--r);}
.sf-hdr{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;}
.loading-text{font-family:var(--mono);font-size:10px;color:var(--t3);font-style:italic;}
.loading-text.err{color:var(--red);}
.sf-item{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid var(--border);}
.sf-item:first-of-type{border-top:none;}
.sf-name{font-family:var(--mono);font-size:11px;color:var(--text);font-weight:500;}
.sf-meta{font-family:var(--mono);font-size:10px;color:var(--t2);}
.sf-dist{font-family:var(--mono);font-size:10px;color:var(--t2);margin-left:6px;}
.sf-badge{display:inline-block;padding:1px 5px;border-radius:2px;font-size:9px;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-right:4px;}
.fed{background:var(--red-dim);color:var(--red);}
.state{background:var(--gold-dim);color:var(--gold);}
.bx{background:var(--red-dim);color:var(--red);}
.bh{background:var(--red-dim);color:var(--red);}
.bm{background:var(--gold-dim);color:var(--gold);}
.bl{background:var(--section);color:var(--t3);border:1px solid var(--border2);}
.bom{background:var(--green-dim);color:var(--green);}
.rem{display:inline-block;padding:1px 5px;border-radius:2px;font-size:9px;font-family:var(--mono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-left:4px;}
.rem-active{background:#1a2a3a;color:var(--blue);border:1px solid var(--blue);}
.rem-complete{background:var(--green-dim);color:var(--green);}
.rem-monitor{background:#252015;color:var(--gold);border:1px solid var(--gold-dim);}
.rem-assess{background:var(--section);color:var(--t3);border:1px solid var(--border2);}
.sf-summary{cursor:pointer;}
.sf-summary:hover .sf-name{color:var(--green);}
.sf-expand{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:4px;}
.sf-detail{margin-top:8px;padding:10px 12px;background:var(--section);border:1px solid var(--border2);border-left:3px solid var(--border2);border-radius:var(--r);}
.sf-detail.hidden{display:none;}
.sf-sec{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.sf-sec:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.sf-sec.danger{border-left-color:var(--red);}
.sf-lbl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:4px;}
.sf-sec.danger .sf-lbl{color:var(--red);}
.sf-txt{font-family:var(--sans);font-size:11px;color:var(--t2);line-height:1.65;}
.sf-collapse{font-family:var(--mono);font-size:9px;color:var(--t3);text-align:right;margin-top:8px;cursor:pointer;}
.sf-collapse:hover{color:var(--t2);}
.sf-epa-link{font-family:var(--mono);font-size:10px;color:var(--green);text-decoration:none;}
.sf-epa-link:hover{text-decoration:underline;}
.sf-banner{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:3px;margin-bottom:8px;}
.sf-none{font-family:var(--mono);font-size:11px;color:var(--green);}

/* ── SOIL ── */
.soil-series{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;}
.soil-sub{font-family:var(--mono);font-size:10px;color:var(--t3);margin-bottom:10px;font-style:italic;}
.soil-overall{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r);border:1px solid;margin-bottom:12px;text-align:center;}
.soil-factor{padding:8px 0;border-top:1px solid var(--border);}
.soil-factor:first-of-type{border-top:none;}
.soil-factor-hdr{font-family:var(--mono);font-size:10px;font-weight:600;margin-bottom:4px;}
.soil-factor-body{font-family:var(--sans);font-size:11px;color:var(--t2);line-height:1.6;}
.soil-disc{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:10px;padding-top:8px;border-top:1px solid var(--border);line-height:1.5;font-style:italic;}
.permit-note{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:10px;line-height:1.5;}

/* ── QUALITY OF LIFE ── */
.qol-header{display:grid;grid-template-columns:1fr 72px 72px;gap:4px;padding:0 8px 4px;border-bottom:1px solid var(--border);margin-bottom:2px;}
.qol-col{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);text-align:right;}
.qol-row{display:grid;grid-template-columns:1fr 72px 72px;gap:4px;align-items:center;padding:4px 8px;border-radius:var(--r);transition:background 120ms;}
.qol-row:hover{background:var(--row);}
.qol-lbl{font-family:var(--mono);font-size:11px;color:var(--t2);}
.qol-cnt{font-family:var(--mono);font-size:11px;font-weight:600;text-align:right;}
.qol-src{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:10px;padding-top:8px;border-top:1px solid var(--border);line-height:1.5;font-style:italic;}

/* ── FIELD TOOLTIP ── */
.field-tip{background:var(--row);border:1px solid var(--border2);border-left:3px solid var(--green);border-radius:var(--r);padding:10px 12px;margin:2px 0 6px;animation:fadeIn 120ms ease;}
.field-tip-title{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--green);margin-bottom:5px;}
.field-tip-body{font-family:var(--sans);font-size:11px;color:var(--t2);line-height:1.6;}
.field-tip-close{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:7px;cursor:pointer;text-align:right;}
.field-tip-close:hover{color:var(--t2);}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── ABOUT BUTTON ── */
#about-btn{padding:12px 18px;font-family:var(--mono);font-size:10px;color:var(--t3);cursor:pointer;border-top:1px solid var(--border);transition:color 150ms;letter-spacing:.04em;}
#about-btn:hover{color:var(--green);}

/* ── ABOUT MODAL ── */
#about-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;}
#about-modal.hidden{display:none!important;}
#about-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);}
#about-box{position:relative;z-index:101;background:var(--sidebar);border:1px solid var(--border2);border-radius:6px;width:min(680px,92vw);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.7);}
#about-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
#about-title{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);}
#about-close{background:transparent;border:none;color:var(--t3);font-size:16px;cursor:pointer;padding:4px 8px;font-family:var(--mono);transition:color 120ms;}
#about-close:hover{color:var(--text);}
#about-body{overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.asec{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.asec:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.asec-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:10px;}
.asec-body{font-family:var(--sans);font-size:12px;color:var(--t2);line-height:1.7;}
.atbl{display:flex;flex-direction:column;gap:1px;}
.arow{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:8px;border-radius:var(--r);transition:background 120ms;}
.arow:hover{background:var(--row);}
.ak{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text);line-height:1.5;}
.av{font-family:var(--sans);font-size:11px;color:var(--t2);line-height:1.6;}

/* ── SUPERFUND POPUP (map click) ── */
.sf-popup .mapboxgl-popup-content{background:var(--sidebar);border:1px solid var(--red);border-radius:4px;padding:0;box-shadow:0 8px 32px rgba(0,0,0,.7);font-family:var(--mono);}
.sf-popup .mapboxgl-popup-tip{border-top-color:var(--red)!important;}
.sf-popup .mapboxgl-popup-close-button{color:var(--t2);font-size:16px;padding:6px 8px;background:transparent;}
.sf-popup-inner{padding:14px;}
.sf-popup-badge{font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--red-dim);padding:3px 6px;border-radius:2px;display:inline-block;margin-bottom:8px;}
.sf-popup-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px;line-height:1.3;}
.sf-popup-meta{font-size:10px;color:var(--t2);margin-bottom:2px;}
.sf-popup-status{font-size:10px;color:var(--red);margin-bottom:8px;}
.sf-popup-desc{font-size:10px;color:var(--t2);line-height:1.6;border-top:1px solid var(--border);padding-top:8px;font-family:var(--sans);}

/* ── LEGEND ── */
#legend{position:fixed;top:16px;right:16px;z-index:5;background:rgba(16,19,17,.92);border:1px solid var(--border2);border-radius:var(--r);padding:12px 14px;font-family:var(--mono);font-size:10px;color:var(--t2);backdrop-filter:blur(6px);min-width:190px;}
.leg-title{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:9px;}
.leg-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:10px;}
.leg-sw{display:inline-block;width:12px;height:12px;flex-shrink:0;}
.parcel-sw{background:transparent;border:1.5px solid #3a4a3c;border-radius:2px;}
.selected-sw{background:rgba(95,184,112,.3);border:1.5px solid var(--green);border-radius:2px;}
.sf-sw{background:var(--red);border-radius:50%;width:10px;height:10px;border:1.5px solid #0c0e0d;opacity:.8;}
.leg-hint{font-size:9px;color:var(--t3);margin-top:8px;font-style:italic;line-height:1.5;border-top:1px solid var(--border);padding-top:8px;}

/* ── MAP BADGE ── */
#map-badge{position:fixed;bottom:24px;left:calc(var(--sw) + 16px);z-index:5;background:rgba(12,14,13,.85);border:1px solid var(--border2);border-radius:var(--r);padding:6px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--t3);backdrop-filter:blur(4px);pointer-events:none;}

/* ── DRAWER / MOBILE ── */
#drawer-handle{display:none;width:36px;height:4px;background:var(--border2);border-radius:2px;margin:8px auto;flex-shrink:0;}
.lnk{color:var(--green);text-decoration:none;}
.lnk:hover{text-decoration:underline;}

/* ── UTILITY ── */
.hidden{display:none!important;}
.mapboxgl-ctrl-attrib,.mapboxgl-ctrl-logo{display:none!important;}

/* ── MOBILE ── */
@media(max-width:768px){
  :root{--sw:100vw;}
  #map{top:0;left:0;right:0;bottom:52vh;}
  #sidebar{top:auto;bottom:0;height:54vh;width:100%;border-right:none;border-top:1px solid var(--border2);border-radius:12px 12px 0 0;transition:height .3s ease;}
  #sidebar.expanded{height:90vh;}
  #drawer-handle{display:block;cursor:grab;}
  #brand{display:none;}
  #sidebar-header{padding:0 16px 12px;}
  #legend,#map-badge{display:none;}
}