* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0c0a14;
  --bg2: #17131f;
  --bg3: #1e1929;
  --line: #2e2740;
  --text: #e9e5f4;
  --muted: #9c93b5;
  --accent: #a78bfa;
  --accent2: #7c3aed;
  --accent3: #5b21b6;
  --panel: #17131ff2;        /* floating buttons, bars, pills */
  --panel2: #120e1cf2;       /* corner panels, popups, tooltips */
  --shadow: rgba(0, 0, 0, .45);
}
/* Light UI — auto-selected when a light basemap is active (theme: Auto). */
body[data-ui-theme="light"] {
  --bg: #f4f2fa;
  --bg2: #ffffff;
  --bg3: #ebe7f5;
  --line: #d8d1e8;
  --text: #241b38;
  --muted: #6f6590;
  --accent: #6d28d9;
  --accent2: #7c3aed;
  --accent3: #c4b5fd;
  --panel: #fffffff0;
  --panel2: #fdfcfff4;
  --shadow: rgba(60, 40, 120, .18);
  --halo: #ded3f2;
}
:root { --halo: #1c1430; }
/* light-theme contrast repairs for elements with fixed colors */
body[data-ui-theme="light"] .an-tag.dense { color: #92400e; }
body[data-ui-theme="light"] .an-tag.mix { color: #9f1239; }
body[data-ui-theme="light"] .an-tag.combo { color: #0e7490; }
body[data-ui-theme="light"] #uploadStatus.err,
body[data-ui-theme="light"] #toast.err { color: #b91c1c; border-color: #dc2626; }
body[data-ui-theme="light"] #uploadStatus.ok,
body[data-ui-theme="light"] #toast.ok { border-color: #059669; }
body[data-ui-theme="light"] .brand-accent {
  background: linear-gradient(120deg, #6d28d9, #4c1d95);
  -webkit-background-clip: text; background-clip: text;
}
html, body, #app { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
#app { display: flex; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- sidebar ---------- */
#sidebar {
  width: 322px; min-width: 322px;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 30%);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
  z-index: 20;
}
#sidebar.collapsed { display: none; }
#expandBtn {
  position: absolute; left: 10px; top: 10px; z-index: 30;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); cursor: pointer; font-size: 18px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  background: var(--panel2); backdrop-filter: blur(6px);
}
.brand-logo { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(124, 58, 237, .45)); }
.brand h1 { font-size: 16.5px; letter-spacing: .2px; font-weight: 800; }
.brand-accent { background: linear-gradient(120deg, #a78bfa, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand p { font-size: 11px; color: var(--muted); }
#collapseBtn {
  margin-left: auto; width: 28px; height: 28px; border-radius: 7px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); cursor: pointer; font-size: 16px;
}
#collapseBtn:hover, #expandBtn:hover { color: var(--accent); border-color: var(--accent); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px 14px;
}
.stat {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 11px;
  transition: border-color .2s;
}
.stat:hover { border-color: var(--accent3); }
.stat b { font-size: 17px; display: block; }
.stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

.block { padding: 12px 14px; border-top: 1px solid var(--line); }
.blk-title {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); margin-bottom: 8px;
}
.block input[type="text"], .block select {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .15s;
}
.block input[type="text"]:focus, .block select:focus { border-color: var(--accent); }
.filter-grid { display: flex; flex-direction: column; gap: 7px; }
.scope-badge {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; padding: 8px 10px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(79, 70, 229, .18));
  border: 1px solid rgba(167, 139, 250, .5);
  font-size: 12px; line-height: 1.4;
}
.scope-badge b { color: var(--accent); }
.block select:disabled {
  opacity: .75; cursor: not-allowed;
  background: var(--bg); color: var(--muted);
}

.ts-box {
  margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line);
}
.ts-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 12px; line-height: 1.35;
  border-bottom: 1px solid var(--line);
}
.ts-row:last-of-type { border-bottom: none; }
.ts-row > span { color: var(--text); }
.ts-row > span b { color: var(--accent); font-weight: 600; }
.ts-num { flex: none; font-size: 15px; color: var(--accent); min-width: 44px; text-align: right; }
.ts-box .hint { margin-top: 5px; font-size: 10.5px; }

.chip {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .45);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4;
}
.chip button {
  margin-left: auto; background: none; border: none; flex: none;
  color: var(--accent); cursor: pointer; font-size: 13px;
}
.chip #tourBtn, .chip .tour-nav {
  margin-left: 0; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid rgba(167, 139, 250, .45); font-size: 12px;
}
.chip #tourBtn:hover, .chip .tour-nav:hover { background: rgba(167, 139, 250, .15); }

/* prominent locate-me button (the default maplibre icon is hidden) */
.maplibregl-ctrl-geolocate { display: none !important; }
#locateBtn {
  position: absolute; z-index: 21;
  right: 10px; bottom: 256px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px var(--shadow);
  transition: border-color .15s, transform .1s;
}
#locateBtn:hover { border-color: var(--accent); }
#locateBtn:active { transform: scale(.93); }
#locateBtn.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, .35); }
#locateBtn.searching { animation: locate-search 1s linear infinite; }
@keyframes locate-search { 50% { border-color: var(--accent); } }
#measureBtn {
  position: absolute; z-index: 21;
  right: 10px; bottom: 312px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px var(--shadow);
  transition: border-color .15s, transform .1s;
}
#pinBtn {
  position: absolute; z-index: 21;
  right: 10px; bottom: 200px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 20px; line-height: 1; cursor: grab;
  box-shadow: 0 6px 20px var(--shadow);
  transition: border-color .15s, transform .1s;
  touch-action: none;   /* the button itself is draggable — no scroll steal */
}
#pinBtn:hover { border-color: var(--accent); }
#pinBtn:active { cursor: grabbing; }
#pinBtn.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, .35); }
.pin-ghost {
  position: fixed; z-index: 99; pointer-events: none;
  font-size: 34px; line-height: 1; transform: translate(-50%, -90%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.drop-pin-marker {
  font-size: 34px; line-height: 1; cursor: grab;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.pin-link {
  margin: 6px 0; padding: 7px 9px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; overflow-wrap: anywhere;
}
.pin-link a { color: var(--accent); }
#measureBtn:hover { border-color: var(--accent); }
#measureBtn:active { transform: scale(.93); }
#measureBtn.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, .35); }

#circleBtn {
  position: absolute; z-index: 21;
  right: 10px; bottom: 368px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 21px; line-height: 1; cursor: pointer; color: var(--text);
  box-shadow: 0 6px 20px var(--shadow);
  transition: border-color .15s, transform .1s;
}
#circleBtn:hover { border-color: var(--accent); }
#circleBtn:active { transform: scale(.93); }
#circleBtn.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, .35); }

/* keep clear of #expandBtn (left:10/top:10) when the sidebar is collapsed */
#sidebar.collapsed ~ #mapwrap #circlePanel { top: 56px; }
/* short desktop windows: the right-hand tool buttons move left of the points panel */
@media (min-width: 761px) and (max-height: 760px) {
  #locateBtn, #pinBtn, #measureBtn, #circleBtn { right: 292px; }
}
#circlePanel {
  position: absolute; z-index: 22;
  top: 10px; left: 10px;
  width: 252px; max-height: calc(100% - 20px);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(6px);
}
.cp-head {
  padding: 10px 12px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.cp-head button {
  margin-left: auto; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.cp-head button:hover { border-color: var(--accent); color: var(--accent); }
.cp-head button + button { margin-left: 6px; }   /* second button sits snug, not pushed apart */
/* minimized left panels collapse to just their header strip (same idea as the
   points panel's − button) so the map stays visible, especially on phones */
#circlePanel.panel-min > :not(.cp-head),
#anomPanel.panel-min > :not(.cp-head) { display: none; }
#circlePanel.panel-min,
#anomPanel.panel-min { width: auto; min-width: 172px; max-height: none; }
#circlePanel.panel-min .cp-head,
#anomPanel.panel-min .cp-head { border-bottom: none; }
.cp-radius { padding: 10px 12px 6px; }
.cp-radius label { font-size: 12px; display: block; margin-bottom: 5px; }
.cp-radius label b { color: var(--accent); }
.cp-radius input {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 13px; text-align: center; outline: none;
}
.cp-radius input:focus { border-color: var(--accent); }
.cp-stats { display: flex; gap: 6px; padding: 8px 12px; }
.cp-stats div {
  flex: 1; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 4px; text-align: center;
}
.cp-stats b { display: block; font-size: 15px; color: var(--accent); }
.cp-stats span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
#cpHint { padding: 0 12px 8px; }
.cp-export {
  width: calc(100% - 24px); margin: 0 12px 8px; padding: 9px 10px;
  text-align: center; font-size: 12.5px; flex: none;
}
.cp-export:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.cp-list { overflow-y: auto; padding: 2px 6px 8px; }
.cp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12px;
}
.cp-item:hover { background: var(--bg3); }
.cp-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cp-item .frac { margin-left: auto; font-weight: 700; color: var(--accent); flex: none; }
.cp-more { padding: 4px 10px; font-size: 11px; color: var(--muted); }

/* ---------- anomaly finder ---------- */
#anomBtn {
  position: absolute; z-index: 21;
  right: 10px; bottom: 424px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--text);
  box-shadow: 0 6px 20px var(--shadow);
  transition: border-color .15s, transform .1s;
}
#anomBtn:hover { border-color: #f59e0b; }
#anomBtn:active { transform: scale(.93); }
#anomBtn.active { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .3); }

