:root{
  --bg:#0b0d0c; --panel:#14181a; --panel2:#1b2124; --line:#2a3234;
  --txt:#e8ecea; --dim:#8b9694; --green:#4ade80; --green-d:#166534;
  --amber:#f5b942; --blue:#4a9df5; --purple:#b07af7; --orange:#f5844a; --red:#f26d6d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none !important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:10px;opacity:.55}

/* ── CENTRE RETICLE ───────────────────────────────────────
   Marks the point the legal-light times are computed for. Fixed to the middle
   of the viewport, which is what lightPoint() falls back to (the map centre), so
   it never tracks a marker — it must not take a gesture, and it must not sit
   inside a chrome stack (W53 pins their exact child order). */
#centre-reticle{position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);z-index:5;pointer-events:none;color:var(--green);
  opacity:.9;transition:opacity .18s ease,color .18s ease;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.95)) drop-shadow(0 0 1.5px rgba(0,0,0,.95))}
#centre-reticle svg{width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#centre-reticle .cr-dot{fill:currentColor;stroke:none}
/* The readout names the source of the times. When that is not the map centre the
   reticle is no longer marking them, so it recedes instead of lying about it. */
#centre-reticle[data-anchor="me"],
#centre-reticle[data-anchor="track"]{opacity:.22;color:var(--dim)}

/* ── FIELD CHROME STACKS ──────────────────────────────────
   Both stacks are single flex columns. Every field card is a flow child, so
   two cards cannot occupy the same pixels no matter how much text they hold.
   The offsets this replaced were hardcoded per breakpoint (top:74px for the
   light card, top:96px for the verdict) and the light card painted across the
   unit pill on a phone. Do not reintroduce position:absolute here. */
#chrome-top{position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;flex-direction:column;gap:6px;
  padding:calc(6px + env(safe-area-inset-top)) 8px 0;pointer-events:none}
#chrome-top > *{pointer-events:auto}
#topbar{display:flex;align-items:center;gap:8px;background:none;padding:0}
.brand{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:rgba(8,10,9,.72);border-radius:11px;padding:4px 9px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.icon-btn{width:38px;height:38px;border-radius:11px;background:rgba(30,36,38,.9);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--txt);flex:none}
.icon-btn.active{color:var(--green);border-color:var(--green);box-shadow:0 0 0 2px rgba(74,222,128,.25)}
.icon-btn:active{background:var(--green-d)}
.brand{flex:1;display:flex;align-items:center;gap:8px}
.brand-mark{width:22px;height:22px;border-radius:6px;background:var(--green);
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 5.7a4.3 4.3 0 1 1 0 8.6 4.3 4.3 0 1 1 0-8.6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 5.7a4.3 4.3 0 1 1 0 8.6 4.3 4.3 0 1 1 0-8.6z'/></svg>")}
.brand-txt{font-size:15px;letter-spacing:1.4px;font-weight:600}
.brand-txt b{color:var(--green)}
/* ── STATUS BAR: unit + public-land verdict in one card ────
   These were two stacked cards repeating the same unit name (a "United States —
   Locate or Find" pill and a separate verdict banner saying "Nearest: Kisatchie
   National Forest"). One card, one statement of the unit. */
#verdict{position:relative;display:flex;flex-direction:column;gap:2px;
  padding:7px 10px;border-radius:12px;background:rgba(14,20,17,.95);
  border:1px solid var(--line);box-shadow:0 6px 22px rgba(0,0,0,.5)}
#verdict.warn{background:rgba(34,24,14,.96);border-color:#7c4a12}
#verdict.bad{background:rgba(38,16,16,.96);border-color:#7c2222}
/* Row 1 holds the unit + the extract chip; the civic line sits below it at full
   width so a long "INSIDE <town> limits · <parish> ±24 m" is not squeezed into
   a column the chip has already eaten. */
.v-row{display:flex;align-items:center;gap:8px;min-width:0}
#unit-pill{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:0;background:none;border:0;text-align:left;color:inherit}
.v-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* The verdict line only exists once verdict() has a real answer. An empty
   title hides its row rather than showing a colour with nothing behind it. */
