/* =============================================================================
   Title One — Salt Lake County parcel map
   Brand tokens lifted from the live www.title.one stylesheet:
     --hale-navy #434c56   navbar background
     --primary   #ffcc4a   accent
     Lato                  nav typeface
   ========================================================================== */

/* Lato, self-hosted (SIL Open Font License 1.1). Subsets and unicode-ranges
   match what Google Fonts serves, so only the latin file is fetched unless a
   page actually renders latin-ext characters. */
@font-face{
  font-family:Lato;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/lato-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Lato;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/lato-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:Lato;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/lato-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Lato;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Title One brand */
  --navy:#434c56;
  --navy-dark:#39424b;
  --gold:#ffcc4a;
  --ink:#353535;

  /* map UI */
  --bg:#12161c;
  --panel:rgba(18,22,28,.93);
  --edge:#2c343f;
  --txt:#e8edf3;
  --dim:#94a3b4;
  --me:#22d3ee;

  --nav-h:56px;
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  font:14px/1.4 Lato,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--txt);-webkit-text-size-adjust:100%;
}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

/* ------------------------------------------------------------- nav bar --- */
.t1-nav{
  flex:0 0 auto;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.09);
  position:relative;z-index:20;
}
.t1-nav-inner{
  display:flex;align-items:center;gap:14px;
  height:var(--nav-h);padding:0 16px;max-width:1440px;margin:0 auto;
}
.t1-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:0 0 auto}
.t1-brand img{display:block;height:34px;width:auto;border-radius:4px}
.t1-brand span{font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap}

.t1-menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.t1-menu a{
  color:#fff;text-decoration:none;font-size:15px;font-weight:400;
  padding:8px 12px;border-radius:5px;white-space:nowrap;
  transition:background .15s,color .15s;
}
.t1-menu a:hover{background:rgba(255,255,255,.11)}
.t1-menu a.t1-phone{
  background:#fff;color:var(--ink);font-weight:700;font-size:14px;
  border-radius:45px;padding:9px 17px;margin-left:8px;
}
.t1-menu a.t1-phone:hover{background:var(--gold)}

/* Teams dropdown */
.t1-drop{position:relative}
.t1-drop-btn{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:#fff;font:400 15px/1.4 Lato,system-ui,sans-serif;padding:8px 12px;border-radius:5px;
}
.t1-drop-btn:hover{background:rgba(255,255,255,.11)}
.t1-caret{width:0;height:0;border:4px solid transparent;border-top-color:#fff;margin-top:3px}
.t1-drop-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:var(--navy-dark);border:1px solid rgba(255,255,255,.14);border-radius:7px;
  padding:5px;box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.t1-drop.open .t1-drop-menu{display:block}
.t1-drop-menu a{display:block;padding:8px 11px;font-size:14px}

/* hamburger */
.t1-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:9px;border-radius:5px;
}
.t1-toggle:hover{background:rgba(255,255,255,.11)}
.t1-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.t1-toggle span+span{margin-top:5px}

@media (max-width:980px){
  .t1-toggle{display:block}
  .t1-menu{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12);
    padding:8px 12px 14px;box-shadow:0 12px 26px rgba(0,0,0,.4);
    max-height:calc(100vh - var(--nav-h));overflow:auto;
  }
  .t1-menu.open{display:flex}
  .t1-menu a{padding:11px 10px;border-radius:6px}
  .t1-menu a.t1-phone{margin:8px 0 0;text-align:center}
  .t1-drop-btn{width:100%;justify-content:space-between;padding:11px 10px}
  .t1-drop-menu{position:static;display:none;border:0;background:rgba(0,0,0,.22);box-shadow:none;margin:2px 0 4px}
  .t1-drop.open .t1-drop-menu{display:block}
  .t1-drop-menu a{padding-left:22px}
}

/* ----------------------------------------------------------------- map --- */
#map-wrap{position:relative;flex:1 1 auto;min-height:0}
#map{position:absolute;inset:0}

/* --------------------------------------------------------------- panel --- */
#panel{
  position:absolute;top:10px;left:10px;z-index:5;width:322px;max-width:calc(100% - 20px);
  background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(0,0,0,.45);overflow:hidden;
}
#panel header{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;user-select:none}
#panel header h1{font-size:13px;margin:0;font-weight:700;letter-spacing:.2px;flex:1}
#panel header .chev{color:var(--dim);font-size:12px;transition:transform .18s}
#panel.collapsed .chev{transform:rotate(-90deg)}
#panel.collapsed #body{display:none}
#body{padding:0 11px 11px;max-height:calc(100vh - var(--nav-h) - 90px);overflow:auto}
.sect{border-top:1px solid var(--edge);padding-top:9px;margin-top:9px}
.lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin-bottom:6px}