#anomPanel {
  position: absolute; z-index: 22;
  top: 10px; left: 10px;
  width: 272px; max-height: calc(100% - 20px);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(6px);
}
#sidebar.collapsed ~ #mapwrap #anomPanel { top: 56px; }
.an-controls { padding: 10px 12px 4px; }
.an-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.9; margin-bottom: 6px; cursor: pointer;
}
.an-row input[type="checkbox"] { margin-top: 7px; accent-color: #f59e0b; flex: none; }
.an-row input[type="number"] {
  width: 58px; padding: 3px 6px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 12.5px; text-align: center;
}
.an-row input[type="number"]:focus { border-color: #f59e0b; outline: none; }
.an-row.dim { opacity: .45; }
.an-row.dim input { pointer-events: auto; }   /* re-ticking a manual row re-enables it */
.an-run { width: 100%; margin: 4px 0 6px; padding: 9px; text-align: center; font-size: 12.5px; }
.an-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12px;
}
.an-item:hover { background: var(--bg3); }
.an-item .an-tag {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 5px; text-transform: uppercase;
}
.an-tag.dense { background: rgba(245, 158, 11, .2); color: #f59e0b; }
.an-tag.mix { background: rgba(244, 63, 94, .18); color: #f43f5e; }
.an-tag.combo { background: rgba(6, 182, 212, .18); color: #22d3ee; }
.an-item .an-main { min-width: 0; }
.an-item .an-main b { display: block; font-size: 12px; }
.an-item .an-main span { font-size: 10.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #anomBtn { top: calc(env(safe-area-inset-top) + 288px); bottom: auto; }
  #anomPanel {
    top: calc(env(safe-area-inset-top) + 64px); left: 10px;
    width: min(72vw, 260px); max-height: 56%;
  }
  #sidebar.collapsed ~ #mapwrap #anomPanel { top: calc(env(safe-area-inset-top) + 64px); }
}
@media (pointer: coarse) and (max-height: 520px) {
  #anomBtn { top: calc(env(safe-area-inset-top) + 66px); right: 226px; bottom: auto; }
  #anomPanel { max-height: calc(100% - 190px); }
}
@media (min-width: 761px) and (max-height: 760px) {
  #anomBtn { right: 292px; }
}

#measurePanel {
  position: absolute; z-index: 23;
  left: 50%; transform: translateX(-50%); bottom: 24px;
  display: flex; align-items: center; gap: 6px;
  max-width: 96vw;
  background: var(--panel); border: 1px solid rgba(167, 139, 250, .5);
  border-radius: 999px; padding: 8px 8px 8px 16px;
  box-shadow: 0 8px 26px var(--shadow); white-space: nowrap;
}
#measurePanel span {
  font-size: 13px; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#measurePanel span b { color: var(--accent); }
#measurePanel button {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: none; background: var(--bg3); color: var(--text);
  font-size: 14px; cursor: pointer;
}
#measurePanel button:hover { background: var(--accent3); }
#measurePanel #mDone { background: transparent; color: var(--muted); }

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #locateBtn { top: calc(env(safe-area-inset-top) + 72px); bottom: auto; }
  #pinBtn { top: calc(env(safe-area-inset-top) + 126px); bottom: auto; }
  #measureBtn { top: calc(env(safe-area-inset-top) + 180px); bottom: auto; }
  #circleBtn { top: calc(env(safe-area-inset-top) + 234px); bottom: auto; }
  #circlePanel {
    top: calc(env(safe-area-inset-top) + 64px); left: 10px;
    width: min(66vw, 240px); max-height: 52%;
  }
  #sidebar.collapsed ~ #mapwrap #circlePanel { top: calc(env(safe-area-inset-top) + 64px); }
  #measurePanel { bottom: calc(174px + env(safe-area-inset-bottom)); max-width: 94vw; }
  #measurePanel span { font-size: 12px; }
  #measurePanel button { width: 40px; height: 40px; }
  /* if the points sheet is re-expanded mid-measure, lift the pill above it */
  #mapwrap:has(#dhPanel:not(.collapsed-sheet)) #measurePanel {
    bottom: calc(45% + 12px + env(safe-area-inset-bottom));
  }
}

