* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; background: #101418; color: #eef2f5; }

#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: #181f26; border-bottom: 1px solid #2a333c;
}
#brand strong { font-size: 16px; letter-spacing: .2px; }
#brand .sub { margin-left: 8px; font-size: 12px; color: #9fb2bf; }
#pumpchip {
  font-size: 13px; font-variant-numeric: tabular-nums; padding: 4px 10px;
  border-radius: 999px; background: #223; border: 1px solid #2a333c;
}
#pumpchip.ok   { background: #14351f; border-color: #2f6b42; color: #9fe0b2; }
#pumpchip.warn { background: #3a2f14; border-color: #7a6420; color: #f2d478; }
#pumpchip.bad  { background: #3a1717; border-color: #7a2727; color: #f2a0a0; }

#alertbar {
  background: #5b2120; color: #ffd9d6; font-size: 13px; line-height: 1.35;
  padding: 7px 14px; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-bottom: 1px solid #7a2f2d;
}

#map { flex: 1; min-height: 0; background: #0b0e11; }

#controls {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 1000;
}
.ctl {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2a333c;
  background: #181f26; color: #eef2f5; font-size: 19px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ctl.active { background: #24435c; border-color: #3d6d94; }

#reportBtn {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 1000; padding: 14px 26px; border-radius: 999px; border: none;
  background: #e2483d; color: #fff; font-size: 16px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(226,72,61,.5); cursor: pointer;
}

#hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 1000;
  background: rgba(16,20,24,.92); border: 1px solid #2a333c; border-radius: 8px;
  padding: 8px 14px; font-size: 14px;
}

#emptyState {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 88px; z-index: 900; max-width: min(92vw, 440px);
  background: rgba(24,31,38,.94); border: 1px solid #2a333c; border-radius: 10px;
  padding: 11px 16px; font-size: 13.5px; line-height: 1.45; color: #c3d0da;
  text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
#emptyState strong { color: #eef2f5; }
#emptyState .es-cta { color: #f0958c; font-weight: 600; white-space: nowrap; }

#sheet, #signinSheet, #alertsSheet, #listSheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: #181f26; border-top: 1px solid #2a333c;
  border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
#sheet h3, #signinSheet h3, #alertsSheet h3, #listSheet h3 { margin-bottom: 12px; font-size: 17px; }
.sheetnote { font-size: 13px; color: #9fb2bf; margin-bottom: 10px; line-height: 1.4; }
#signinEmail {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  border: 1px solid #2a333c; background: #101418; color: #eef2f5; font-size: 15px;
}
.primary {
  background: #24435c; border: none; color: #fff; border-radius: 8px;
  padding: 9px 16px; cursor: pointer; font-size: 14px;
}
#alertsActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
#depthBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#depthBtns button {
  padding: 14px 8px; border: none; border-radius: 10px; color: #1a1208;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
#depthBtns button[data-depth="bumper"], #depthBtns button[data-depth="windows"] { color: #fff; }
#noteInput {
  width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #2a333c; background: #101418; color: #eef2f5; font-size: 14px;
}
.sheetrow { margin-top: 12px; text-align: right; }
.ghost { background: none; border: 1px solid #2a333c; color: #9fb2bf; border-radius: 8px; padding: 8px 16px; cursor: pointer; }

#footer { background: #181f26; border-top: 1px solid #2a333c; font-size: 13px; }
#footer summary { padding: 10px 14px; cursor: pointer; color: #9fb2bf; }
#footer p { padding: 4px 14px 10px; color: #c3d0da; line-height: 1.45; }
#footer a { color: #7db8e8; }
#subForm { display: flex; gap: 8px; padding: 4px 14px 6px; }
#subForm input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid #2a333c; background: #101418; color: #eef2f5; }
#subForm button { padding: 9px 14px; border-radius: 8px; border: none; background: #24435c; color: #fff; cursor: pointer; white-space: nowrap; }
#subMsg { min-height: 18px; }
.fine { font-size: 11.5px; color: #7b8a95; }

.hidden { display: none !important; }

/* When a bottom sheet is open, clear the other bottom-anchored UI so nothing
   overlaps the sheet. */
body.sheet-open #reportBtn,
body.sheet-open #emptyState,
body.sheet-open #hint { display: none !important; }
#signinSheet, #alertsSheet, #sheet, #listSheet { z-index: 1200; }

/* avoid-list sheet */
#listBody { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.li-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid #222b33; cursor: pointer;
}
.li-row:last-child { border-bottom: none; }
.li-dot {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  margin-top: 3px; border: 1.5px solid #fff;
}
.li-up .li-dot { border-radius: 3px; background: #b3261e; }
.li-main { font-size: 14px; line-height: 1.35; }
.li-main b { font-size: 14px; }
.li-meta { font-size: 12px; color: #9fb2bf; }
.li-warn { color: #f0958c; font-weight: 600; }

/* water-level gauge markers */
.gauge-icon span {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  color: #fff; font-size: 11px; line-height: 1; font-weight: 700;
  border: 1px solid rgba(255,255,255,.75); opacity: .9;
}
.gauge-icon.alarmed span { opacity: 1; box-shadow: 0 0 0 3px rgba(226,72,61,.35); }

.contact-link { color: #7db8e8; text-decoration: none; font-size: 14px; }
.contact-link:hover { text-decoration: underline; }

/* underpass danger markers */
.up-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  background: rgba(24,31,38,.85); color: #e0a63b;
  border: 1.5px solid #e0a63b; border-radius: 6px;
  opacity: .8;
}
.up-icon.danger {
  font-size: 16px; color: #fff; background: #b3261e; border-color: #ffd9d6;
  opacity: 1; animation: up-pulse 1.6s ease-in-out infinite;
}
@keyframes up-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,72,61,.55); }
  50%      { box-shadow: 0 0 0 9px rgba(226,72,61,0); }
}

/* popup */
.leaflet-popup-content { color: #14181c; }
.pop-avoid { display: inline-block; margin-top: 4px; font-weight: 700; color: #a3261e; font-size: 13px; }
.pop-time { color: #5a6a76; font-size: 12px; }
.pop-trust { display: inline-block; margin-top: 4px; font-size: 12px; color: #2f7d4a; font-weight: 600; }
.pop-trust.strong { color: #1c6b3a; font-size: 12.5px; }
.pop-actions { display: flex; gap: 6px; margin-top: 8px; }
.pop-actions button {
  padding: 6px 10px; border-radius: 6px; border: 1px solid #c8d2da;
  background: #f2f6f9; cursor: pointer; font-size: 12.5px;
}
.pop-actions .flag { margin-left: auto; color: #a33; }
.pop-mine { font-size: 12.5px; color: #5a6a76; align-self: center; }

#toast {
  position: fixed; left: 50%; bottom: calc(130px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  background: #232c34; color: #eef2f5; border: 1px solid #3a464f;
  border-radius: 10px; padding: 11px 16px; font-size: 14px; max-width: 88vw;
  text-align: center; z-index: 1300; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }