/* ============================================================================
   SparrowMap — shell.css
   A from-scratch UI shell built in the Sparrow Send visual language: deep-black
   lit page, frosted "black-glass" chrome floating over the vector map, one blue
   accent, compact and phone-first. This REPLACES style.css (it is not a patch).
   The map fills the screen; every control is glass; explanations hide behind a ?.
   ========================================================================== */
*{box-sizing:border-box}
:root{
  --ink:#eef4fc; --muted:#8ea2b8; --accent:#2b86e0; --accent2:#48b0f5;
  --glass:rgba(8,11,18,0.58); --glass2:rgba(11,15,24,0.72);
  --strip:rgba(5,8,14,0.62);
  --line:rgba(120,170,235,0.12); --line2:rgba(120,170,235,0.20);
  --bg:#04060a;
  --police:#ff5a5a; --civilian:#6ea8ff; --cam:#54d0c4; --gov:#ffb454;
  --headh:52px; --barh:56px;
}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);overflow:hidden;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 680px at 10% -14%, rgba(27,116,209,.30), transparent 58%),
    radial-gradient(1000px 760px at 114% 14%, rgba(20,84,158,.26), transparent 56%),
    radial-gradient(900px 900px at 50% 126%, rgba(14,44,92,.30), transparent 56%)}
b{font-weight:700}
button{font-family:inherit}

/* ---------------- header: a frosted glass strip -------------------------- */
.bar{position:fixed;top:0;left:0;right:0;height:var(--headh);z-index:1200;
  display:flex;align-items:center;gap:10px;padding:0 12px;flex-wrap:nowrap!important;overflow:hidden;
  /* near-opaque, NOT frosted glass: the page's blue radial glow was bleeding
     through the translucent header and haloing behind the SPARROWMAP wordmark.
     A solid dark strip keeps the header clean. */
  background:#070a10;
  border-bottom:1px solid var(--line)}
.bar>.brand{flex:none} .bar>.stats{flex:0 1 auto;min-width:0}
/* sitenav adopts What's new / Sign in / gear / bug into .swbar. It is now a
   DROPDOWN opened by the ☰ header button (#hmenu), collapsed by default - so the
   header never stacks onto a second row on a phone. position:fixed to escape the
   header's overflow:hidden; anchored top-right just under the menu button. */