/* touch landscape: tool buttons in a row, shorter panel above the sheet */
@media (pointer: coarse) and (max-height: 520px) {
  #locateBtn { top: calc(env(safe-area-inset-top) + 66px); right: 10px; bottom: auto; }
  #pinBtn { top: calc(env(safe-area-inset-top) + 66px); right: 64px; bottom: auto; }
  #measureBtn { top: calc(env(safe-area-inset-top) + 66px); right: 118px; bottom: auto; }
  #circleBtn { top: calc(env(safe-area-inset-top) + 66px); right: 172px; bottom: auto; }
  #circlePanel { max-height: calc(100% - 190px); }
}

.man-marker-wrap { cursor: default; }
.man-marker-icon {
  display: block; font-size: 32px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
  transform-origin: 50% 100%;
  animation: man-pulse 1.6s ease-in-out infinite;
}
@keyframes man-pulse { 50% { transform: scale(1.12); } }

.tour-pop .maplibregl-popup-content { padding: 8px 12px; }
.tour-pop .tp-name { font-weight: 700; font-size: 13px; }
.tour-pop .tp-sub { font-size: 11px; color: var(--muted); }

#searchResults { margin-top: 6px; }
.sr-item {
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; display: flex; align-items: center; gap: 8px;
}
.sr-item:hover { background: var(--bg3); }
.sr-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sr-item .kind { margin-left: auto; font-size: 10px; color: var(--muted); text-transform: uppercase; }