.maps{display:grid;grid-template-columns:1fr 1fr;gap:5px}
button,select,input{font-family:inherit;color:var(--txt)}
.maps button{
  background:#1b212a;border:1px solid var(--edge);border-radius:6px;padding:7px 6px;
  cursor:pointer;font-size:12px;text-align:center;transition:background .12s,border-color .12s;
}
.maps button:hover{background:#232b36}
.maps button.on{background:var(--gold);border-color:var(--gold);color:#1c1c1c;font-weight:700}

.row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12.5px}
.row input[type=checkbox]{width:15px;height:15px;accent-color:var(--gold);margin:0;flex:0 0 auto}
.row label{cursor:pointer}

.find{display:flex;gap:5px;margin-top:7px}
.find input{flex:1;min-width:0;background:#0d1116;border:1px solid var(--edge);border-radius:6px;padding:7px 8px;font-size:12.5px}
.find input::placeholder{color:#5f6b7a}
.find input:focus{outline:none;border-color:var(--gold)}
.find button{background:#1b212a;border:1px solid var(--edge);border-radius:6px;padding:7px 11px;cursor:pointer;font-size:12.5px}
.find button:hover{background:#232b36}

#results{margin-top:7px;max-height:194px;overflow:auto;border-radius:6px}
#results:empty{display:none}
#results .hit{padding:6px 8px;border:1px solid var(--edge);border-top:none;background:#0d1116;cursor:pointer;font-size:12px;line-height:1.35}
#results .hit:first-child{border-top:1px solid var(--edge);border-radius:6px 6px 0 0}
#results .hit:last-child{border-radius:0 0 6px 6px}
#results .hit:hover{background:#1b212a}
#results .hit b{color:var(--txt);font-weight:700}
#results .hit span{color:var(--dim);display:block;font-size:11px}

#gpsBtn{width:100%;background:var(--me);border:none;border-radius:6px;padding:9px;font-size:13px;font-weight:700;color:#062a30;cursor:pointer}
#gpsBtn:hover{filter:brightness(1.08)}
#gps{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.55}
#gps b{color:var(--txt);font-weight:700}
#gps .pid{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13px;color:var(--me);font-weight:700}
#gps .err{color:#f87171}

#status{font-size:11.5px;color:var(--dim);margin-top:9px;min-height:16px}
#status.warn{color:#fbbf24}
#status.err{color:#f87171}

/* --------------------------------------------------------------- popup --- */
.maplibregl-popup-content{
  background:#12161c;color:var(--txt);border:1px solid var(--edge);border-radius:9px;
  padding:11px 13px;font:13px/1.5 Lato,system-ui,sans-serif;max-width:288px;box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.maplibregl-popup-tip{border-top-color:#12161c!important;border-bottom-color:#12161c!important}
.maplibregl-popup-close-button{color:var(--dim);font-size:19px;padding:1px 7px}
.pop-pid{font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;color:var(--gold);letter-spacing:.4px}
.pop-add{color:var(--txt);margin:3px 0 0;font-size:13px;font-weight:700}
.pop-owner{margin:7px 0 8px;padding:7px 9px;background:#0d1116;border-left:2px solid var(--me);border-radius:0 5px 5px 0}
.pop-owner .k{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim)}
.pop-owner .v{font-size:12.5px;font-weight:700;line-height:1.35}
.pop-owner .co{font-size:11.5px;color:var(--dim);margin-top:2px;font-weight:400}
.pop-tbl{width:100%;border-collapse:collapse;font-size:12px}
.pop-tbl td{padding:2px 0;vertical-align:top}
.pop-tbl td:first-child{color:var(--dim);padding-right:10px;white-space:nowrap}
.pop-lnk{display:inline-block;margin-top:9px;color:var(--me);font-size:12px;font-weight:700}

.maplibregl-ctrl-attrib{font-size:10px}

@media (max-width:560px){
  #panel{width:calc(100% - 20px)}
  #body{max-height:50vh}
  .t1-brand span{display:none}
}