.swbar{position:fixed!important;top:calc(var(--headh) + 4px);right:10px;z-index:1300;
  display:none!important;flex-direction:column!important;align-items:stretch;gap:5px!important;
  width:auto!important;min-width:190px;max-width:calc(100vw - 20px);order:0!important;padding:7px!important;
  background:var(--glass2);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.swbar.open{display:flex!important}
.swbar>*{white-space:nowrap;width:100%!important;justify-content:center!important;text-align:center}
/* every item is a full-width CENTERED menu row (sitenav sizes Sign in to its
   text and the bug button to a 39px icon; normalise + centre them here) */
.swbar .swtools{width:100%!important;justify-content:center!important;gap:8px}
.swbar .swtools>*{flex:1 1 auto;justify-content:center!important;text-align:center}
.swbar .swbug{width:100%!important;justify-content:center!important;gap:8px;font-size:13px}
/* the bug button is icon-only in the header; label it in the menu */
.swbar .swbug::after{content:"Report a problem";font:600 13px system-ui;color:var(--ink)}
/* the ☰ button that opens the menu */
/* margin-left:auto PINS it to the right edge, so the live "N passing" count
   changing width never nudges it */
.hmenu{flex:0 0 auto;margin-left:auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hmenu:hover{border-color:var(--line2);background:rgba(255,255,255,.08)}
.hmenu[aria-expanded="true"]{border-color:var(--line2);background:rgba(43,134,224,.14);color:var(--accent)}
/* style the actual buttons/links only — NOT the .swtools wrapper (that gave the
   Sign in button a second box around it). The wrapper stays chromeless. */
.swtools{display:inline-flex;align-items:center;gap:8px;border:0!important;background:none!important;padding:0!important}
.swbar button,.swbar a,.swtools button,.swtools a{border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink);border-radius:11px;padding:7px 11px;font:600 13px system-ui;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.swbar button:hover,.swbar a:hover,.swtools button:hover,.swtools a:hover{border-color:var(--line2);background:rgba(255,255,255,.08)}
.swbar .gear,.swbar [title*="ettings"],.swbar button.icon{width:38px;height:38px;justify-content:center;padding:0}
/* report-bug button (sitenav .swbug) came in taller (44px) than the rest — pin
   it to the same height as the other header buttons */
.swbug{height:34px!important;min-height:0!important;width:auto!important;padding:6px 10px!important;
  align-self:center;line-height:1;
  /* never let it fall back to sitenav's position:fixed (no offsets) and float
     over the brand icon: keep it in the .swbar flow it is adopted into */
  position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .mark{width:26px;height:26px;border-radius:7px;flex:none}
.brand b{font-weight:750;letter-spacing:.3px;font-size:15px;white-space:nowrap}
.brand .tag{display:none}
/* the running counters (cameras online / hours watched / passes 24h ...) are
   removed from the header per his call - they crowd the wordmark and are not
   what people came to the map for. */
.stats,#stats{display:none!important}
.grow{flex:1}
nav{display:flex;align-items:center;gap:8px}
/* flex:none + nowrap so the pill never shrinks and "796 passing" never wraps to
   two lines; the whole header is flex-wrap:nowrap so nothing stacks onto a 2nd row */
.live{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;flex:none;
  white-space:nowrap;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:11px;padding:6px 10px}
.live>*{white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(43,134,224,.6)}
.live.off i{background:#ff6b6b;box-shadow:0 0 8px rgba(255,90,90,.6)}
.livecount{color:var(--accent);font-weight:700}

/* icon + pill buttons (Send) */
.iconbtn{position:relative;width:38px;height:38px;flex:none;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--line2);background:rgba(255,255,255,.08)}
.pill,.platebtn,.newsbtn,.addcam{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  border-radius:11px;padding:7px 11px;font:600 13px system-ui;cursor:pointer;text-decoration:none}
.pill:hover,.platebtn:hover,.newsbtn:hover,.addcam:hover{border-color:var(--line2);background:rgba(255,255,255,.08)}
.addcam{background:rgba(43,134,224,.12);color:var(--accent);border-color:rgba(43,134,224,.35);font-weight:700}
.newsdot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(43,134,224,.6);display:none}
.newsdot.on{display:inline-block}
.btn{width:100%;border:1px solid var(--line2);background:rgba(43,134,224,.12);color:var(--accent);
  border-radius:11px;padding:10px;font:700 14px system-ui;cursor:pointer;margin-top:9px}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--ink);font-weight:600}
.btn.ghost.danger{color:#ff9a9a;border-color:rgba(255,120,120,.35);background:rgba(255,80,80,.08)}
input,select,textarea{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:10px 11px;font:inherit;font-size:16px}
select{appearance:none;-webkit-appearance:none}

/* ---------------- the map fills everything below the header -------------- */
main{position:fixed;inset:var(--headh) 0 var(--barh) 0;z-index:1;display:flex}
/* the map area uses the basemap's own dark GRAY (matches the vector tiles and
   the original Carto dark map), so loading/edges don't flash the navy page bg */
#map{flex:1;height:100%;background:#26282b}
.leaflet-container{background:#26282b!important;font:inherit}
.leaflet-control-attribution{background:rgba(4,6,10,.6)!important;color:var(--muted)!important;
  border-radius:8px 0 0 0;font-size:10px}
.leaflet-control-attribution a{color:var(--accent)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--glass2)!important;color:var(--ink)!important;
  backdrop-filter:blur(20px);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.55)}

/* ---------------- sightings side panel: glass over the map --------------- */
/* overflow VISIBLE (not hidden): the View/Layers popovers open as absolute
   children inside the panel, and the panel's own backdrop-filter makes it a
   containing block - overflow:hidden was clipping the popovers off. The list
   does its own scrolling (.list overflow-y:auto), so the panel need not clip. */
.panel{width:344px;flex:none;height:100%;display:flex;flex-direction:column;overflow:visible;
  background:var(--glass2);backdrop-filter:blur(26px) saturate(1.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);border-left:1px solid var(--line)}
/* control row */
.win{display:flex;gap:7px;padding:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
.win select,.viewbtn{flex:1;min-width:96px}
/* the "everything" window dropdown, themed like the pills (native select was light) */
.win #window,#window{border:1px solid var(--line)!important;background:rgba(255,255,255,.04)!important;color:var(--ink)!important;
  border-radius:10px!important;padding:7px 26px!important;font:600 13px system-ui!important;min-height:34px;cursor:pointer;
  text-align:center;text-align-last:center;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.win #window:hover{border-color:var(--line2)!important;background-color:rgba(255,255,255,.08)!important}
#window option{background:#0b1018;color:var(--ink);text-align:center}
.viewbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  border-radius:10px;padding:7px 10px;font:600 13px system-ui;cursor:pointer;min-height:34px}
.viewbtn:hover{border-color:var(--line2);background:rgba(255,255,255,.08)}
.viewbtn b{color:var(--accent)} .viewbtn .car{color:var(--muted);font-size:11px}
.viewpick,.layerpick{position:relative;flex:1;min-width:96px;display:flex}
/* the View / Layers popovers = glass panels rising on open */
.filters,.layers{position:absolute;top:44px;left:0;z-index:30;min-width:150px;max-width:calc(100vw - 24px);
  background:var(--glass2);backdrop-filter:blur(26px) saturate(1.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);padding:6px;display:flex;flex-direction:column;gap:1px;
  animation:pop .14s ease}
/* Layers needs the wider box (long labels); the View menu stays narrow (150px)
   so it does not run off the right edge from its mid-row button. Both open
   right-anchored so they never overflow the panel. */
.layerpick .layers{left:auto;right:0;min-width:224px}
.viewpick .filters{left:auto;right:0}
.filters[hidden],.layers[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* View options styled as menu ROWS like the Layers list (his call): no pill
   border, full width, same padding/size as .cams, selected row tinted accent. */
.chip{display:block;width:100%;border:0;background:none;color:var(--ink);
  border-radius:9px;font:600 12.5px system-ui;padding:5px 8px;cursor:pointer;text-align:left;line-height:1.25}
.chip:hover{background:rgba(255,255,255,.045)}
.chip.on{background:rgba(43,134,224,.16);color:var(--accent)}
.cams{display:flex;align-items:center;gap:8px;border-radius:9px;padding:5px 8px;font-size:12.5px;line-height:1.25;cursor:pointer}
.cams:hover{background:rgba(255,255,255,.045)}
.cams input[type=checkbox]{width:auto;accent-color:var(--accent);margin:0}

/* trafficbar now holds the Search-plates button (moved out of the header) with
   the live traffic status as a small line beneath it */
.trafficbar{margin:8px 10px 0;padding:0;border:0;background:none;display:flex;flex-direction:column;gap:6px}
.trafficbar .platebtn{width:100%;justify-content:center}
.trafficbar #traffic{color:var(--muted);font-size:11.5px;padding-left:3px}
.trafficbar #traffic.busy{color:var(--accent)}
.windowhint{margin:8px 10px 0;color:var(--muted);font-size:12px}

/* detail card (built by app.js). shell.css originally styled ONLY the card
   frame - the inner structure app.js builds (.shotwrap / .kv / .plate / .why /
   .lightbox) had NO rules, so the photo sat in an unstyled padded box (the
   "brown" box) and the label/value pairs ran together as one line
   ("classPolice vehicle · — classifiedpolice seen..."). These port that
   structure into the Send palette. */
/* 🚨 the card SCROLLS INTERNALLY (max-height + overflow) - without this a tall
   sighting (photo + kv + two why notes + action buttons) runs past the bottom
   of the panel with no way to reach Back/Show trail. On mobile the whole page
   scrolls instead, so the cap is lifted there (see the media query). */
.detail{margin:8px 10px 0;padding:11px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03);font-size:13px;
  max-height:62%;overflow-y:auto;overscroll-behavior:contain}