.btn {
  width: 100%; padding: 9px 12px; margin-bottom: 8px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text);
  font-size: 13px; cursor: pointer; text-align: left;
  transition: border-color .15s, filter .15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent2), #4f46e5);
  border: none; font-weight: 600; color: #fff;
  box-shadow: 0 3px 14px rgba(124, 58, 237, .35);
}
.btn.primary:hover { filter: brightness(1.12); }
.btn.subtle { font-size: 12px; color: var(--muted); }
.sample-row { display: flex; gap: 6px; }
.sample-row .btn { font-size: 11px; padding: 7px 8px; margin-bottom: 6px; }
.hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

#uploadStatus {
  margin-top: 8px; padding: 9px 11px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--line);
  font-size: 12px; line-height: 1.5;
}
#uploadStatus.err { border-color: #f87171; color: #fca5a5; }
#uploadStatus.ok { border-color: #34d399; }

#paletteRow { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
#paletteRow span { width: 16px; height: 16px; border-radius: 5px; }

.foot {
  margin-top: auto; padding: 12px 14px;
  font-size: 10.5px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.foot-user {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px; font-size: 12px; color: var(--text);
}
.foot-user button {
  margin-left: auto; padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--muted); font-size: 11px; cursor: pointer;
}
.foot-user button:hover { border-color: #f87171; color: #fca5a5; }

/* ---------- login ---------- */
#loginScreen {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at 50% 35%, var(--halo) 0%, var(--bg) 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#loginForm {
  width: min(92vw, 320px); text-align: center;
  background: #17131fd9; border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
}
.login-logo { width: 74px; margin-bottom: 10px; filter: drop-shadow(0 4px 18px rgba(124, 58, 237, .5)); }
#loginForm h2 { font-size: 20px; font-weight: 800; }
.login-sub { font-size: 12px; color: var(--muted); margin: 4px 0 18px; }
#loginForm input {
  width: 100%; padding: 11px 13px; margin-bottom: 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 14px; outline: none;
}
#loginForm input:focus { border-color: var(--accent); }
.login-btn { text-align: center; padding: 11px; font-size: 14px; margin-top: 4px; }
.login-error { margin-top: 10px; font-size: 12px; color: #fca5a5; }
#loginForm.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- map ---------- */
#mapwrap { flex: 1; position: relative; background: var(--bg); }
#map { position: absolute; inset: 0; }
.maplibregl-popup { z-index: 15; }
.maplibregl-popup-content {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-family: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  max-width: 290px;
}
.maplibregl-popup-close-button { color: var(--muted); font-size: 18px; right: 4px; top: 2px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--panel2); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--panel2); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--panel2); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--panel2); }

.pp-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; padding-right: 12px; }
.pp-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.pp-row { font-size: 12px; margin: 3px 0; display: flex; gap: 6px; }
.pp-row b { color: var(--muted); font-weight: 600; min-width: 64px; flex: none; }
.pp-route {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0; font-size: 12.5px; font-weight: 600;
}
.pp-route i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.pp-counts {
  display: flex; gap: 6px; margin: 8px 0 2px;
}
.pp-counts div {
  flex: 1; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; text-align: center;
}
.pp-counts b { display: block; font-size: 14px; color: var(--accent); }
.pp-counts span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pp-near {
  margin: 7px 0 2px; padding: 7px 9px; border-radius: 8px;
  background: rgba(124, 58, 237, .12); border: 1px solid rgba(124, 58, 237, .4);
  font-size: 11.5px; line-height: 1.5;
}
.pp-actions { display: flex; gap: 6px; margin-top: 9px; }
.pp-actions button {
  flex: 1; padding: 6px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--text); cursor: pointer;
}
.pp-actions button:hover { border-color: var(--accent); }

