/* =============================================================================
   Title One — Utah statewide 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;
  /* How much of the bottom of the map the panel/record sheet is covering.
     JS keeps it current so MapLibre's own controls can sit clear of it. */
  --sheet-h:0px;
  --tap:34px;          /* minimum comfortable control height */
}

*{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 --- */
/* Desktop and tablet: a floating card in the top-left corner. Phones re-lay it
   out as a bottom sheet further down — same markup, same behaviour. */
#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;
  display:flex;flex-direction:column;
}
#panel header{
  display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;user-select:none;
  min-height:var(--tap);
}
#panel header:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
#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;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  max-height:calc(100dvh - var(--nav-h) - 96px);
}
.grip{display:none}
.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}
.find select{
  flex:1;min-width:0;background:#0d1116;border:1px solid var(--edge);border-radius:6px;
  padding:7px 8px;font-size:12.5px;cursor:pointer;
}
.find select:focus{outline:none;border-color:var(--gold)}

.note{font-size:11px;color:var(--dim);line-height:1.45;margin-top:8px}

#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}

/* Outside #body on purpose: what the map is doing stays readable even when the
   panel is collapsed down to its header. */
#status{
  font-size:11.5px;color:var(--dim);padding:7px 11px;min-height:16px;
  border-top:1px solid var(--edge);background:rgba(0,0,0,.18);
}
#status:empty{display:none}
#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-county{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin-top:2px}
.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-owner.pop-noowner{border-left-color:var(--dim)}
.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}
.maplibregl-popup-content{max-width:min(300px, calc(100vw - 32px))}

/* ------------------------------------------------------- record sheet ---- */
/* Phones get the parcel record as a sheet rather than a map popup: a popup
   anchored to a parcel is half off-screen as often as not, and cannot be
   scrolled with a thumb. Hidden everywhere else. */
#detail{display:none}

@media (max-width:640px){
  #detail[hidden]{display:none}
  #detail{
    display:block;position:absolute;left:0;right:0;bottom:0;z-index:7;
    background:var(--panel);border-top:1px solid var(--edge);border-radius:14px 14px 0 0;
    backdrop-filter:blur(8px);box-shadow:0 -8px 30px rgba(0,0,0,.5);
    padding:0 14px calc(14px + env(safe-area-inset-bottom));
    max-height:min(64dvh, 560px);overflow:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  #detailClose{
    position:absolute;top:8px;right:8px;width:36px;height:36px;line-height:1;
    background:#1b212a;border:1px solid var(--edge);border-radius:50%;
    color:var(--txt);font-size:20px;cursor:pointer;
  }
  #detailBody{padding-right:40px}
}

/* --------------------------------------------------------- touch sizing -- */
/* Anything a finger has to hit gets a 44 px target, and text inputs get 16 px
   type so iOS Safari does not zoom the page the moment one is focused. */
@media (pointer:coarse){
  :root{--tap:44px}
  .maps button,.find button,.find select,.find input{min-height:44px}
  .find input,.find select{font-size:16px}
  .row{margin:10px 0;font-size:14px}
  .row input[type=checkbox]{width:20px;height:20px}
  #gpsBtn{padding:13px;font-size:15px}
  #results .hit{padding:11px 10px;font-size:13px}
  #results .hit span{font-size:12px}
  .t1-menu a,.t1-drop-btn{padding:12px}
}

/* ------------------------------------------------------------- tablet ---- */
@media (max-width:900px) and (min-width:641px){
  #panel{width:300px}
  #body{max-height:calc(100dvh - var(--nav-h) - 120px)}
}

/* -------------------------------------------------------------- phone ---- */
@media (max-width:640px){
  :root{--nav-h:52px}

  /* The panel becomes a bottom sheet: the map keeps the whole screen, and the
     controls sit under the thumb instead of under the far corner. */
  #panel{
    top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;
    border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -8px 30px rgba(0,0,0,.5);
  }
  #panel .grip{
    display:block;width:38px;height:4px;border-radius:3px;
    background:#48546330;margin:7px auto 0;
  }
  #panel header{padding:8px 14px 10px}
  #panel header h1{font-size:14px}
  #body{
    padding:0 14px 6px;
    max-height:min(56dvh, 460px);
  }
  #status{padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  #results{max-height:230px}
  .note{font-size:12px}

  /* One sheet at a time — the record replaces the controls rather than
     stacking on top of them. */
  body.detail-open #panel{display:none}

  /* MapLibre's own furniture has to clear whichever sheet is up. */
  .maplibregl-ctrl-bottom-right{bottom:var(--sheet-h)}
  .maplibregl-ctrl-bottom-left{display:none}
  .maplibregl-ctrl-top-right{top:4px}
}

@media (max-width:400px){
  .t1-brand span{display:none}
}

/* Phone held sideways: almost no height to give away, so the sheets stay low
   and the map keeps the rest. */
@media (max-width:900px) and (max-height:500px){
  #body{max-height:44dvh}
  #detail{max-height:52dvh}
}