.detail.hidden,.hidden{display:none}
/* 🚨 the sighting detail is a CENTERED popup over a scrim (reparented to <body>
   so a backdrop-filtered sidebar can't trap it). The sidebar stays the list;
   clicking a sighting opens the card in the middle of the screen and the list
   keeps its place. Back or a tap on the scrim closes it. Same on phone. */
.detailbg{position:fixed;inset:0;z-index:9550;background:rgba(2,4,8,.6);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.detailbg[hidden]{display:none}
#detail:not(.hidden){position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:9600;width:min(440px,calc(100vw - 24px));max-height:84vh;overflow-y:auto;
  margin:0;padding:14px;background:var(--glass2);
  -webkit-backdrop-filter:blur(34px) saturate(1.6);backdrop-filter:blur(34px) saturate(1.6);
  border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(43,134,224,.08),inset 0 1px 0 rgba(120,170,235,.12)}

/* the ⤢ button on each list row opens the full card; tapping the row itself
   just snaps the map + drops the bubble */
.li-detail{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-left:2px}
.li-detail:hover{border-color:var(--line2);background:rgba(43,134,224,.14);color:var(--accent)}

/* thumbnail BUBBLE on the map (a Leaflet popup) - tap it to open the full card */
.sight-bubble .leaflet-popup-content-wrapper{background:var(--glass2)!important;color:var(--ink)!important;
  border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:0;overflow:hidden}
.sight-bubble .leaflet-popup-content{margin:0!important;width:auto!important;line-height:1}
.sight-bubble .leaflet-popup-tip{background:var(--glass2)!important;border:1px solid var(--line2)}
.sight-bubble .leaflet-popup-close-button{color:var(--muted)!important;font-size:18px!important;
  padding:6px 8px 0 0!important}
.sight-bubble .leaflet-popup-close-button:hover{color:var(--ink)!important}
.bubble{display:flex;flex-direction:column;width:200px;cursor:pointer}
.bubble .bub-img{display:block;width:100%;height:120px;overflow:hidden;background:#04060a}
/* 🚨 ZOOM the crop (scale) so the navy masked border the isolator paints around
   the vehicle is cropped out - the bubble shows the vehicle, not the frame. */
.bubble .bub-img img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.55);transform-origin:center}
.bubble .bub-cap{padding:8px 10px;font:600 12.5px system-ui;color:var(--ink);line-height:1.3}
.bubble .bub-cap em{display:block;font:500 11px system-ui;color:var(--accent);font-style:normal;margin-top:2px}
.bubble:hover .bub-cap{background:rgba(255,255,255,.03)}

/* the sighting PHOTO fills the card width over a dark frame - an un-stretched
   199px crop was leaving the card background showing around it, which read as
   an ugly brown box. */
.shotwrap{position:relative;margin-top:8px}
.detail img,#snapImg{width:100%;display:block;border-radius:10px;border:1px solid var(--line2);
  background:#04060a;margin:0}
/* "View larger" pill sits ON the photo. SCOPED to .shotwrap on purpose: a bare
   .viewbtn is the View/Layers dropdown trigger and must NOT become absolute. */
.shotwrap .viewbtn{position:absolute;right:8px;bottom:8px;flex:none;min-height:0;
  width:auto;padding:6px 10px;font:600 12px system-ui;border-radius:9px;
  background:rgba(4,7,12,.72);border:1px solid var(--line2);color:var(--ink);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}