/* ---------- DH corner panel ---------- */
.corner-panel {
  position: absolute; top: 10px; right: 10px; z-index: 18;
  width: 272px; max-height: calc(100% - 20px);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(6px);
}
.dh-head {
  padding: 10px 12px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.badge {
  margin-left: auto; background: var(--accent2); color: #fff;
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700;
}
#dhCollapse {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
#dhCollapse:hover { border-color: var(--accent); color: var(--accent); }
.corner-panel.panel-min .dh-radius,
.corner-panel.panel-min .dh-summary,
.corner-panel.panel-min .dh-search,
.corner-panel.panel-min .dh-list { display: none; }
@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #dhCollapse { display: none; }   /* the sheet handle covers this on mobile */
}
.dh-radius { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dh-radius label { font-size: 12px; display: block; margin-bottom: 5px; }
.dh-radius label b { color: var(--accent); }
.radius-row { display: flex; align-items: center; gap: 9px; }
.dh-radius input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent2); }
.dh-radius input[type="number"] {
  width: 86px; flex: none; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 13px; text-align: center;
}
.dh-radius input[type="number"]:focus { border-color: var(--accent); outline: none; }
.dh-summary { padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.dh-summary b { color: var(--text); }
.dh-search {
  margin: 8px 10px 2px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 12px; outline: none;
}
.dh-search:focus { border-color: var(--accent); }
.dh-list { overflow-y: auto; padding: 6px; }
.dh-list .hint { padding: 6px 8px; }
.dh-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.dh-item:hover { background: var(--bg3); }
.dh-item .sub { display: block; font-size: 10px; color: var(--muted); }
.dh-item .cnt { margin-left: auto; font-weight: 700; color: var(--accent); flex: none; }

/* ---------- tooltip / loader ---------- */
/* Google Places search (only while a Google basemap is active) */
#gSearchWrap {
  position: absolute; z-index: 23;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100% - 600px));
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
  box-shadow: 0 6px 22px var(--shadow);
}
#gSearchWrap .gs-icon { font-size: 14px; flex: none; }
#gSearch {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--text); font-size: 13.5px; outline: none;
}
#gSearch::placeholder { color: var(--muted); }
#gSearchClear {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; cursor: pointer;
}
#gSearchClear:hover { background: var(--bg3); color: var(--text); }
#gSearchResults {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden auto; max-height: 320px;
  box-shadow: 0 10px 30px var(--shadow);
}
#gSearchResults:empty { display: none; }
.gs-item { padding: 9px 13px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.gs-item:last-child { border-bottom: none; }
.gs-item:hover { background: var(--bg3); }
.gs-item b { display: block; font-size: 13px; }
.gs-item span { color: var(--muted); font-size: 11px; }
.gs-note { padding: 8px 13px; font-size: 11px; color: var(--muted); }

/* Google Maps link row inside the anomaly list */
.an-item .an-gmap {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-size: 12px; cursor: pointer; line-height: 1;
}
.an-item .an-gmap:hover { border-color: var(--accent); }
.an-link {
  display: flex; align-items: center; gap: 6px;
  margin: -2px 6px 6px; padding: 7px 9px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
}
.an-link a {
  flex: 1; min-width: 0; font-size: 11px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-link button {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--text); font-size: 12px; cursor: pointer;
}
.an-link button:hover { border-color: var(--accent); }

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #gSearchWrap {
    width: auto; left: 10px; right: 10px; transform: none;
    top: calc(env(safe-area-inset-top) + 66px);
  }
  /* the pill occupies its own 52px band: shift the tools and panels below it
     so nothing is ever buried (the pill is only present on Google basemaps) */
  #mapwrap:has(#gSearchWrap:not(.hidden)) #locateBtn { top: calc(env(safe-area-inset-top) + 124px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #pinBtn { top: calc(env(safe-area-inset-top) + 178px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #measureBtn { top: calc(env(safe-area-inset-top) + 232px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #circleBtn { top: calc(env(safe-area-inset-top) + 286px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #anomBtn { top: calc(env(safe-area-inset-top) + 340px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #circlePanel,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #anomPanel { top: calc(env(safe-area-inset-top) + 116px); max-height: 48%; }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #toast { top: calc(env(safe-area-inset-top) + 124px); }
}
@media (pointer: coarse) and (max-height: 520px) {
  /* landscape puts the tools in a row — move that whole row below the pill */
  #mapwrap:has(#gSearchWrap:not(.hidden)) #locateBtn,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #pinBtn,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #measureBtn,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #circleBtn,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #anomBtn { top: calc(env(safe-area-inset-top) + 118px); }
  #mapwrap:has(#gSearchWrap:not(.hidden)) #circlePanel,
  #mapwrap:has(#gSearchWrap:not(.hidden)) #anomPanel { max-height: calc(100% - 240px); }
}
/* desktop: keep the toast clear of the search pill */
#mapwrap:has(#gSearchWrap:not(.hidden)) #toast { top: 64px; }