.v-row1{display:flex;align-items:center;gap:6px;min-width:0}
.v-row1:has(#v-title:empty){display:none}
.v-title{font-size:10.5px;font-weight:800;letter-spacing:1.1px;color:var(--green);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#verdict.warn .v-title{color:var(--amber)}
#verdict.bad .v-title{color:var(--red)}
.unit-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.unit-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* access detail + civic context: hidden until the bar is tapped open */
.v-sub{display:none;font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#verdict[data-open="true"] .v-sub{display:block}
.v-civic{font-size:10.5px;color:#fcd34d;letter-spacing:.2px;margin-left:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-civic.coarse{color:var(--amber)}
.v-civic:empty{display:none}
.chev{width:14px;height:14px;flex:none;opacity:.6}
#v-icon{display:none}
/* The extract chip is a flex sibling, not an absolute overlay: it can never
   land on top of a long unit name. */
#extract-date{flex:none;font-size:9px;white-space:nowrap}

/* ── LEGAL SHOOTING LIGHT ─────────────────────────────────── */
#shooting-light{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 8px;
  padding:5px 9px;border:1px solid var(--line);border-radius:11px;
  background:rgba(11,18,14,.94);font-size:10px;color:#d7e5da;pointer-events:none}
.sl-title{font-weight:700;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-title span{font-weight:400;color:#91a49a}
.sl-times{grid-column:1/3;display:flex;gap:9px;white-space:nowrap;font-size:10.5px}
.sl-times b{color:#fff;font-weight:700}
.sl-countdown{font-size:10.5px;color:#7ee2a0;font-weight:700;white-space:nowrap;text-align:right}
.sl-countdown.out{color:#f5b942}

/* ── LEFT DRAWER MENU ────────────────────── */
#menu-backdrop{position:absolute;inset:0;z-index:44;background:rgba(0,0,0,.5)}
#menu{position:absolute;top:0;left:0;bottom:0;z-index:45;width:280px;display:flex;
  flex-direction:column;background:var(--panel);border-right:1px solid var(--line);
  box-shadow:12px 0 40px rgba(0,0,0,.6);animation:menu-in .18s ease}
@keyframes menu-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.menu-head{display:flex;align-items:center;gap:9px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.menu-head .brand-txt{flex:1}
#menu-close{font-size:16px;color:var(--dim)}
#menu-close:active{background:var(--panel2)}
.menu-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 8px calc(16px + env(safe-area-inset-bottom))}
.menu-group{margin-top:4px}
.menu-group-title{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim);padding:12px 10px 6px}
.menu-item{display:flex;align-items:center;gap:13px;width:100%;min-height:48px;padding:0 11px;
  border-radius:11px;text-align:left;color:var(--txt);font-size:14px;font-weight:600}
.menu-item:active{background:var(--panel2)}
.menu-item.on{background:rgba(22,101,52,.30);box-shadow:inset 0 0 0 1px var(--green-d)}
.mi-ico{width:22px;height:22px;flex:none;background:var(--green);
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.ico-layers{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2 21.8 8.7 12 15.2 2.2 8.7Z'/><path d='M12 5.6 19.6 11.1 12 16.6 4.4 11.1Z'/><path d='M12 9 17.4 13.5 12 18 6.6 13.5Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2 21.8 8.7 12 15.2 2.2 8.7Z'/><path d='M12 5.6 19.6 11.1 12 16.6 4.4 11.1Z'/><path d='M12 9 17.4 13.5 12 18 6.6 13.5Z'/></svg>")}
.ico-base{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8.2' fill='black'/><ellipse cx='12' cy='12' rx='3.4' ry='8.2' fill='none' stroke='black' stroke-width='2'/><path d='M3.8 12h16.4' stroke='black' stroke-width='2'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8.2' fill='black'/><ellipse cx='12' cy='12' rx='3.4' ry='8.2' fill='none' stroke='black' stroke-width='2'/><path d='M3.8 12h16.4' stroke='black' stroke-width='2'/></svg>")}
.ico-access{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 20 11 7.5' fill='none'/><path d='M20 20 13 7.5' fill='none'/><path d='M12 18.5v-2M12 14v-2M12 9.5v-1.5' fill='none'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 20 11 7.5' fill='none'/><path d='M20 20 13 7.5' fill='none'/><path d='M12 18.5v-2M12 14v-2M12 9.5v-1.5' fill='none'/></svg>")}
.ico-terrain{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='17' cy='6.5' r='2.4'/><path d='M3 19 9.5 5.5 16 19Z'/><path d='M11.5 19 17 9.5 21.5 19Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='17' cy='6.5' r='2.4'/><path d='M3 19 9.5 5.5 16 19Z'/><path d='M11.5 19 17 9.5 21.5 19Z'/></svg>")}
.ico-find{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M10.5 4.5a6 6 0 1 0 0 12 6 6 0 1 0 0-12zM10.5 7.6a2.9 2.9 0 1 1 0 5.8 2.9 2.9 0 1 1 0-5.8z'/><path d='M14.6 14.6l1.4-1.4 5.7 5.7-1.4 1.4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M10.5 4.5a6 6 0 1 0 0 12 6 6 0 1 0 0-12zM10.5 7.6a2.9 2.9 0 1 1 0 5.8 2.9 2.9 0 1 1 0-5.8z'/><path d='M14.6 14.6l1.4-1.4 5.7 5.7-1.4 1.4z'/></svg>")}
.ico-locate{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 4.6a7.4 7.4 0 1 0 0 14.8 7.4 7.4 0 1 0 0-14.8zM12 8.9a3.1 3.1 0 1 1 0 6.2 3.1 3.1 0 1 1 0-6.2z'/><circle cx='12' cy='12' r='2.3'/><path d='M11 2.2h2v3h-2zM11 18.8h2v3h-2zM2.2 11h3v2h-3zM18.8 11h3v2h-3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 4.6a7.4 7.4 0 1 0 0 14.8 7.4 7.4 0 1 0 0-14.8zM12 8.9a3.1 3.1 0 1 1 0 6.2 3.1 3.1 0 1 1 0-6.2z'/><circle cx='12' cy='12' r='2.3'/><path d='M11 2.2h2v3h-2zM11 18.8h2v3h-2zM2.2 11h3v2h-3zM18.8 11h3v2h-3z'/></svg>")}
.ico-pin{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 5.7a4.3 4.3 0 1 1 0 8.6 4.3 4.3 0 1 1 0-8.6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 5.7a4.3 4.3 0 1 1 0 8.6 4.3 4.3 0 1 1 0-8.6z'/></svg>")}
.ico-track{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.6c2.6-2.3 4.5-5.1 7.1-4.7 2.4.4 3.1 3.3 5.3 2.5 1.6-.6 2.4-2 3.2-3.2' fill='none'/><circle cx='4' cy='18.6' r='1.8' fill='black'/><circle cx='11.1' cy='13.9' r='1.3' fill='black'/><circle cx='19.6' cy='13.2' r='1.8' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.6c2.6-2.3 4.5-5.1 7.1-4.7 2.4.4 3.1 3.3 5.3 2.5 1.6-.6 2.4-2 3.2-3.2' fill='none'/><circle cx='4' cy='18.6' r='1.8' fill='black'/><circle cx='11.1' cy='13.9' r='1.3' fill='black'/><circle cx='19.6' cy='13.2' r='1.8' fill='black'/></svg>")}
.ico-way{display:inline-block;width:100%;height:100%;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-image:none;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-image:none}
.ico-way-stand{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 9h14v3H5zM7 12h2l-1 8H6zm8 0h2l1 8h-2zM4 7h16v2H4z'/><path d='M5 6V3M19 6V3M5 4h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 9h14v3H5zM7 12h2l-1 8H6zm8 0h2l1 8h-2zM4 7h16v2H4z'/><path d='M5 6V3M19 6V3M5 4h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")}
.ico-way-blind{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 19 12 6l9 13H3Z' fill='black'/><path d='M7 19v-4h10v4M12 6v13' fill='none' stroke='black' stroke-width='1.7'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 19 12 6l9 13H3Z' fill='black'/><path d='M7 19v-4h10v4M12 6v13' fill='none' stroke='black' stroke-width='1.7'/></svg>")}
.ico-way-trail{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h3M4 8h4M7 13h4M12 18h3M17 21h3' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/><path d='M9 4c7 1 3 5 3 7s7 2 5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h3M4 8h4M7 13h4M12 18h3M17 21h3' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/><path d='M9 4c7 1 3 5 3 7s7 2 5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")}
.ico-way-tracks{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4c-2 2-2 5 0 7s2 4 0 7M17 4c2 2 2 5 0 7s-2 4 0 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/><path d='M4 7h3M17 7h3M4 14h3M17 14h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4c-2 2-2 5 0 7s2 4 0 7M17 4c2 2 2 5 0 7s-2 4-0 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/><path d='M4 7h3M17 7h3M4 14h3M17 14h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")}
.ico-way-scrape{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21V5M12 10c-4-2-6-1-7-4M12 14c4-2 6-1 8-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='m4 19 3-3 3 3 3-3 3 3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21V5M12 10c-4-2-6-1-7-4M12 14c4-2 6-1 8-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='m4 19 3-3 3 3 3-3 3 3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")}
.ico-way-bedding{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17c2-7 5-9 9-9s7 2 9 9c-5 3-13 3-18 0Z' fill='black'/><path d='M6 16c3-2 9-2 12 0M8 12c2-1 6-1 8 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17c2-7 5-9 9-9s7 2 9 9c-5 3-13 3-18 0Z' fill='black'/><path d='M6 16c3-2 9-2 12 0M8 12c2-1 6-1 8 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>")}
.ico-way-water{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2S5 10 5 15a7 7 0 0 0 14 0c0-5-7-13-7-13Z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2S5 10 5 15a7 7 0 0 0 14 0c0-5-7-13-7-13Z' fill='black'/></svg>")}
.ico-way-food{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h16M6 12v5h12v-5M8 17v3M16 17v3M12 4v8M12 4c-4 0-5 3-5 4h5M12 4c4 0 5 3 5 4h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h16M6 12v5h12v-5M8 17v3M16 17v3M12 4v8M12 4c-4 0-5 3-5 4h5M12 4c4 0 5 3 5 4h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.ico-way-camera{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8h5l2-3h4l2 3h5v11H3Z' fill='black'/><circle cx='12' cy='13' r='3.5' fill='none' stroke='black' stroke-width='2'/><path d='M6 11h1' stroke='white' stroke-width='1.5'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8h5l2-3h4l2 3h5v11H3Z' fill='black'/><circle cx='12' cy='13' r='3.5' fill='none' stroke='black' stroke-width='2'/><path d='M6 11h1' stroke='white' stroke-width='1.5'/></svg>")}
.ico-way-camp{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20 12 4l9 16H3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M9 20v-6h6v6M12 4v3' fill='none' stroke='black' stroke-width='2'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20 12 4l9 16H3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M9 20v-6h6v6M12 4v3' fill='none' stroke='black' stroke-width='2'/></svg>")}
.ico-way-parking{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M9 17V7h4a3 3 0 0 1 0 6H9' fill='none' stroke='black' stroke-width='2'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M9 17V7h4a3 3 0 0 1 0 6H9' fill='none' stroke='black' stroke-width='2'/></svg>")}
.ico-way-kill{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='3' fill='black'/><path d='M12 2v5M12 17v5M2 12h5M17 12h5' stroke='black' stroke-width='2'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='3' fill='black'/><path d='M12 2v5M12 17v5M2 12h5M17 12h5' stroke='black' stroke-width='2'/></svg>")}
.ico-way-hazard{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 3 10 18H2L12 3Z' fill='black'/><path d='M12 8v6M12 17v1' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 3 10 18H2L12 3Z' fill='black'/><path d='M12 8v6M12 17v1' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>")}
.ico-menu{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/></svg>")}
.ico-offline{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 2h2v9h4l-5 6-5-6h4z'/><path d='M4 20h16v2H4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 2h2v9h4l-5 6-5-6h4z'/><path d='M4 20h16v2H4z'/></svg>")}
.ico-legend{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h3v3H4zM9 5h11v2H9zM4 10h3v3H4zM9 10h11v2H9zM4 15h3v3H4zM9 15h11v2H9z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h3v3H4zM9 5h11v2H9zM4 10h3v3H4zM9 10h11v2H9zM4 15h3v3H4zM9 15h11v2H9z'/></svg>")}

/* ── PANEL ───────────────────────────────── */
#panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:40;
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.6)}
.panel-head{display:flex;align-items:center;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:16px;letter-spacing:.6px;flex:1}
#panel-close{font-size:17px;color:var(--dim);padding:4px 8px}
.panel-body{overflow-y:auto;padding:8px 0 30px;flex:1}
.row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.045)}
.row-ico{width:14px;height:14px;border-radius:4px;flex:none}
.row-txt{flex:1;min-width:0}
.row-t{font-size:13.5px;font-weight:600}
.row-s{font-size:11px;color:var(--dim);margin-top:1px}
.sw{width:44px;height:25px;border-radius:13px;background:#333c3e;position:relative;flex:none;transition:background .16s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#8b9694;transition:transform .16s,background .16s}
.sw.on{background:var(--green-d)}
.sw.on::after{transform:translateX(19px);background:var(--green)}
.seg{display:flex;gap:6px;padding:12px 16px;flex-wrap:wrap}
.seg button{padding:8px 12px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);font-size:12px;font-weight:600}
.seg button.on{background:var(--green-d);border-color:var(--green)}
.note{padding:12px 16px;font-size:11.5px;color:var(--dim);line-height:1.55}
.note b{color:var(--txt)}

/* ── IDENTIFY ────────────────────────────── */
#ident{position:relative;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px 15px;box-shadow:0 10px 40px rgba(0,0,0,.65)}
#ident-close{position:absolute;top:9px;right:11px;color:var(--dim);font-size:15px}
.i-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;
  font-size:10px;font-weight:800;letter-spacing:.9px;margin-bottom:8px}
.i-name{font-size:16px;font-weight:700;line-height:1.25}
.i-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-top:11px;font-size:12px}
.i-grid dt{color:var(--dim)}
.i-grid dd{margin:0;font-weight:600}
.i-verdict{margin-top:11px;padding:9px 11px;border-radius:10px;font-size:12px;font-weight:600;
  background:rgba(22,101,52,.22);border:1px solid var(--green-d)}
.i-verdict.warn{background:rgba(124,74,18,.22);border-color:#7c4a12}
.i-verdict.bad{background:rgba(124,34,34,.22);border-color:#7c2222}

/* ── BOTTOM STACK ───────────────────────────────────────── */
#chrome-bottom{position:absolute;left:0;right:0;bottom:0;z-index:30;
  display:flex;flex-direction:column;gap:6px;
  padding:0 10px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
#chrome-bottom > *{pointer-events:auto;max-width:100%}

/* ── FIELD-USE NOTICE (collapsed to one line) ───────────── */
#provenance-notice{position:relative;align-self:flex-start;
  width:100%;max-width:430px;border:1px solid #66552b;border-radius:11px;
  background:rgba(25,22,13,.96);color:#eee3c4;box-shadow:0 5px 18px #0008}
#provenance-toggle{display:flex;align-items:center;gap:7px;width:100%;padding:7px 30px 7px 10px;
  color:#f5c866;font-size:11px;font-weight:600;text-align:left}
.pn-ico{width:15px;height:15px;border-radius:50%;border:1px solid #f5c866;flex:none;
  display:grid;place-items:center;font-size:9px;font-weight:800;font-style:italic}
.pn-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-chev{opacity:.7;font-size:11px;transition:transform .18s}
#provenance-notice[data-open="true"] .pn-chev{transform:rotate(180deg)}
#provenance-body{display:none;padding:0 10px 9px;font-size:11px;line-height:1.35}
#provenance-notice[data-open="true"] #provenance-body{display:block}
#provenance-close{position:absolute;top:4px;right:4px;padding:4px 8px;color:#d6c58d;font-size:14px}

/* ── LEGEND / TOAST ──────────────────────── */
#legend{position:relative;z-index:15;background:rgba(14,18,19,.94);
  border:1px solid var(--line);border-radius:12px;font-size:11px;max-width:220px;
  overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.45);align-self:flex-start}
#legend-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;
  background:none;border:0;color:var(--txt);font-size:10.5px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;cursor:pointer;text-align:left}
.legend-title{flex:1}
.legend-chev{opacity:.7;font-size:12px;transition:transform .18s}
#legend[data-open="true"] .legend-chev{transform:rotate(180deg)}
#legend-body{padding:2px 11px 9px;max-height:46vh;overflow-y:auto}
#legend[data-open="false"] #legend-body{display:none}
.legend-group{margin-top:6px}
.legend-group-title{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--dim);padding:5px 0 3px}
.legend-item{display:flex;align-items:center;gap:7px;padding:2.5px 0;color:var(--txt)}
.legend-item i{width:11px;height:11px;border-radius:3px;display:block;flex:none;
  border:1px solid rgba(255,255,255,.22)}
.legend-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-note{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);
  font-size:9.5px;color:var(--dim);letter-spacing:.2px}
#toast{position:absolute;bottom:calc(120px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);z-index:60;
  background:rgba(20,26,28,.97);border:1px solid var(--line);border-radius:10px;
  padding:9px 15px;font-size:12.5px;white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.me-dot{width:18px;height:18px;border-radius:50%;background:#4ade80;border:3px solid #fff;
  box-shadow:0 0 0 6px rgba(74,222,128,.25)}

/* ── SET LOCATION: search field, results, hand-dropped pin ── */
.field{display:flex;gap:8px;padding:12px 16px 4px}
.field input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--line);font-size:13px;color:var(--txt);font-family:inherit}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:none;border-color:var(--green)}
.results{padding:6px 10px 2px}
.result{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;
  border-radius:10px;margin-bottom:5px;background:var(--panel2);border:1px solid var(--line);
  font-size:12.5px;color:var(--txt);font-family:inherit}
.result:active{border-color:var(--green)}
.r-kind{font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:#7dd3fc;flex:none;width:48px}
.r-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-dist{font-size:11px;color:var(--dim);flex:none}
#pin-card{position:relative;z-index:31;
  background:var(--panel);border:1px solid #38bdf8;border-radius:16px;
  padding:12px 13px;box-shadow:0 10px 40px rgba(0,0,0,.65);
  /* The sheet can sit over a pin dropped at the map centre; let presses fall
     through to the marker so it stays draggable, while its controls stay live. */
  pointer-events:none}
#pin-card button,#pin-card input{pointer-events:auto}
#pin-close{position:absolute;top:9px;right:11px;color:var(--dim);font-size:15px}
.pin-civic{margin-top:7px;font-size:11px;color:#fcd34d}
.pin-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pin-acts .mini-btn{min-height:32px;padding:5px 9px}
.pin-wrap{position:relative;width:24px;height:24px;display:grid;place-items:center;cursor:grab}
.pin-mark{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--pin-color,#38bdf8);border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.pin-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;
  padding:1px 6px;border-radius:8px;background:rgba(8,10,9,.92);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
  border:1px solid var(--line);pointer-events:none}
.pin-label-row{margin-top:8px}
.pin-label-input{width:100%;padding:8px 11px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--line);font-size:13px;color:var(--txt);font-family:inherit}
.pin-label-input::placeholder{color:var(--dim)}
.pin-label-input:focus{outline:none;border-color:#38bdf8}
/* Thirteen types. Five across keeps the whole grid on screen in three rows even
   on a 390px phone, so the sheet stays clear of the map centre — a taller grid
   swallowed the pin you had just dropped and made it undraggable. */
.pin-types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:9px}
.pin-type{min-width:0;min-height:46px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--pin-color,#38bdf8);
  transition:transform .12s,border-color .12s,background .12s,box-shadow .12s}
.pin-type .ico-way{width:19px;height:19px}
.pin-type-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);font-size:8.5px;line-height:1.15;font-weight:700;text-align:center}
.pin-type.on{background:color-mix(in srgb,var(--pin-color,#38bdf8) 20%,var(--panel2));border-color:var(--pin-color,#38bdf8);box-shadow:0 0 0 2px color-mix(in srgb,var(--pin-color,#38bdf8) 30%,transparent);transform:translateY(-1px)}
.pin-type:active{transform:scale(.97)}
.pin-ico{display:grid;place-items:center;width:100%;height:100%;transform:rotate(45deg)}
.pin-ico .ico-way{width:13px;height:13px;transform:rotate(-45deg);color:#fff}
.pin-mark-stand,.pin-mark-blind,.pin-mark-trail,.pin-mark-tracks,.pin-mark-scrape,.pin-mark-bedding,.pin-mark-water,.pin-mark-food,.pin-mark-camera,.pin-mark-camp,.pin-mark-parking,.pin-mark-kill,.pin-mark-hazard{background:var(--pin-color,#38bdf8)}
.pin-mark .pin-ico{color:var(--pin-color,#38bdf8)}

/* ── PINS PANEL ──────────────────────────── */
.pins-head{display:flex;align-items:center;gap:8px;padding:12px 16px 6px;
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.pins-filter{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:0 16px 8px;scrollbar-width:none}
.pins-filter::-webkit-scrollbar{display:none}
.pin-filter{flex:none;min-height:32px;padding:5px 9px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--dim);font-size:10.5px;font-weight:700;white-space:nowrap}
.pin-filter b{margin-left:3px;color:var(--txt);font-size:10px}
.pin-filter.on{background:var(--green-d);border-color:var(--green);color:var(--txt)}
#pins-count{font-size:10px;font-weight:800;color:var(--green);border:1px solid var(--green);
  border-radius:20px;padding:1px 7px}
#pins-list{padding:0 10px 4px}
.pin-line{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.pin-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;
  border-radius:10px;margin-bottom:5px;background:var(--panel2);border:1px solid var(--line);
  font-size:12.5px;color:var(--txt);font-family:inherit}
.pin-row:active{border-color:var(--green)}
.pin-type-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:var(--pin-color,#38bdf8);border:1px solid rgba(255,255,255,.35)}
.pin-type-ico .ico-way{width:18px;height:18px}
.pin-row-type{font-size:10px;color:var(--pin-color,#38bdf8);flex:none;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-dot{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.3)}
.pin-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pin-row-coords{font-size:10.5px;color:var(--dim);flex:none}
.legend-ico{width:18px !important;height:18px !important;border-radius:50% !important;display:grid !important;place-items:center;background:var(--pin-color,#38bdf8);border:1px solid rgba(255,255,255,.35) !important}
.legend-ico .ico-way{width:12px;height:12px;color:#fff}

/* ── TRACK PANEL ─────────────────────────── */
.track-stats{display:flex;gap:8px;padding:12px 16px}
.track-stat{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:9px 6px;text-align:center}
.track-stat b{display:block;font-size:13px;font-weight:700;color:var(--txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.track-stat span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--dim);margin-top:3px}
.tracks-head{display:flex;align-items:center;gap:8px;padding:12px 16px 6px;
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
#tracks-count{font-size:10px;font-weight:800;color:var(--green);border:1px solid var(--green);
  border-radius:20px;padding:1px 7px}
#tracks-list{padding:0 10px 4px}
.track-line{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.track-row{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;padding:10px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--line);
  font-size:12.5px;color:var(--txt);font-family:inherit}
.track-row:active{border-color:var(--green)}
.track-dot{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.3)}
.track-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.track-row-meta{font-size:10.5px;color:var(--dim);flex:none}
.track-line .mini-btn{padding:7px 9px}
.mini-btn.recording{background:var(--red);border-color:var(--red);color:#2a0808}
.track-mark{width:22px;height:22px;border-radius:50%;background:#2fd3c4;color:#04211f;
  display:grid;place-items:center;font-size:11px;font-weight:800;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.6)}
.track-mark.end{background:var(--orange);color:#2a1405;border-radius:5px}

/* ── PWA: connection chip, offline bar, small buttons ── */
.net-chip{font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--green);border:1px solid var(--green);border-radius:20px;padding:2px 7px;
  margin-left:2px;flex:none;opacity:.9}
.mini-btn{padding:7px 13px;border-radius:9px;background:var(--green-d);border:1px solid var(--green);
  font-size:11.5px;font-weight:700;flex:none;color:var(--txt)}
.mini-btn:active{background:var(--green);color:#08210f}
#offline-bar{background:rgba(16,22,18,.97);border:1px solid var(--green-d);border-radius:13px;
  padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.ob-row{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600}
.ob-ico{color:var(--green);font-weight:900}
#ob-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ob-cancel{color:var(--dim);font-size:14px;padding:2px 4px}
.ob-track{height:4px;border-radius:3px;background:#22292b;margin-top:8px;overflow:hidden}
.ob-fill{height:100%;width:0;background:var(--green);transition:width .25s ease}

/* ── PWA: radius offline chooser (non-modal — map stays usable) ── */
#save-radius{width:min(92vw,340px);background:rgba(16,22,18,.98);border:1px solid var(--green-d);
  border-radius:13px;padding:12px 13px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.sr-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.3px}
#sr-close{color:var(--dim);font-size:14px;padding:4px 8px;border-radius:8px}
#sr-close:active{background:var(--panel2)}
.sr-note{font-size:11px;color:var(--dim);margin:7px 0 9px;line-height:1.35}
.sr-radii{display:flex;gap:6px}
.sr-radii button{flex:1;padding:8px 4px;border-radius:9px;background:#161c18;
  border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--txt)}
.sr-radii button.on{background:var(--green-d);border-color:var(--green)}
.sr-est{font-size:12px;font-weight:700;margin:10px 0 0;color:var(--green)}
.sr-warn{font-size:11px;color:var(--amber);margin-top:4px;line-height:1.3}
#save-go{width:100%;margin-top:11px;justify-content:center}

/* ── MOBILE ──────────────────────────────── */
@media (max-width:640px),(pointer:coarse){
  html,body{overscroll-behavior:none}
  .icon-btn{width:44px;height:44px}
  .menu-item,.mini-btn,.result,.seg button,.row,.pin-row,.track-row,.pin-type,#legend-toggle,
  .field input,#panel-close,#ident-close,#pin-close,#ob-cancel,
  #save-radius .sr-radii button,#save-go,#sr-close{min-height:44px}
  #save-radius{width:94vw}
  .mini-btn,.field input{display:flex;align-items:center}
  .pin-type{min-height:44px}
  #chrome-top{padding:calc(6px + env(safe-area-inset-top)) 8px 0;gap:4px}
  #topbar{gap:6px}
  .brand-mark{width:18px;height:18px}
  .brand-txt{font-size:13px;letter-spacing:1px}
  .unit-name{font-size:12.5px}
  #unit-pill{min-height:26px}
  #provenance-toggle{min-height:32px}
  #menu{width:min(86vw,300px);padding-top:env(safe-area-inset-top)}
  .menu-item{min-height:48px}
  #panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:70vh;border-left:0;
    border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.6)}
  .panel-body{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  #chrome-bottom{gap:5px;padding:0 8px calc(8px + env(safe-area-inset-bottom))}
  #legend{max-width:min(78vw,240px)}
  #toast{bottom:calc(120px + env(safe-area-inset-bottom));max-width:92vw;white-space:normal}
}

/* ── DESKTOP EXPERIENCE ─────────────────────────────────────
   Fine-pointer desktops only. The mobile query above is deliberately untouched. */
@media (min-width:900px) and (pointer:fine){
  html.is-desktop #desk-rail[hidden],html.is-desktop #desk-search[hidden]{display:flex !important}
  /* The map only gives up the right-hand column while a panel is actually open
     — `#panel:not(.hidden)`. The first cut reserved 360px unconditionally, so a
     1440px screen shrank the map to 1080px and left a permanent 360px black
     dead zone beside it (`deadZonePx: 360`, panel hidden). :not() keeps this
     out of JS entirely: the panel's own class drives the layout. */
  html.is-desktop #map{inset:0 0 0 232px;transition:right .22s ease}
  html.is-desktop:has(#panel:not(.hidden)) #map{right:360px}
  html.is-desktop #chrome-top{left:260px;right:24px;padding:12px 16px 0;gap:8px}
  html.is-desktop:has(#panel:not(.hidden)) #chrome-top{right:384px}
  html.is-desktop #topbar{height:46px}
  html.is-desktop #btn-menu{display:none}
  /* The top bar is the product's command strip: brand, network state, find-a-
     place, locate. The search used to be a SEPARATE absolutely-positioned bar at
     a hardcoded `left:calc(260px + 250px)`, which is what made the header read as
     broken — it left a ~250px hole between the brand and the field, and at
     anything under 1116px it ran straight over #btn-locate (the field's right
     edge passed the button's centre, so the button was unclickable while still
     painting on its own layer). Measured: `#btn-locate` centre [1125,35] covered
     by `#desk-search-input` at 1280, 1440 AND 1920.
     In the top bar it is a flex item like everything else: no magic offsets, no
     gap, and it cannot collide with a sibling. */
  html.is-desktop #topbar{display:flex;align-items:center;gap:10px}
  /* The brand must NOT grow on desktop. It is flex:1 in the base (phone) rules
     because it is the only thing between the hamburger and the locate button
     there — but on desktop a growing brand absorbs all the slack into its own
     dark pill: measured 456px wide for ~180px of text, i.e. ~275px of empty
     background sitting between the logo and the search field. That empty band is
     the "hole in the header" that made it read as broken. Hug the content
     instead and let the leftover width go to the search field, which is the one
     element that actually benefits from being wide.
     `order` also has to be stated: the base rules put the brand at flex:1 to
     fill the row, and with the field now INSIDE this bar the DOM order
     (brand → search → locate) is what puts "Find a place" between the logo and
     the locate button. */
  html.is-desktop .brand{flex:0 0 auto;background:rgba(8,10,9,.86);padding:8px 12px}
  html.is-desktop .brand-txt{font-size:16px;letter-spacing:1.6px}
  html.is-desktop #btn-locate{order:3;margin-left:2px}
  html.is-desktop #verdict{align-self:flex-start;width:min(440px,100%);padding:10px 13px}
  html.is-desktop #unit-pill{flex:none;width:330px}
  html.is-desktop .unit-name{font-size:14px}
  html.is-desktop .v-title,html.is-desktop .v-civic{font-size:13px}
  html.is-desktop .v-sub{font-size:13px}
  html.is-desktop #shooting-light{font-size:13px;max-width:440px}
  html.is-desktop .sl-times,html.is-desktop .sl-countdown{font-size:12px}
  html.is-desktop #panel{top:0;right:0;bottom:0;width:360px;height:auto;border-radius:0}
  html.is-desktop #desk-rail{position:absolute;inset:0 auto 0 0;width:232px;z-index:35;flex-direction:column;gap:4px;padding:18px 12px;background:rgba(14,18,19,.97);border-right:1px solid var(--line);box-shadow:8px 0 28px #0008}
  html.is-desktop .desk-rail-title{padding:7px 10px 12px;color:var(--dim);font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
  html.is-desktop .desk-tool{min-height:44px;padding:0 12px;font-size:14px;gap:12px;border-radius:9px}
  html.is-desktop .desk-tool:hover{background:var(--panel2);color:var(--green)}
  html.is-desktop .desk-tool.on{background:rgba(22,101,52,.35)}
  html.is-desktop #desk-search{position:relative;top:auto;left:auto;right:auto;flex:1;min-width:0;z-index:auto;display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(20,26,28,.96);border:1px solid var(--line);border-radius:10px;box-shadow:0 5px 18px #0008}
  html.is-desktop #desk-search label{font-size:12px;color:var(--dim);white-space:nowrap}
  html.is-desktop #desk-search-input{flex:1;min-width:0;padding:7px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--txt);font:inherit;cursor:text}
  html.is-desktop #desk-search button{padding:7px 12px;border:1px solid var(--green);border-radius:7px;background:var(--green-d);font-size:12px;font-weight:700}
  /* The suggestions drop from the field, so anchor them to the field's own box
     rather than the old hardcoded `left:84px` (which was an offset into the bar
     that no longer exists). */
  html.is-desktop #desk-search-results{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0009;z-index:50}
  html.is-desktop .desk-result{display:block;width:100%;padding:8px 10px;text-align:left;font-size:13px}
  html.is-desktop .desk-result:hover{background:var(--panel2)}
  html.is-desktop .desk-no-result{display:block;padding:8px;color:var(--dim);font-size:12px}
  /* z 38 on desktop, above the rail (35) and below the panel (40).
     #chrome-bottom is position:absolute with z-index:30, so it is a stacking
     context: the notice's own z-index:37 was trapped inside it and could never
     beat #desk-rail. The rail covers x 0..232, and the notice sits at left:12px
     width:208px — i.e. entirely inside it — so raising the notice alone does
     nothing and both its toggle and dismiss button were dead controls at 1280,
     1440 and 1920 (elementFromPoint: `#provenance-toggle` covered by
     `#desk-rail`). Raising the container puts the whole column above the rail.
     The legend rides along, but it lives in the map column and the panel is 40,
     so nothing changes for it. Mobile keeps z 30 — this rule is desktop-only. */
  html.is-desktop #chrome-bottom{left:260px;right:auto;bottom:16px;padding:0;gap:8px;z-index:38}
  html.is-desktop #legend{display:block !important;max-width:320px;font-size:13px}
  html.is-desktop #legend-toggle{font-size:13px;padding:10px 13px}
  html.is-desktop .legend-group-title{font-size:11px}
  html.is-desktop .legend-note{font-size:11px}
  html.is-desktop #provenance-notice{position:fixed;left:12px;bottom:16px;width:208px;max-width:208px;z-index:37}
  html.is-desktop :is(button,[role="button"]):hover{filter:brightness(1.18)}
  html.is-desktop :is(button,[role="button"]):focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  html.is-desktop :is(button,[role="button"]){cursor:pointer}
}

/* ── MENU FOOTER (running build stamp) ────── */
.menu-foot{padding:10px 14px 14px;color:var(--dim);font-size:11px;letter-spacing:.3px}