.shotwrap .viewbtn:hover{background:rgba(20,30,46,.9)}

/* plate readout */
.detail .plate{font:700 21px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.09em;
  margin:10px 0 3px;color:var(--ink)}
.detail .plate.priv{color:var(--muted);font-size:14px;letter-spacing:.04em;font-weight:500}

/* 🚨 the label/value GRID - this is what stops the run-on text. */
.kv{display:grid;grid-template-columns:84px 1fr;gap:3px 8px;font-size:11.5px;margin-top:8px}
.kv span{color:var(--muted)}
.kv b{font-weight:600;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--ink)}
.kv b .sub{color:var(--muted);font-weight:400;font-family:inherit}

/* "why this class" note */
.why{margin-top:9px;padding:7px 9px;border-radius:8px;font-size:11.5px;line-height:1.45;
  background:rgba(255,255,255,.03);border-left:2px solid var(--accent);color:var(--muted)}
.why b{color:var(--ink);font-weight:600}

/* enlarge lightbox (⤢ View) */
.lightbox{position:fixed;inset:0;z-index:9600;background:rgba(2,4,8,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.lightbox img{width:min(96vw,720px);height:auto;max-height:78vh;border-radius:10px;
  border:1px solid var(--line2);background:#04060a}
.lbcap{color:var(--muted);font-size:13px;text-align:center}
.lbclose{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(20,28,42,.9);color:var(--ink);font-size:17px;cursor:pointer}

/* the "add to home screen" prompt (install.js) is hidden on the map shell. */
.instwrap,.insthow{display:none!important}

/* list head + the sightings list */
.listhead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 6px;
  color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.listhead .ghost{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);
  border-radius:9px;padding:5px 9px;font:600 11px system-ui;cursor:pointer;text-transform:none;letter-spacing:0}
.list{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0 6px 8px}
.list li{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:12px;cursor:pointer;position:relative}
.list li:hover{background:rgba(255,255,255,.045)} .list li:active{background:rgba(255,255,255,.08)}
.list li.sel{background:rgba(43,134,224,.12);box-shadow:inset 3px 0 0 var(--accent)}
.list li .sw{width:4px;height:34px;border-radius:3px;flex:none}
.list li .thumb{width:62px;height:44px;flex:none;border-radius:9px;object-fit:cover;
  background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--line)}
.list li .who{flex:1;min-width:0}
.list li .who b{display:block;font-weight:650;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list li .who span{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.list li .when{color:var(--muted);font-size:11.5px;flex:none}
.list li.note{display:block;color:var(--muted);font-size:12px;line-height:1.5;cursor:default;padding:12px 10px}
.list .priv{color:var(--muted)}

/* ---------------- popups: glass card (desktop) / bottom sheet (mobile) --- */
.pmodal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:18px}
.pmodal[hidden]{display:none}
.pmodal-bg{position:absolute;inset:0;background:rgba(2,4,8,.62);backdrop-filter:blur(3px)}
.pmodal-card{position:relative;width:100%;max-width:440px;max-height:86vh;overflow:auto;
  background:var(--glass2);backdrop-filter:blur(34px) saturate(1.6);-webkit-backdrop-filter:blur(34px) saturate(1.6);
  border:1px solid var(--line2);border-radius:22px;padding:16px;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(43,134,224,.08),inset 0 1px 0 rgba(120,170,235,.12)}
.pmodal-card h2,.pmodal-card h3{margin:0 0 8px;color:var(--ink)}
.pmodal-hint{color:var(--muted);font-size:12px;margin-top:8px}
/* always-visible close, so the modal is dismissible even when it is tall enough
   to leave no backdrop to tap (the whole-screen phone case) */
.pmodal-x{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(255,255,255,.06);color:var(--ink);font-size:14px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pmodal-x:hover{background:rgba(255,255,255,.12)}
.newshead{color:var(--ink);font-weight:750;margin-bottom:10px;font-size:16px}
.newsitem{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  background:rgba(255,255,255,.03);border-radius:12px;padding:11px 12px;margin-bottom:8px}
.newsitem:hover{border-color:var(--line2);background:rgba(255,255,255,.05)}
.newsitem b{display:block;margin-bottom:3px}
.newsitem span{color:var(--muted);font-size:12.5px;line-height:1.45}
.newsbeta{display:inline-block;font-size:10px;color:var(--accent);background:rgba(43,134,224,.16);
  border-radius:6px;padding:0 6px;margin-left:6px;vertical-align:middle}
.plateform{display:flex;gap:8px}
.plateform input{flex:1}
.plateform button{flex:none;width:auto;background:rgba(43,134,224,.14);color:var(--accent);
  border:1px solid var(--line2);border-radius:11px;padding:0 16px;font:700 14px system-ui;cursor:pointer}
.plateresults{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--headh) + 8px);z-index:9400;
  width:min(440px,calc(100vw - 24px));max-height:60vh;overflow:auto;
  background:var(--glass2);backdrop-filter:blur(26px);border:1px solid var(--line2);border-radius:14px;padding:8px}
.plateresults .hit{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer}
.plateresults .hit:hover{background:rgba(255,255,255,.05)}
.plateresults .hit img{width:74px;height:48px;object-fit:cover;border-radius:8px;flex:none}

/* collapsible "?" help */
.qbtn{margin-left:auto;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(255,255,255,.04);color:var(--muted);font:700 11px system-ui;line-height:1;padding:0;cursor:pointer}
.qbtn:hover,.qbtn.on{color:var(--accent);border-color:rgba(43,134,224,.45);background:rgba(43,134,224,.12)}
.hint{display:none} .hint.show{display:block}

/* legend: a small glass chip, bottom-left over the map */
.legend{position:fixed;left:12px;bottom:calc(var(--barh) + 10px);z-index:400;
  display:flex;flex-direction:column;gap:4px;background:var(--glass);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;font-size:11px;color:var(--muted);max-width:60vw}
.legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.legend .dot{width:9px;height:9px;border-radius:50%;flex:none}
.legend .dash{width:14px;height:0;border-top:2px dashed var(--accent);flex:none}
.dot.police{background:var(--police)} .dot.civilian{background:var(--civilian)} .dot.cam{background:var(--cam)}

.policybar{position:fixed;top:calc(var(--headh) + 6px);left:50%;transform:translateX(-50%);z-index:900;
  background:rgba(245,158,11,.14);color:#f6c96b;border:1px solid rgba(245,158,11,.35);
  border-radius:11px;padding:7px 12px;font-size:12.5px;max-width:calc(100vw - 24px)}

/* About/Transparency panes over the map */
.pane{position:fixed;inset:var(--headh) 0 var(--barh) 0;z-index:1100;overflow:auto;
  background:var(--bg);padding:20px}
.pane[hidden]{display:none}
.paneinner{max-width:720px;margin:0 auto;color:var(--ink)}

/* bottom mode bar. The real element sitenav.js builds is <nav class="sitenav">,
   NOT .modes - so its items were falling back to sitenav's own
   flex:1 0 auto;min-width:62px, which sizes each item to its LABEL (some
   squished, some stretched). Force EQUAL width and match the glass look. */
.modes,#modes,nav.sitenav{position:fixed;left:0;right:0;bottom:0;z-index:1200;
  display:flex;align-items:stretch;background:var(--strip)!important;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-top:1px solid var(--line)!important;padding-bottom:env(safe-area-inset-bottom)}