/* Google Places result marker — distinct from the pulsing 'you are here' pin */
.gs-marker-wrap { cursor: pointer; }
.gs-marker-icon {
  display: block; font-size: 30px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}

/* Google attribution (required when Google tiles are the basemap) */
#gAttrWrap {
  position: absolute; z-index: 19;
  left: 8px; bottom: 26px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .85); border-radius: 6px;
  padding: 2px 8px; pointer-events: none;
}
.g-logo { font-family: Arial, sans-serif; font-weight: 700; font-size: 13px; color: #4a4a4a; letter-spacing: -.5px; }
#gAttr { font-size: 10px; color: #333; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sales history chart ---------- */
#salesPanel {
  position: absolute; z-index: 24;
  left: 50%; transform: translateX(-50%); bottom: 18px;
  width: min(760px, calc(100% - 40px));
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px var(--shadow);
  backdrop-filter: blur(6px);
}
.sp-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.sp-head b { font-size: 13.5px; display: block; }
.sp-head span { font-size: 11px; color: var(--muted); }
.sp-head button {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.sp-head button:hover { border-color: var(--accent); color: var(--accent); }
.sp-stats { display: flex; gap: 8px; padding: 9px 14px 4px; }
.sp-stats div {
  flex: 1; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 8px; text-align: center;
}
.sp-stats b { display: block; font-size: 15px; color: var(--accent); }
.sp-stats span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
#spChartWrap { padding: 6px 10px 2px; }
#spChart { width: 100%; height: 170px; display: block; }
#spNote { padding: 0 14px 10px; }

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #salesPanel { width: calc(100% - 20px); bottom: 10px; }
  .sp-stats { flex-wrap: wrap; }
  .sp-stats div { min-width: calc(50% - 4px); }
  #spChart { height: 140px; }
}

#toast {
  position: absolute; z-index: 26;
  left: 50%; transform: translateX(-50%); top: 16px;
  max-width: min(92vw, 420px); padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 26px var(--shadow);
}
#toast.err { border-color: #f87171; color: #fca5a5; }
#toast.ok { border-color: #34d399; }
@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #toast { top: calc(env(safe-area-inset-top) + 66px); }
}

#tooltip {
  position: absolute; z-index: 25; pointer-events: none;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px; font-size: 12px;
  max-width: 250px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
#tooltip .t-route { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; margin-top: 2px; }
#tooltip .t-route i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

#glError {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(ellipse at 50% 38%, var(--halo) 0%, var(--bg) 65%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center;
}
#glError h3 { font-size: 17px; }
#glError p { max-width: 340px; font-size: 13px; color: var(--muted); line-height: 1.55; }
#glError .btn { width: auto; padding: 10px 26px; margin-top: 8px; text-align: center; }

#loader {
  position: absolute; inset: 0; z-index: 40;
  background: radial-gradient(ellipse at 50% 38%, var(--halo) 0%, var(--bg) 65%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.loader-logo { width: 88px; filter: drop-shadow(0 4px 18px rgba(124, 58, 237, .5)); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
#loader p { color: var(--muted); font-size: 13px; max-width: 340px; text-align: center; line-height: 1.5; }
#loaderRetry { width: auto; padding: 10px 28px; text-align: center; }
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ---------- mobile top bar (hidden on desktop) ---------- */
#mobileBar { display: none; }
#sheetHandle { display: none; }
#tourBar { display: none; }   /* mobile-only journey controls */
#backdrop {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px);
}

/* ---------- mobile: app-like layout (portrait width OR touch landscape) ---------- */
@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  #sidebar {
    position: fixed; inset: 0 auto 0 0; height: 100%; z-index: 30;
    width: min(86vw, 340px); min-width: 0;
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.3, .8, .3, 1);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .6);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar.collapsed { display: flex; }
  #sidebar.open { transform: translateX(0); }
  #collapseBtn, #expandBtn { display: none; }

  /* Google-Maps-style floating search pill */
  #mobileBar {
    display: flex; align-items: center; gap: 8px;
    position: absolute; z-index: 22;
    top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 12px 6px 6px;
    box-shadow: 0 6px 22px var(--shadow);
  }
  #mMenu {
    width: 38px; height: 38px; flex: none; border: none; border-radius: 50%;
    background: transparent; color: var(--text); font-size: 19px; cursor: pointer;
  }
  #mMenu:active { background: var(--bg3); }
  #mSearch {
    flex: 1; min-width: 0; border: none; background: transparent;
    color: var(--text); font-size: 14px; outline: none; cursor: pointer;
  }
  #mSearch::placeholder { color: var(--muted); }
  .m-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }

  /* points panel becomes a bottom sheet */
  .corner-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 45%; border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
    transition: max-height .25s ease;
  }
  .corner-panel.collapsed-sheet { max-height: 158px; overflow: hidden; }
  .corner-panel.collapsed-sheet .dh-summary,
  .corner-panel.collapsed-sheet .dh-search,
  .corner-panel.collapsed-sheet .dh-list { display: none; }
  #sheetHandle {
    display: block; width: 100%; padding: 8px 0 4px;
    background: transparent; border: none; cursor: pointer;
  }
  #sheetHandle .pill {
    display: block; width: 42px; height: 4.5px; margin: 0 auto;
    border-radius: 3px; background: var(--accent3);
  }
  #sheetHandle .sheet-label {
    display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600;
    color: var(--accent); letter-spacing: .3px;
  }
  .corner-panel:not(.collapsed-sheet) #sheetHandle .sheet-label { display: none; }
  .dh-radius { padding: 8px 14px; }
  .dh-item, .sr-item, .btn { padding-top: 10px; padding-bottom: 10px; }  /* touch targets */

  .maplibregl-ctrl-bottom-right { bottom: 40%; }
  .maplibregl-popup-content { max-width: min(84vw, 300px); }
  #tooltip { display: none; }   /* hover has no meaning on touch */
  .chip button, .chip #tourBtn, .chip .tour-nav { width: 34px; height: 34px; font-size: 14px; }

  /* floating journey controls — thumb reach, above the bottom sheet */
  #tourBar {
    display: flex; align-items: center; gap: 6px;
    position: absolute; z-index: 23;
    left: 50%; transform: translateX(-50%);
    bottom: calc(174px + env(safe-area-inset-bottom));
    background: var(--panel); border: 1px solid rgba(167, 139, 250, .5);
    border-radius: 999px; padding: 7px 10px;
    box-shadow: 0 8px 26px var(--shadow);
    white-space: nowrap;
  }
  #tourBar span { font-size: 12px; font-weight: 700; color: var(--accent); padding: 0 4px; min-width: 44px; text-align: center; }
  #tourBar button {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    border: none; background: var(--bg3); color: var(--text);
    font-size: 15px; cursor: pointer;
  }
  #tourBar button:active { background: var(--accent3); }
  #tourBar #tbPlay { background: var(--accent2); }
  #tourBar #tbClose { background: transparent; color: var(--muted); }
}