.modes a,.modes button,#modes a,#modes button,
nav.sitenav a,nav.sitenav button{flex:1 1 0!important;min-width:0!important;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;color:var(--muted)!important;text-decoration:none;font-size:10px;
  background:none;border:0;cursor:pointer}
.modes a.on,.modes .on,#modes .on,
nav.sitenav .on,nav.sitenav a.on{color:var(--accent)!important;
  border-top-color:var(--accent)!important;background:rgba(43,134,224,.10)!important}

/* ---------------- phone-first (Send patterns) --------------------------- */
@media(max-width:820px){
  /* 🚨 FIXED layout, NO page scroll (his call): the header and bottom bar are
     pinned and NEVER move, the map fills the top, and the panel (controls +
     list) scrolls INTERNALLY beneath it - so the footer bar is always visible
     without scrolling the page and nothing drifts. main/.bar/nav stay
     position:fixed from the base rules; only the panel and the bottom bar
     have their own scroll. */
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .brand b{font-size:14px}
  .stats,.legend{display:none}
  .bar{padding:0 10px}
  .swbug{height:32px!important;padding:5px 9px!important}
  /* the 13-item bottom bar SCROLLS sideways instead of squishing to overlap */
  nav.sitenav,.modes,#modes{overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;justify-content:flex-start}
  nav.sitenav a,nav.sitenav button,.modes a,.modes button,#modes a,#modes button{
    flex:0 0 auto!important;min-width:66px!important}
  /* map on top, panel scrolls below - BOTH inside the fixed <main> */
  main{flex-direction:column}
  #map{height:44vh;min-height:200px;flex:0 0 auto}
  /* 🚨 NO backdrop-filter on the panel on mobile: it made the panel a
     containing block that trapped the position:fixed dropdowns inside it. A
     solid background instead - so the View/Layers sheets below can anchor to
     the VIEWPORT and overlay, rather than being stuck in the panel OR pushing
     the list down when inline. */
  .panel{width:auto;flex:1 1 auto;min-height:0;height:auto;border-left:0;
    border-top:1px solid var(--line);overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    background:rgba(9,12,20,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
  .list{overflow:visible;height:auto;max-height:none}
  .detail{max-height:none;overflow:visible}
  /* View/Layers OVERLAY as a bottom-right sheet - inline expansion pushed the
     list down and shifted the UI. Fixed to the viewport (the panel no longer
     traps it), scrolls internally if tall, never moves the content under it.
     🚨 z-index:1100 so it sits ABOVE the Leaflet map panes (~z400-700) - at the
     default z30 the tall Layers sheet's top half was hidden behind the map.
     width:max-content so a menu of short labels is only as wide as it needs. */
  .filters,.layers{position:fixed!important;left:auto!important;right:10px!important;
    top:auto!important;bottom:calc(var(--barh) + 10px)!important;z-index:1100!important;
    width:max-content!important;min-width:150px;max-width:calc(100vw - 20px);
    max-height:56vh;overflow-y:auto;margin:0;box-shadow:0 24px 60px rgba(0,0,0,.6);animation:pop .14s ease}
  .pmodal{align-items:flex-end;padding:0}
  /* leave a clear strip of backdrop at the top to tap, on top of the always-on
     close button - a full-height sheet left no way to dismiss it on a phone.
     🚨 bottom padding clears the fixed nav bar (--barh) so the last line - the
     disclaimer on the What's-new sheet - is not hidden behind it. */
  .pmodal-card{max-width:none;border-radius:22px 22px 0 0;max-height:80vh;
    padding-bottom:calc(16px + var(--barh) + env(safe-area-inset-bottom))}
  /* 🚨 the plate SEARCH is a TOP sheet, not a bottom one: a bottom sheet opens
     the input exactly where the keyboard appears and hides it (he had to scroll
     to see what he was typing). Anchored just under the header instead, so the
     input stays above the keyboard. */
  #platemodal{align-items:flex-start!important;padding:calc(var(--headh) + 8px) 10px 0!important}
  #platemodal .pmodal-card{border-radius:16px!important;max-height:none;
    padding-bottom:16px!important}
}