:root {
  --field-navy: #073f55;
  --field-navy-deep: #052f40;
  --field-blue: #087ac1;
  --field-cyan: #10b6ba;
  --field-gold: #f5ae17;
  --field-border: #c6d5dc;
  --field-text: #173848;
}

.county-line-crossing { display:flex; align-items:center; justify-content:center; min-width:54px; height:24px; overflow:hidden; border:2px solid #007f84; border-radius:8px; background:#fff; color:#075367; box-shadow:0 2px 6px rgba(0,39,55,.3); font:800 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.35px; white-space:nowrap; }
.county-line-crossing span { padding:0 5px; }
.county-line-crossing b { display:inline-flex; align-items:center; justify-content:center; padding:0 1px; color:#0a6572; font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif; }
.county-marker-filter-control { width:196px; padding:10px; border:1px solid #bfd2da; border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 5px 18px rgba(0,39,55,.18); color:#073f55; box-sizing:border-box; }
.county-marker-filter-control strong { display:block; margin-bottom:8px; font:800 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; }
.county-marker-filter-control label { display:block; margin-bottom:5px; font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.7px; text-transform:uppercase; }
.county-marker-filter-control select { width:100%; height:38px; padding:0 10px; border:1px solid #b8ccd5; border-radius:9px; background:#fff; color:#173848; font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif; }
.county-crossing-popup{min-width:180px;color:#173848;font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}.county-crossing-popup>strong{display:block;margin-bottom:4px;color:#073f55;font-size:14px}

/* Regular pin-drop mode keeps the normal mouse pointer. */
.leaflet-container.pin-drop-cursor-active,
.leaflet-container.pin-drop-cursor-active .leaflet-interactive {
  cursor: default !important;
}

/* ------------------------------------------------------------
   Measure tool and optional spray calculator
   ------------------------------------------------------------ */
.leaflet-container.measure-cursor-active,
.leaflet-container.measure-cursor-active .leaflet-interactive,
.leaflet-container.measure-cursor-active .leaflet-marker-icon {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-42 16 16)'%3E%3Crect x='4' y='10' width='24' height='12' rx='3' fill='%23ffffff' stroke='%23087ac1' stroke-width='2'/%3E%3Cpath d='M9 10v5M13 10v3M17 10v5M21 10v3M25 10v5' stroke='%23087ac1' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 5 26, crosshair !important;
}

.measure-map-control {
    width: 68px;
    margin-top: 8px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: 0 7px 18px rgba(15, 49, 66, .18) !important;
}
.measure-map-control button {
    display: flex;
    width: 68px;
    height: 58px;
    padding: 7px 4px 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid #cbd9df;
    border-radius: 11px;
    background: rgba(255,255,255,.98);
    color: #087ac1;
    cursor: pointer;
}
.measure-map-control button:hover,
.measure-map-control.is-active button { background: #edf8fb; border-color: #00a7b5; }
.measure-map-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.measure-map-control span { color: #163e52; font: 800 9px/1 "Segoe UI",Arial,sans-serif; letter-spacing: .02em; }

.measure-panel {
    position: fixed;
    z-index: 1600;
    top: 116px;
    right: 14px;
    display: none;
    width: min(340px, calc(100vw - 20px));
    max-height: calc(100vh - 136px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cbd9df;
    border-radius: 12px;
    background: rgba(255,255,255,.98);
    color: #173d50;
    box-shadow: 0 14px 32px rgba(15,49,66,.24);
    font-family: "Segoe UI",Arial,sans-serif;
}
.measure-panel.is-visible { display: block; }
.measure-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.measure-panel-title { display:flex; align-items:center; gap:6px; color:#0b4056; font-size:13px; font-weight:900; letter-spacing:.035em; }
.measure-panel-title span { color:#00a7b5; font-size:18px; }
.measure-panel-header-actions { display:flex; align-items:center; gap:2px; }
.measure-panel-collapse { display:none; width:27px; height:27px; border:0; border-radius:7px; background:#eef7f8; color:#087ac1; font-size:22px; line-height:1; cursor:pointer; }
.measure-panel-close { width:27px; height:27px; border:0; border-radius:7px; background:transparent; color:#55717f; font-size:20px; cursor:pointer; }
.measure-panel-close:hover { background:#eef4f6; }
.measure-choice-prompt {
    display:flex;
    width:100%;
    margin:4px 0 9px;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#4d6b79;
    font:900 10px/1.2 "Segoe UI",Arial,sans-serif;
    letter-spacing:.11em;
    text-align:center;
    white-space:nowrap;
}
.measure-choice-prompt::before,
.measure-choice-prompt::after {
    content:"";
    height:1px;
    min-width:18px;
    flex:1 1 auto;
    background:linear-gradient(90deg,transparent,#a9c4cf);
}
.measure-choice-prompt::after {
    background:linear-gradient(90deg,#a9c4cf,transparent);
}
.spray-crew-prompt {
    margin-top:2px;
    margin-bottom:9px;
}
.restore-measure-tab { display:none; position:fixed; z-index:1601; right:0; top:50%; width:34px; min-height:112px; padding:8px 5px; transform:translateY(-50%); align-items:center; justify-content:center; flex-direction:column; gap:5px; border:1px solid #8ec7d3; border-right:0; border-radius:12px 0 0 12px; background:rgba(255,255,255,.98); color:#087ac1; box-shadow:-5px 7px 18px rgba(15,49,66,.2); cursor:pointer; }
.restore-measure-tab span { font-size:23px; line-height:1; }
.restore-measure-tab b { font:900 9px/1 "Segoe UI",Arial,sans-serif; letter-spacing:.06em; writing-mode:vertical-rl; transform:rotate(180deg); }
.measure-mode-tabs,
.spray-segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:9px; background:#eef3f5; }
.measure-mode-tabs button,
.spray-segmented button { min-height:32px; padding:5px 6px; border:0; border-radius:7px; background:transparent; color:#375565; font:800 10px/1.2 "Segoe UI",Arial,sans-serif; cursor:pointer; }
.measure-mode-tabs button.is-active,
.spray-segmented button.is-active { background:#087fc3; color:#fff; box-shadow:0 3px 8px rgba(8,127,195,.22); }
.measure-summary { padding:17px 6px 12px; text-align:center; }
.measure-summary > span { display:block; margin-bottom:8px; color:#607887; font-size:10px; font-weight:900; letter-spacing:.08em; }
.measure-summary > strong { display:block; color:#00a0a8; font-size:24px; font-weight:900; line-height:1.1; }
.measure-summary > small { display:block; margin-top:5px; color:#365464; font-size:13px; font-weight:800; }
.measure-extra-summary { margin-top:13px; padding-top:11px; border-top:1px solid #d9e3e7; }
.measure-extra-summary > label { display:block; margin-bottom:8px; color:#607887; font-size:10px; font-weight:900; letter-spacing:.08em; }
.measure-extra-summary > strong { color:#00a0a8; font-size:18px; }
.measure-extra-summary > div { display:grid; grid-template-columns:28px 1fr; align-items:center; gap:9px; max-width:245px; margin:7px auto; text-align:left; }
.measure-extra-summary > div span { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:#00a0a8; color:#fff; font-size:11px; font-weight:900; }
.measure-extra-summary > div b { font-size:12px; }
.measure-instructions { margin:0 0 12px; color:#5b707b; font-size:11px; line-height:1.35; text-align:center; }
.measure-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.measure-primary-button,
.measure-secondary-button,
.spray-back-button { min-height:39px; border-radius:7px; font:800 11px/1 "Segoe UI",Arial,sans-serif; cursor:pointer; }
.measure-primary-button { width:100%; margin-top:10px; border:1px solid #087fc3; background:#087fc3; color:#fff; letter-spacing:.035em; }
.measure-primary-button:hover { background:#066ea9; }
.measure-secondary-button { border:1px solid #a9c4d1; background:#fff; color:#087ac1; }
.measure-secondary-button:disabled { opacity:.45; cursor:not-allowed; }
.measure-edit-marker { background:transparent; border:0; }
.measure-edit-marker span { display:block; width:14px; height:14px; box-sizing:border-box; border:3px solid #00a7b5; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(15,49,66,.28); }
.pin-drop-control.is-measuring { width:105px !important; }
.pin-drop-control.is-measuring .pin-drop-toggle { width:105px !important; }
.pin-drop-control.is-measuring .pin-drop-toggle-text { background:#e5f6f7 !important; color:#007c84 !important; }

.measurement-tools-menu-button {
    display:flex;
    width:100%;
    min-height:42px;
    margin-top:8px;
    padding:6px 10px;
    align-items:center;
    gap:9px;
    border:1px solid #ccdbe2;
    border-radius:9px;
    background:#f7fafb;
    color:#173d50;
    font:800 11px/1 "Segoe UI",Arial,sans-serif;
    text-align:left;
    cursor:pointer;
}
.measurement-tools-menu-button:hover,
.measurement-tools-menu-button.is-active { border-color:#00a7b5; background:#edf9fa; }
.measurement-tools-menu-button .measurement-tools-state { margin-left:auto; padding:4px 6px; border-radius:8px; background:#e3ecf0; color:#58717e; font-size:8px; }
.measurement-tools-menu-button.is-active .measurement-tools-state { background:#d8f2f1; color:#007c84; }

.spray-calculator-view { padding-top:1px; }
.spray-back-button { margin-bottom:13px; padding:0 9px; border:0; background:#eef5f7; color:#0b638c; }
.measure-section-label { display:block; margin:12px 0 6px; color:#58717e; font-size:9px; font-weight:900; letter-spacing:.08em; }
.spray-segmented { grid-template-columns:1fr 1fr; }
.spray-segmented button { min-height:40px; font-size:10px; }
.spray-gallons-input { margin-top:10px; }
.spray-gallons-input label { display:block; margin-bottom:5px; color:#58717e; font-size:9px; font-weight:900; }
.spray-gallons-input input,
.spray-chemical-row input,
.spray-chemical-row select { height:37px; box-sizing:border-box; border:1px solid #bdd0d9; border-radius:7px; background:#fff; color:#173d50; font:700 11px "Segoe UI",Arial,sans-serif; }
.spray-gallons-input input { width:100%; padding:0 10px; }
.spray-coverage-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.spray-coverage-summary div { padding:10px; border:1px solid #d0e0e5; border-radius:8px; background:#f5fafb; text-align:center; }
.spray-coverage-summary span { display:block; color:#607887; font-size:9px; font-weight:900; text-transform:uppercase; }
.spray-coverage-summary strong { display:block; margin-top:4px; color:#009da6; font-size:14px; }
.spray-products-header { display:flex; align-items:end; justify-content:space-between; margin-top:2px; }
.spray-products-header span { margin-bottom:6px; color:#718691; font-size:9px; }
.spray-chemical-rows { display:flex; flex-direction:column; gap:7px; }
.spray-chemical-row { display:grid; grid-template-columns:minmax(92px,.85fr) minmax(120px,1.35fr) 28px; gap:6px; align-items:center; }
.spray-product-rate { grid-column:1 / 2; }
.spray-product-unit { grid-column:2 / 4; }
.spray-remove-row { grid-column:3; grid-row:1; }
.spray-chemical-row input,
.spray-chemical-row select { width:100%; min-width:0; padding:0 7px; }
.spray-remove-row { width:28px; height:32px; border:0; border-radius:6px; background:#fff1ef; color:#b42318; font-size:18px; cursor:pointer; }
#addSprayChemicalButton { width:140px; margin-top:8px; }
.spray-clear-button { width:100%; margin-top:7px; border-color:#d3dee3; color:#5b707b; }
.spray-results { margin-top:11px; }
.spray-results-heading { margin-bottom:5px; color:#56717f; font-size:9px; font-weight:900; letter-spacing:.08em; }
.spray-result-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-bottom:1px solid #d7e5e9; background:#f1faf9; font-size:11px; }
.spray-result-row:first-of-type { border-radius:8px 8px 0 0; }
.spray-result-row:last-child { border-bottom:0; border-radius:0 0 8px 8px; }
.spray-result-row strong { color:#007d84; text-align:right; }
.spray-result-error { padding:9px; border-radius:7px; background:#fff1ef; color:#b42318; font-size:11px; font-weight:700; }
.spray-disclaimer { margin:11px 0 0; color:#6c7d85; font-size:9px; font-style:italic; line-height:1.35; }

@media (max-width: 600px) {
    .measure-map-control { width:48px; margin-top:7px !important; }
    .measure-map-control button { width:48px; height:48px; padding:0; }
    .measure-map-control button span { display:none; }
    .measure-map-control svg { width:23px; height:23px; }
    .measure-panel {
        top:auto;
        right:8px;
        bottom:28px;
        left:auto;
        width:min(330px,calc(100vw - 16px));
        max-height:min(68vh, 560px);
        padding:11px;
        border-radius:14px;
        transition:transform .22s ease, opacity .18s ease;
    }
    .measure-panel-collapse { display:inline-grid; place-items:center; }
    .measure-panel.is-collapsed { transform:translateX(calc(100% + 18px)); opacity:0; pointer-events:none; }
    .restore-measure-tab.is-visible { display:flex; }
    .measure-mode-tabs button { min-height:36px; font-size:10px; }
    .measure-choice-prompt { margin:3px 0 8px; gap:8px; font-size:9px; letter-spacing:.09em; }
    .measure-summary { padding:15px 5px 11px; }
    .measure-summary > strong { font-size:23px; }
    .measure-actions button,.measure-primary-button { min-height:39px; }
    .measure-edit-marker span { width:18px; height:18px; border-width:3px; }
    .spray-segmented button { min-height:38px; }
    .spray-chemical-row { grid-template-columns:minmax(92px,.85fr) minmax(120px,1.35fr) 28px; gap:5px; }
    .spray-product-rate { grid-column:1 / 2; }
    .spray-product-unit { grid-column:2 / 4; }
    .spray-remove-row { grid-column:3; grid-row:1; }
    .spray-chemical-row input,.spray-chemical-row select { height:42px; font-size:10px; }
    .pin-drop-control.is-measuring { width:96px !important; }
    .pin-drop-control.is-measuring .pin-drop-toggle { width:96px !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .measure-panel { top:64px; right:8px; bottom:8px; left:auto; width:min(390px,46vw); max-height:none; }
    .measure-panel-collapse { display:inline-grid; place-items:center; }
    .measure-panel.is-collapsed { transform:translateX(calc(100% + 18px)); opacity:0; pointer-events:none; }
    .restore-measure-tab.is-visible { display:flex; }
}

/* FINAL phone-landscape override — keep this after all shared control rules. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .leaflet-center .map-search-control {
        display:grid !important;
        grid-template-columns:150px minmax(0,1fr) !important;
        width:calc(100vw - 150px) !important;
        max-width:640px !important;
        margin-top:10px !important;
        padding:5px !important;
        gap:5px !important;
        border-radius:11px !important;
    }
    .leaflet-center .map-search-tabs { margin:0 !important; gap:3px !important; }
    .leaflet-center .map-search-tab {
        min-width:0 !important;
        min-height:34px !important;
        padding:5px 7px !important;
        font-size:11px !important;
    }
    .leaflet-center .map-address-row,
    .leaflet-center .map-postmile-row { margin:0 !important; }
    .leaflet-center .map-search-input,
    .leaflet-center .map-search-button { height:34px !important; }
    .leaflet-center .map-search-input { padding:0 8px !important; font-size:12px !important; }
    .leaflet-center .map-search-button { padding:0 10px !important; font-size:11px !important; }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded,
    .leaflet-top.leaflet-right .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
    .leaflet-top.leaflet-left .map-center-button {
        width:46px !important;
        min-width:46px !important;
        height:42px !important;
    }
    .layers-button-label,.center-button-label { display:none !important; }
    .leaflet-top.leaflet-left .center-location-control { margin:10px 0 0 10px !important; }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded { margin:10px 10px 0 0 !important; }
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #dce8ee;
  font-family: "Segoe UI", Arial, sans-serif;
}

@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh;
  }
}

body {
  display: flex;
  flex-direction: column;
}

.field-map-header {
  position: relative;
  z-index: 2000;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-left: max(clamp(14px, 1.6vw, 24px), env(safe-area-inset-left));
  padding-right: max(clamp(14px, 1.6vw, 24px), env(safe-area-inset-right));
  color: #fff;
  border-bottom: 4px solid var(--field-gold);
  background: linear-gradient(110deg, var(--field-navy-deep), #086886);
  box-shadow: 0 2px 12px rgba(4, 42, 57, 0.28);
}

.field-map-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.field-map-logo {
  display: block;
  width: 48px;
  height: 30px;
  object-fit: contain;
}

.field-map-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.field-map-title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 164px;
  gap: 3px;
}

.field-map-byline {
  width: 100%;
  overflow: hidden;
  color: rgba(205, 229, 237, 0.62);
  font-size: 7px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.28px;
  white-space: nowrap;
}

.field-map-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #eaf5f8;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
}

.field-map-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #44d57a;
  box-shadow: 0 0 0 3px rgba(68, 213, 122, 0.15);
}

.field-map-status.is-backup .field-map-status-dot {
  background: var(--field-gold);
  box-shadow: 0 0 0 3px rgba(245, 174, 23, 0.17);
}

#map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto !important;
}

/* Let the map fill iPhone landscape edge-to-edge while keeping interactive
   Leaflet controls clear of the notch and rounded screen corners. */
.leaflet-left {
  left: env(safe-area-inset-left);
}

.leaflet-right {
  right: env(safe-area-inset-right);
}

.leaflet-bottom {
  bottom: env(safe-area-inset-bottom);
}

#closurePlannerPanel {
  display: none !important;
}

.map-search-control {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: min(540px, calc(100vw - 150px)) !important;
  padding: 6px !important;
  border: 1px solid rgba(7, 63, 85, 0.22);
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 5px 18px rgba(7, 48, 65, 0.24) !important;
}

.map-search-control.is-follow-hidden {
  display: none !important;
}

.map-search-tabs {
  gap: 5px !important;
  margin: 0 !important;
}

.map-search-tab {
  min-height: 36px;
  border-color: #c8d4da !important;
  border-radius: 6px !important;
  color: #3b505b !important;
  background: #f5f8f9 !important;
  font-family: inherit;
}

.map-address-row,
.map-postmile-row {
  grid-column: 2;
  grid-row: 1;
}

.map-search-results {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
}

.map-search-tab.is-active {
  color: #fff !important;
  border-color: var(--field-blue) !important;
  background: var(--field-blue) !important;
}

.map-search-input,
.map-postmile-field {
  border-color: #afc1ca !important;
  border-radius: 6px !important;
  font-family: inherit;
}

.map-search-input:focus,
.map-postmile-field:focus {
  outline: 3px solid rgba(8, 122, 193, 0.14);
  border-color: var(--field-blue) !important;
}

.map-search-button {
  border-radius: 6px !important;
  background: var(--field-blue) !important;
  font-family: inherit;
  box-shadow: 0 2px 5px rgba(8, 122, 193, 0.22);
}

.leaflet-bar,
.leaflet-control-layers,
.camera-filter-control {
  overflow: hidden;
  border: 1px solid rgba(7, 63, 85, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(7, 48, 65, 0.2) !important;
}

.leaflet-control-layers {
  color: var(--field-text);
  background: rgba(255, 255, 255, 0.98) !important;
  font-family: "Segoe UI", Arial, sans-serif;
}

.leaflet-control-layers-expanded {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0 !important;
  background: #fff !important;
}

.leaflet-control-layers-expanded::before {
  display: none;
}

.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
  position: fixed;
  top: 142px;
  right: 14px;
  left: auto;
  transform: none;
  display: block !important;
  box-sizing: border-box;
  width: min(290px, calc(100vw - 28px));
  max-height: calc(100vh - 185px);
  overflow: auto;
  padding: 12px 13px !important;
  border: 1px solid rgba(7, 63, 85, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 5px 18px rgba(7, 48, 65, 0.24);
}

.leaflet-control-layers-expanded .leaflet-control-layers-list::before {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #d7e1e6;
  color: var(--field-navy);
  content: "Map layers";
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.leaflet-control-layers label {
  margin: 4px 0;
  font-size: 11px;
  font-weight: 700;
}

.leaflet-control-layers-selector {
  accent-color: var(--field-blue);
}

.camera-filter-control {
  color: var(--field-text);
  background: rgba(255, 255, 255, 0.98) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

.camera-filter-label {
  color: var(--field-navy) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.camera-filter-select {
  border-color: #b5c7d0 !important;
  border-radius: 6px !important;
  color: var(--field-text);
  font-family: inherit;
}

.leaflet-popup-content-wrapper {
  overflow: hidden;
  border: 1px solid rgba(7, 63, 85, 0.18);
  border-radius: 12px !important;
  color: var(--field-text);
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 24px rgba(7, 48, 65, 0.24) !important;
  font-family: "Segoe UI", Arial, sans-serif;
}

.leaflet-popup-content {
  margin: 15px 16px !important;
  line-height: 1.45 !important;
}

.leaflet-popup-tip {
  border: 1px solid rgba(7, 63, 85, 0.12);
  background: #fff !important;
}

.leaflet-container a.leaflet-popup-close-button {
  top: 6px !important;
  right: 6px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 7px;
  color: #536a75 !important;
  font-size: 20px !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  background: #edf4f7;
}

.agreement-popup,
.camera-popup {
  color: var(--field-text) !important;
  font-family: inherit !important;
}

.agreement-popup-title,
.camera-popup-title {
  margin: -15px -16px 12px !important;
  padding: 13px 44px 12px 16px;
  color: #fff !important;
  background: var(--field-navy);
  font-size: 15px !important;
  font-weight: 800 !important;
}

.agreement-popup-count,
.camera-popup-details {
  color: #516773 !important;
  font-size: 11px !important;
}

.agreement-card {
  border-color: #cad8de !important;
  border-radius: 8px !important;
  color: var(--field-text) !important;
  background: #f7fafb !important;
}

.agreement-card-heading {
  color: var(--field-navy);
}

.agreement-responsibility {
  border-left: 4px solid var(--field-gold);
  border-radius: 5px !important;
  color: #624200 !important;
  background: #fff4d5 !important;
}

.row-disclaimer {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  color: #667983 !important;
  background: #eef4f6;
  font-size: 9px !important;
}

.camera-popup-badge {
  border-radius: 999px !important;
  background: #536a75 !important;
  font-size: 9px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.camera-popup-badge.is-live,
.camera-popup-link {
  background: var(--field-blue) !important;
}

.camera-media {
  overflow: hidden;
  border-radius: 8px;
}

.camera-popup-link {
  border-radius: 7px !important;
  text-decoration: none !important;
}

#streetViewContainer {
  background: #0b2732 !important;
}

#backToMapButton {
  top: 88px !important;
  left: 18px !important;
  min-height: 42px;
  padding: 0 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important;
  color: #fff;
  background: var(--field-navy) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  font-family: "Segoe UI", Arial, sans-serif;
}

.leaflet-bar a,
.map-center-button {
  color: var(--field-blue) !important;
}

.location-info-panel {
  bottom: 20px !important;
  width: min(680px, calc(100% - 42px)) !important;
  padding: 15px 17px !important;
  border: 1px solid rgba(7, 63, 85, 0.2) !important;
  border-left: 5px solid var(--field-blue) !important;
  border-radius: 12px !important;
  color: var(--field-text);
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 7px 24px rgba(7, 48, 65, 0.27) !important;
  backdrop-filter: blur(6px);
  font-family: inherit !important;
}

.location-panel-title {
  color: var(--field-navy);
  font-size: 16px !important;
  font-weight: 800 !important;
}

.location-panel-label {
  color: #647984 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-panel-value {
  color: #183845;
  font-size: 13px;
  font-weight: 750 !important;
}

.location-panel-close {
  border-radius: 7px !important;
  color: #536a75;
}

.location-panel-close:hover {
  background: #edf4f7 !important;
}

.location-panel-actions {
  border-color: #d8e2e7 !important;
}

.popup-button {
  min-height: 34px;
  padding: 0 12px !important;
  border: 1px solid #b9cad2;
  border-radius: 7px;
  color: var(--field-blue);
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
}

.popup-button:hover {
  color: #fff;
  border-color: var(--field-blue);
  background: var(--field-blue);
}

.leaflet-control-attribution {
  color: #526872;
  background: rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 700px) {
  .field-map-header {
    flex-basis: 48px;
    min-height: 48px;
    padding: 0 10px;
  }

  .field-map-logo {
    width: 42px;
    height: 27px;
  }

  .field-map-title {
    font-size: 15px;
  }

  .field-map-title-block {
    width: 145px;
    gap: 2px;
  }

  .field-map-byline {
    font-size: 6.2px;
    letter-spacing: 0.18px;
  }

  .field-map-status {
    padding: 7px 8px;
    font-size: 0;
  }

  .field-map-status-dot {
    width: 9px;
    height: 9px;
  }

  .map-search-control {
    display: block;
    width: min(280px, calc(100vw - 76px)) !important;
  }

  .map-search-tabs {
    margin-bottom: 6px !important;
  }

  /* Keep the layers button beside the mobile search card. The options list
     remains fixed lower on the right, so only the button moves. */
  .leaflet-top.leaflet-right .leaflet-control-layers {
    margin-top: 10px !important;
    margin-right: 4px !important;
  }

  .leaflet-control-layers-expanded .leaflet-control-layers-list {
    top: 158px;
    right: 10px;
    left: auto;
    width: min(280px, calc(100vw - 20px));
  }

  .location-info-panel {
    bottom: 0 !important;
    width: 100% !important;
    max-height: 48% !important;
    padding: 14px !important;
    border-left: 0 !important;
    border-top: 5px solid var(--field-blue) !important;
    border-radius: 14px 14px 0 0 !important;
  }
}
.drain-inlet-legend {
    display: none;
    min-width: 150px;
    padding: 10px 12px;
    margin: 0 10px 24px 0;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
    color: #17202a;
    font: 12px/1.55 Arial, sans-serif;
}

.drain-inlet-legend.is-visible {
    display: block;
}

.drain-inlet-legend-title {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
}

.drain-inlet-legend > div:not(.drain-inlet-legend-title) {
    white-space: nowrap;
}

.drain-legend-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    border: 1px solid #17202a;
    border-radius: 50%;
    vertical-align: -1px;
}

.drain-good { background: #39b54a; }
.drain-fair { background: #ffd400; }
.drain-poor { background: #e53935; }
.drain-unknown { background: #8a8f98; }

.drain-flow-arrow-wrap {
    background: transparent;
    border: 0;
}

.drain-flow-arrow {
    width: 30px;
    height: 30px;
    color: #00a6d2;
    font-size: 27px;
    font-weight: 900;
    line-height: 30px;
    text-align: center;
    text-shadow:
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transform-origin: center;
}

@media (max-width: 600px) {
    .drain-inlet-legend {
        min-width: 136px;
        margin: 0 6px 18px 0;
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* Professional grouped Layers panel - Option 3 */
.professional-layer-panel::before {
    display: none !important;
    content: none !important;
}

.professional-layer-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid #d6e1e6;
}
.professional-layer-heading > span {
    color:#0b4056;
    font:900 13px/1 "Segoe UI",Arial,sans-serif;
    letter-spacing:.04em;
}
.clear-all-layers-button {
    min-height:27px;
    padding:0 9px;
    border:1px solid #b8ced8;
    border-radius:7px;
    background:#f4f9fa;
    color:#087ac1;
    font:900 9px/1 "Segoe UI",Arial,sans-serif;
    letter-spacing:.035em;
    cursor:pointer;
}
.clear-all-layers-button:hover { border-color:#d92d20; background:#fff1ef; color:#b42318; }

.professional-layer-panel > .leaflet-control-layers-base,
.professional-layer-panel > .leaflet-control-layers-overlays,
.professional-layer-panel > .leaflet-control-layers-separator {
    display: none !important;
}

.layer-accordion-group {
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #d7e0e6;
    border-radius: 8px;
    background: #fff;
}

.layer-accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 39px;
    padding: 7px 9px;
    border: 0;
    background: #f7f9fa;
    color: #17384a;
    font: 700 12px/1.2 "Segoe UI", Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}

.layer-chevron {
    margin-right: 8px;
    font-size: 19px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .16s ease;
}

.layer-accordion-group.is-open .layer-chevron { transform: rotate(90deg); }
.layer-count { margin-left: auto; min-width: 20px; padding: 2px 5px; border-radius: 10px; background: #e6ebef; color: #566672; font-size: 10px; text-align: center; }
.layer-accordion-body { display: none; padding: 5px; border-top: 1px solid #e1e7eb; }
.layer-accordion-group.is-open .layer-accordion-body { display: block; }

.professional-layer-row { margin: 0 !important; border-radius: 6px; }
.professional-layer-row > div { display: flex; align-items: center; min-height: 34px; padding: 3px 6px; border-radius: 6px; color: #2f4858; font-size: 12px; }
.professional-layer-row:hover > div { background: #f2f7f8; }
.professional-layer-row:has(input:checked) > div { background: #fff6e5; box-shadow: inset 3px 0 #f2a000; color: #17384a; font-weight: 700; }
.professional-layer-row input { order: 3; margin-left: auto !important; accent-color: #087ac1; }
.professional-layer-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin-right: 7px; border-radius: 6px; background: #e4f5f4; color: #008b89; font: 800 11px/1 Arial, sans-serif; }
.professional-layer-row:has(input:checked) .professional-layer-icon { background: #fff0cf; color: #bd7100; }

/* Compact icon-only pin control with a hover tooltip. */
.pin-drop-control { width: 38px; height: 38px; margin-top: 7px !important; padding: 0 !important; border-radius: 8px !important; }
.pin-drop-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; gap: 0; }
.pin-drop-icon { color: #087ac1; font: 700 23px/1 Arial, sans-serif; }
.pin-drop-control.is-disabled .pin-drop-icon { color: #6b7781; }
.pin-drop-control.is-disabled .pin-drop-icon::after { content: ""; position: absolute; width: 24px; height: 2px; top: 18px; left: 7px; background: #d92d20; transform: rotate(-45deg); border-radius: 2px; }
.pin-drop-toggle-text { position: absolute; top: 43px; right: 0; width: max-content; padding: 5px 7px; border-radius: 5px; background: #0b4056; color: #fff !important; font: 700 10px/1 Arial, sans-serif; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.pin-drop-toggle:hover .pin-drop-toggle-text { opacity: 1; }

/* Final Option 3 Pin status pill. */
.pin-drop-control { width:82px !important; height:34px !important; padding:0 !important; border-radius:17px !important; background:rgba(255,255,255,.98) !important; }
.pin-drop-toggle { width:82px !important; height:34px !important; padding:0 9px !important; box-sizing:border-box; justify-content:flex-start !important; gap:0 !important; }
.pin-drop-icon { margin-right:5px; color:#087ac1; font-size:17px !important; }
.pin-drop-label { color:#314b59; font:800 10px/1 "Segoe UI",Arial,sans-serif; }
.pin-drop-toggle-text { position:static !important; width:auto !important; margin-left:auto; padding:3px 5px !important; border-radius:8px !important; background:#e4f5f4 !important; color:#08766f !important; font:800 9px/1 Arial,sans-serif !important; opacity:1 !important; }
.pin-drop-control.is-disabled .pin-drop-toggle-text { background:#fde8e5 !important; color:#b42318 !important; }
.pin-drop-control.is-disabled .pin-drop-icon { color:#b42318 !important; }
.pin-drop-control.is-disabled .pin-drop-icon::after { display:none !important; }

/* Matching Option 3 filter cards. */
.camera-filter-control,
.traffic-options-control {
    width: 250px;
    min-width: 250px;
    padding: 10px !important;
    overflow: visible !important;
    border: 1px solid #cfdbe1 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 5px 16px rgba(7,48,65,.18) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}
.field-filter-header {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde5e9;
    color: #17384a;
}
.field-filter-icon,
.traffic-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 6px;
    background: #e4f5f4;
    color: #008b89;
    font: 900 11px/1 Arial, sans-serif;
}
.camera-filter-label,
.traffic-options-title {
    margin: 0 !important;
    color: #17384a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.field-filter-badge {
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 10px;
    background: #e7edf0;
    color: #586b76;
    font-size: 9px;
    font-weight: 800;
}
.camera-help-button { margin-left: auto; }
.camera-county-label {
    display: block;
    padding: 0 4px 8px;
    color: #627681;
    font: 800 9px/1.2 "Segoe UI",Arial,sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.camera-county-select {
    display: block;
    width: 100%;
    height: 31px;
    margin-top: 5px;
    padding: 0 8px;
    border: 1px solid #cbd9df;
    border-radius: 7px;
    background: #fff;
    color: #294755;
    font: 700 10px "Segoe UI",Arial,sans-serif;
    text-transform: none;
}
.camera-filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #eef3f5;
}
.camera-filter-tabs button {
    min-height: 30px;
    padding: 4px 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #52636d;
    font: 700 10px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.camera-filter-tabs button.is-active {
    background: #fff;
    color: #087ac1;
    box-shadow: 0 1px 4px rgba(13,54,70,.18);
}
.camera-icon-popover {
    display: none;
    position: absolute;
    top: 0;
    right: calc(100% + 9px);
    width: 245px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cbd8de;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(7,48,65,.26);
    color: #263f4d;
    z-index: 1200;
}
.camera-filter-control.show-icon-help .camera-icon-popover { display: block !important; }
.camera-help-row { display: flex; align-items: center; gap: 9px; margin: 9px 0; }
.camera-help-row small { display: block; margin-top: 2px; color: #697782; font-size: 10px; }

.traffic-option {
    display: flex !important;
    align-items: center;
    gap: 0 !important;
    min-height: 39px !important;
    padding: 2px 4px;
    border-bottom: 1px solid #edf1f3;
    color: #314b59 !important;
    font-size: 11px !important;
}
.traffic-option:last-of-type { border-bottom: 0; }
.traffic-option span:nth-child(2) { flex: 1; }
.traffic-row-icon { flex-basis: 23px; width: 23px; height: 23px; margin-right: 7px; }
.traffic-option input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 32px;
    width: 32px !important;
    height: 18px !important;
    margin: 0 0 0 7px !important;
    border: 0;
    border-radius: 12px;
    background: #aeb9bf;
    cursor: pointer;
    transition: background .16s ease;
}
.traffic-option input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: left .16s ease;
}
.traffic-option input:checked { background: #087ac1; }
.traffic-option input:checked::after { left: 17px; }
.traffic-options-note { margin-top: 7px !important; padding: 7px 4px 0 !important; border-top: 1px solid #dde5e9 !important; font-size: 9px !important; }
.traffic-county-label { display:block; padding:8px 4px 6px; border-top:1px solid #dde5e9; color:#627681; font:800 9px/1.2 "Segoe UI",Arial,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.traffic-county { display:block; width:100%; height:31px; margin-top:5px; padding:0 8px; border:1px solid #cbd9df; border-radius:7px; background:#fff; color:#294755; font:700 10px "Segoe UI",Arial,sans-serif; text-transform:none; }
.bairs-log-link { margin-top:8px; padding:8px; border:1px solid #d8e3e8; border-radius:8px; background:#f7fafb; }
.bairs-log-heading { display:flex; align-items:center; color:#294755; font:800 10px/1.2 "Segoe UI",Arial,sans-serif; text-transform:uppercase; }
.bairs-log-heading .traffic-row-icon { flex-basis:22px; width:22px; height:22px; margin-right:7px; }
.bairs-open-button,
.bairs-open-button:link,
.bairs-open-button:visited,
.bairs-open-button:hover,
.bairs-open-button:focus,
.bairs-open-button:active { display:flex; align-items:center; justify-content:center; min-height:32px; box-sizing:border-box; margin-top:7px; padding:6px 8px; border:1px solid #087fc0; border-radius:7px; color:#fff !important; background:#087fc0 !important; font:800 9px/1.15 "Segoe UI",Arial,sans-serif; text-align:center; text-decoration:none !important; cursor:pointer; opacity:1 !important; }
.bairs-open-button:hover,
.bairs-open-button:focus { border-color:#056ba3; background:#056fa9 !important; }
.bairs-log-note { margin-top:6px; color:#657984; font:700 8.5px/1.35 "Segoe UI",Arial,sans-serif; }

/* Compact Pin status pill - replaces the prior icon-only square. */
.pin-drop-control {
    width: 82px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.98) !important;
}
.pin-drop-toggle {
    width: 82px !important;
    height: 34px !important;
    padding: 0 9px;
    box-sizing: border-box;
    justify-content: flex-start !important;
}
.pin-drop-icon { margin-right: 5px; color: #087ac1; font-size: 17px !important; }
.pin-drop-label { color: #314b59; font: 800 10px/1 "Segoe UI",Arial,sans-serif; }
.pin-drop-toggle-text {
    position: static !important;
    margin-left: auto;
    padding: 3px 5px !important;
    border-radius: 8px !important;
    background: #e4f5f4 !important;
    color: #08766f !important;
    font-size: 9px !important;
    opacity: 1 !important;
}
.pin-drop-control.is-disabled .pin-drop-toggle-text { background: #fde8e5 !important; color: #b42318 !important; }
.pin-drop-control.is-disabled .pin-drop-icon { color: #b42318 !important; }
.pin-drop-control.is-disabled .pin-drop-icon::after { display: none !important; }

/* Final map-control overrides: keep these after all legacy control rules. */
.camera-filter-control.is-under-layers,
.traffic-options-control.is-under-layers { position: fixed !important; z-index: 1002; margin: 0 !important; }

.leaflet-control-layers,
.leaflet-control-layers-expanded {
    width: 92px !important; min-width: 92px !important; height: 42px !important;
    padding: 0 !important; overflow: visible !important;
    border: 1px solid rgba(7,63,85,.2) !important; border-radius: 11px !important;
    background: rgba(255,255,255,.98) !important; box-shadow: 0 4px 14px rgba(7,48,65,.2) !important;
}
.leaflet-control-layers .leaflet-control-layers-toggle,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: flex !important; align-items: center; justify-content: center;
    width: 92px !important; height: 42px !important; gap: 7px;
    border-radius: 10px; background: #fff !important; color: #17384a; text-decoration: none;
}
.leaflet-control-layers .leaflet-control-layers-toggle:hover,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle:hover { background: #f2f8fa !important; }

.layers-button-icon,.center-button-icon { display:inline-flex; align-items:center; justify-content:center; color:#087ac1; }
.layers-button-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.layers-button-label,.center-button-label { color:#294858; font:800 10px/1 "Segoe UI",Arial,sans-serif; letter-spacing:.035em; }
.leaflet-control-layers-expanded .leaflet-control-layers-list { top:142px !important; right:14px !important; }

.center-location-control { overflow:hidden; border:1px solid rgba(7,63,85,.2) !important; border-radius:11px !important; background:transparent !important; box-shadow:0 4px 14px rgba(7,48,65,.2) !important; }
.center-location-control { position:relative; overflow:visible !important; }
.follow-mode-button {
    position:absolute;
    top:0;
    left:calc(100% + 7px);
    display:none;
    align-items:center;
    justify-content:center;
    width:88px;
    height:42px;
    padding:0 9px;
    gap:6px;
    border:1px solid rgba(7,63,85,.2) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.98) !important;
    color:#087ac1;
    box-shadow:0 4px 14px rgba(7,48,65,.2) !important;
    cursor:pointer;
}
.follow-mode-button.is-visible { display:flex; }
.follow-mode-button:hover { background:#f2f8fa !important; }
.follow-mode-icon { display:inline-flex; width:18px; height:18px; }
.follow-mode-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.follow-mode-label { color:#294858; font:800 9px/1 "Segoe UI",Arial,sans-serif; letter-spacing:.025em; }
.follow-mode-status { width:8px; height:8px; border-radius:50%; background:#aebbc1; box-shadow:0 0 0 3px rgba(174,187,193,.15); }
.follow-mode-button.is-active { border-color:#54bcae !important; background:#f1fbf9 !important; }
.follow-mode-button.is-active .follow-mode-status { background:#20c77a; box-shadow:0 0 0 3px rgba(32,199,122,.16); }
.map-center-button {
    display:flex !important; align-items:center; justify-content:center;
    width:92px !important; height:42px !important; padding:0 10px !important; gap:7px;
    border:0 !important; border-radius:10px !important; background:rgba(255,255,255,.98) !important;
    line-height:1 !important; box-shadow:none !important;
}
.map-center-button:hover { background:#f2f8fa !important; }
.map-center-button .center-button-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.map-center-button .center-button-icon circle { fill:#087ac1; stroke:#087ac1; }
.map-center-button.is-locating .center-button-icon { animation:field-locate-pulse 1s ease-in-out infinite; }
.caltrans-camera-icon,.camera-help-symbol { border-radius:6px !important; }
.caltrans-camera-icon { box-shadow:0 2px 5px rgba(7,48,65,.32) !important; }

@media (max-width:600px) {
    .leaflet-control-layers,.leaflet-control-layers-expanded,
    .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
    .map-center-button { width:42px !important; min-width:42px !important; }
    .layers-button-label,.center-button-label { display:none; }
    .follow-mode-button { width:82px; height:42px; padding:0 8px; gap:5px; }
    .follow-mode-icon,.follow-mode-icon svg { width:17px; height:17px; }
}

/* Phone landscape: a wide viewport is still a phone when its height is short.
   Reserve the left/right control lanes so search never covers Locate/Layers. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .leaflet-center .map-search-control {
        display:grid !important;
        grid-template-columns:150px minmax(0,1fr) !important;
        width:calc(100vw - 150px) !important;
        max-width:640px !important;
        margin-top:10px !important;
        padding:5px !important;
        gap:5px !important;
        border-radius:11px !important;
    }
    .map-search-tabs { margin:0 !important; gap:3px !important; }
    .map-search-tab {
        min-width:0 !important;
        min-height:34px !important;
        padding:5px 7px !important;
        font-size:11px !important;
    }
    .map-address-row,.map-postmile-row { margin:0 !important; }
    .map-search-input,.map-search-button { height:34px !important; }
    .map-search-input { padding:0 8px !important; font-size:12px !important; }
    .map-search-button { padding:0 10px !important; font-size:11px !important; }

    .leaflet-control-layers,.leaflet-control-layers-expanded,
    .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
    .map-center-button {
        width:46px !important;
        min-width:46px !important;
        height:42px !important;
    }
    .layers-button-label,.center-button-label { display:none !important; }
    .leaflet-top.leaflet-left .center-location-control { margin:10px 0 0 10px !important; }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-control-layers { margin:10px 10px 0 0 !important; }
}

/* Sensitive Areas approved-product locator. */
.sensitive-filter-control {
    display:none;
    width:250px;
    min-width:250px;
    box-sizing:border-box;
    padding:10px !important;
    border:1px solid #cfdbe1 !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 5px 16px rgba(7,48,65,.18) !important;
    color:#314b59;
    font-family:"Segoe UI",Arial,sans-serif !important;
}
.sensitive-filter-control.is-visible { display:block; }
.sensitive-filter-control.is-under-layers { position:fixed !important; z-index:1002; margin:0 !important; }
.sensitive-filter-title { color:#17384a; font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.sensitive-filter-label { display:block; margin:0 0 5px; color:#526772; font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.sensitive-product-select {
    width:100%;
    min-height:34px;
    padding:5px 28px 5px 8px;
    border:1px solid #c9d8df;
    border-radius:7px;
    background:#fff;
    color:#263f4d;
    font:700 10px/1.25 "Segoe UI",Arial,sans-serif;
}
.sensitive-filter-nav { display:grid; grid-template-columns:30px 1fr 30px; align-items:center; gap:5px; margin-top:7px; }
.sensitive-filter-nav button { width:30px; height:28px; padding:0; border:1px solid #cbd9df; border-radius:7px; background:#eef6f8; color:#087ac1; font:800 20px/1 Arial,sans-serif; cursor:pointer; }
.sensitive-filter-nav button:disabled { opacity:.35; cursor:default; }
.sensitive-filter-status { color:#425b68; font-size:9px; font-weight:650; line-height:1.3; text-align:center; }
.sensitive-filter-note { margin-top:7px; padding-top:7px; border-top:1px solid #dde5e9; color:#697b84; font-size:8px; line-height:1.3; }

@media (max-width:600px) {
    .sensitive-filter-control.is-mobile-positioned { position:fixed !important; z-index:1002; margin:0 !important; }
    .sensitive-filter-control.is-mobile-layer-hidden { display:none !important; }
    .sensitive-filter-control { width:min(270px,calc(100vw - 20px)) !important; min-width:0 !important; max-height:42vh; padding:8px !important; overflow-y:auto !important; }
}

/* Option 3 light field-ticket popups. */
.leaflet-popup-content-wrapper {
    overflow: hidden !important;
    border: 1px solid rgba(7,63,85,.18) !important;
    border-top: 6px solid #008b89 !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 10px 28px rgba(7,48,65,.24) !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    color: #263f4d !important;
    font: 12px/1.45 "Segoe UI",Arial,sans-serif !important;
}
.agreement-popup,
.camera-popup,
.traffic-event-popup {
    box-sizing: border-box;
    padding: 14px 16px 15px;
    color: #263f4d !important;
}
.agreement-popup-title,
.camera-popup-title,
.traffic-event-popup h3 {
    margin: 0 0 11px !important;
    padding: 0 34px 10px 0 !important;
    border-bottom: 1px solid #dce6ea;
    color: #0b536b !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
.agreement-popup b,
.traffic-event-popup b,
.camera-popup-details b {
    color: #17384a;
    font-weight: 750;
}
.row-disclaimer,
.traffic-source,
.camera-popup-details {
    margin-top: 11px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #59717d !important;
    background: #eef6f8 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}
.sensitive-chemical-section {
    margin-top: 11px !important;
    padding: 10px 11px !important;
    border-left: 4px solid #d92d20 !important;
    border-radius: 8px !important;
    background: #fff1ef !important;
}
.agreement-card {
    margin-top: 10px !important;
    border: 1px solid #d6e1e6 !important;
    border-radius: 9px !important;
    background: #f8fbfc !important;
}
.camera-popup-badge {
    display: inline-flex !important;
    margin: 0 0 9px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
}
.camera-media {
    border: 1px solid #d3dee3;
    border-radius: 9px !important;
}
.traffic-event-popup {
    width: min(350px,calc(100vw - 48px)) !important;
    max-height: min(540px,calc(100vh - 100px));
    overflow-y: auto;
    scrollbar-width: thin;
}
.leaflet-container a.leaflet-popup-close-button {
    top: 11px !important;
    right: 10px !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
    color: #526b77 !important;
    background: #edf4f6;
    line-height: 25px !important;
}
.leaflet-container a.leaflet-popup-close-button:hover { background: #dfecef !important; }
.leaflet-popup-tip { background: #fff !important; }

@media (max-width:600px) {
    .agreement-popup,.camera-popup,.traffic-event-popup { padding: 12px 13px 13px; }
    .agreement-popup-title,.camera-popup-title,.traffic-event-popup h3 { padding-right: 30px !important; }
}

/* Option 3 map action buttons and shared filter-panel collision handling. */
.camera-filter-control.is-under-layers,
.traffic-options-control.is-under-layers {
    position: fixed !important;
    z-index: 1002;
    margin: 0 !important;
}

.leaflet-control-layers,
.leaflet-control-layers-expanded {
    width: 92px !important;
    min-width: 92px !important;
    height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(7, 63, 85, 0.2) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 14px rgba(7, 48, 65, 0.2) !important;
}
.leaflet-control-layers .leaflet-control-layers-toggle,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 92px !important;
    height: 42px !important;
    gap: 7px;
    border-radius: 10px;
    background: #fff !important;
    color: #17384a;
    text-decoration: none;
}
.leaflet-control-layers .leaflet-control-layers-toggle:hover,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle:hover {
    background: #f2f8fa !important;
}
.layers-button-icon,
.center-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #087ac1;
}
.layers-button-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layers-button-label,
.center-button-label { color: #294858; font: 800 10px/1 "Segoe UI", Arial, sans-serif; letter-spacing: .035em; }
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    top: 142px !important;
    right: 14px !important;
}

.center-location-control {
    overflow: hidden;
    border: 1px solid rgba(7, 63, 85, 0.2) !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(7, 48, 65, 0.2) !important;
}
.map-center-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 92px !important;
    height: 42px !important;
    padding: 0 10px !important;
    gap: 7px;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.map-center-button:hover { background: #f2f8fa !important; }
.map-center-button .center-button-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.map-center-button .center-button-icon circle { fill: #087ac1; stroke: #087ac1; }
.map-center-button.is-locating .center-button-icon { animation: field-locate-pulse 1s ease-in-out infinite; }
@keyframes field-locate-pulse { 50% { opacity: .4; transform: scale(.88); } }

@media (max-width: 600px) {
    .leaflet-control-layers,
    .leaflet-control-layers-expanded,
    .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
    .map-center-button { width: 42px !important; min-width: 42px !important; }
    .layers-button-label,
    .center-button-label { display: none; }
}

/* Softer camera markers, matching the rounded Option 3 controls. */
.caltrans-camera-icon {
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(7, 48, 65, 0.32) !important;
}
.camera-help-symbol {
    border-radius: 6px !important;
}

@media (max-width: 600px) {
    .camera-filter-control,
    .traffic-options-control { width: min(240px, calc(100vw - 20px)); min-width: 0; }
    .camera-icon-popover { top: calc(100% + 8px); right: 0; width: min(245px, calc(100vw - 20px)); }
}

/* Camera icon explanation panel. */
.camera-filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.camera-filter-header .camera-filter-label { margin: 0; }
.camera-help-button { width: 22px; height: 22px; padding: 0; border: 1px solid #8ca2ad; border-radius: 50%; background: #fff; color: #0b536b; font: 800 12px/1 Arial, sans-serif; cursor: pointer; }
.camera-icon-help { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #d8e0e4; }
.camera-filter-control.show-icon-help .camera-icon-help { display: block; }
.camera-icon-help-title { margin-bottom: 6px; color: #0b536b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.camera-icon-help > div:not(.camera-icon-help-title):not(.camera-help-note) { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.camera-icon-help small { display: block; margin-top: 2px; color: #697782; font-size: 9px; }
.camera-help-symbol { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 21px; border: 1px solid #111; border-radius: 3px; color: #fff; font-size: 11px; }
.camera-help-symbol.is-live { background: #0877c9; }
.camera-help-symbol.is-picture { background: #f23b3b; }
.camera-help-note { margin-top: 7px; color: #64727d; font-size: 9px; line-height: 1.3; }

/* Chemical warning block inside Sensitive Area popups. */
.sensitive-chemical-section { margin-top: 10px; padding: 8px 9px; border-left: 4px solid #d92d20; border-radius: 5px; background: #fff3f1; }
.sensitive-chemical-heading { margin-bottom: 4px; color: #b42318; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.sensitive-chemical-warning { color: #5d1d17; font-size: 12px; font-weight: 700; line-height: 1.35; }
.sensitive-chemical-product { display:flex; flex-direction:column; gap:1px; }
.sensitive-chemical-product + .sensitive-chemical-product { margin-top:7px; padding-top:7px; border-top:1px solid rgba(180,35,24,.16); }
.sensitive-chemical-product span { font-size:11px; font-weight:600; }

@media (max-width: 600px) {
    .professional-layer-row > div { min-height: 32px; }
    .layer-accordion-header { min-height: 36px; }
}
.map-search-tab-conditional {
    display: none;
}

.map-search-tab-conditional.is-available {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.map-special-search-row {
    display: none;
    gap: 6px;
    width: 100%;
    margin-top: 7px;
}

.map-special-search-row.is-visible {
    display: flex;
}

.map-special-search-field,
.map-special-search-input {
    min-width: 0;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #17202a;
    font-size: 13px;
}

.map-special-search-field {
    flex: 0 0 145px;
    padding: 0 8px;
}

.map-special-search-input {
    flex: 1 1 auto;
    padding: 0 11px;
}

.map-asset-result {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: #17202a;
    text-align: left;
    cursor: pointer;
}

.map-asset-result:hover,
.map-asset-result:focus {
    background: #edf6ff;
}

.map-asset-result span {
    margin-top: 2px;
    color: #5d6876;
    font-size: 11px;
}

.map-search-message.is-error {
    color: #a61b1b;
}

@media (max-width: 600px) {
    .map-search-tabs {
        flex-wrap: wrap;
    }

    .map-special-search-row.is-visible {
        flex-wrap: wrap;
    }

    .map-special-search-field {
        flex: 1 1 42%;
    }

    .map-special-search-input {
        flex: 1 1 50%;
    }
}
.pin-drop-control {
    display: none;
    margin: 8px 10px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.18);
}

.pin-drop-control.is-visible {
    display: block;
}

.pin-drop-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #17202a;
    font: 700 12px/1 Arial, sans-serif;
    cursor: pointer;
    user-select: none;
}

.pin-drop-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pin-drop-toggle-track {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 12px;
    background: #1775bb;
    transition: background 0.18s ease;
}

.pin-drop-toggle-track span {
    position: absolute;
    top: 3px;
    left: 18px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
    transition: left 0.18s ease;
}

.pin-drop-control.is-disabled .pin-drop-toggle-track {
    background: #77818d;
}

.pin-drop-control.is-disabled .pin-drop-toggle-track span {
    left: 3px;
}

.pin-drop-control.is-disabled .pin-drop-toggle-text {
    color: #59636f;
}

@media (max-width: 600px) {
    .pin-drop-control {
        margin-right: 6px;
        padding: 7px 8px;
    }
}
.sensitive-area-legend {
    display: none;
    width: 225px;
    padding: 11px 12px;
    margin: 0 10px 24px 0;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
    color: #17202a;
    font: 12px/1.3 Arial, sans-serif;
}

.sensitive-area-legend.is-visible {
    display: block;
}
.sensitive-area-legend.is-layers-open-hidden { display:none !important; }

.sensitive-area-legend-title {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
}

.sensitive-area-legend > div:not(.sensitive-area-legend-title):not(.sensitive-legend-note) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
}

.sensitive-area-legend small {
    display: block;
    margin-top: 1px;
    color: #5d6876;
    font-size: 10px;
}

.sensitive-legend-line {
    flex: 0 0 27px;
    height: 7px;
    margin-top: 4px;
    border-radius: 4px;
}

.sensitive-red { background: #d92d20; }
.sensitive-orange { background: #f79009; }
.sensitive-yellow { background: #f5d000; }

.sensitive-legend-note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #e2e8f0;
    color: #5d6876;
    font-size: 10px;
}

@media (max-width: 600px) {
    .sensitive-area-legend {
        width: 195px;
        max-height: 170px;
        margin: 0 6px 34px 0;
        padding: 8px 9px;
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        font-size: 10px;
    }
    .sensitive-area-legend-title { margin-bottom: 4px; font-size: 12px; }
    .sensitive-area-legend > div:not(.sensitive-area-legend-title):not(.sensitive-legend-note) { gap: 6px; margin: 4px 0; }
    .sensitive-area-legend small { font-size: 8px; }
    .sensitive-legend-line { flex-basis: 22px; height: 6px; }
    .sensitive-legend-note { margin-top: 5px; padding-top: 5px; font-size: 8px; }
    .sensitive-area-legend::after {
        content: "Scroll for full legend";
        display: block;
        margin-top: 5px;
        color: #7a8991;
        font-size: 7px;
        text-align: right;
    }
}

/* Final Option 3 Pin status pill must follow the legacy toggle rules. */
.pin-drop-control {
    width: 82px !important;
    height: 34px !important;
    margin: 7px 10px 0 0 !important;
    padding: 0 !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.98) !important;
}
.pin-drop-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    width: 82px !important;
    height: 34px !important;
    padding: 0 9px !important;
    box-sizing: border-box;
    gap: 0 !important;
}
.pin-drop-icon {
    margin-right: 5px;
    color: #087ac1;
    font-size: 17px !important;
}
.pin-drop-label {
    color: #314b59;
    font: 800 10px/1 "Segoe UI", Arial, sans-serif;
}
.pin-drop-toggle-text {
    position: static !important;
    width: auto !important;
    margin-left: auto;
    padding: 3px 5px !important;
    border-radius: 8px !important;
    background: #e4f5f4 !important;
    color: #08766f !important;
    font: 800 9px/1 Arial, sans-serif !important;
    opacity: 1 !important;
    pointer-events: none;
}
.pin-drop-control.is-disabled .pin-drop-toggle-text {
    background: #fde8e5 !important;
    color: #b42318 !important;
}
.pin-drop-control.is-disabled .pin-drop-icon { color: #b42318 !important; }
.pin-drop-control.is-disabled .pin-drop-icon::after { display: none !important; }

/* Absolute final overrides for the redesigned map actions. */
.camera-filter-control.is-under-layers,
.traffic-options-control.is-under-layers { position:fixed !important; z-index:1002; margin:0 !important; }
.leaflet-control-layers,.leaflet-control-layers-expanded { width:92px !important; min-width:92px !important; height:42px !important; padding:0 !important; overflow:visible !important; border-radius:11px !important; }
.leaflet-control-layers .leaflet-control-layers-toggle,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display:flex !important; align-items:center; justify-content:center; width:92px !important; height:42px !important; gap:7px; border-radius:10px; background:#fff !important; }
.layers-button-icon,.center-button-icon { display:inline-flex; align-items:center; justify-content:center; color:#087ac1; }
.layers-button-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.layers-button-label,.center-button-label { color:#294858; font:800 10px/1 "Segoe UI",Arial,sans-serif; letter-spacing:.035em; }
.center-location-control { overflow:hidden; border-radius:11px !important; }

/* Street View drop control */
.street-view-drop-control {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.street-view-drop-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(7, 63, 85, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #0798ad;
    box-shadow: 0 5px 16px rgba(7, 48, 65, .20);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}

.street-view-drop-button:hover,
.street-view-drop-button.is-armed {
    color: #fff;
    background: #0789b8;
    transform: translateY(-1px);
}

.street-view-drop-button.is-armed {
    opacity: .18;
    transform: scale(.88);
}

.street-view-drop-button:active { cursor: grabbing; }
.street-view-drop-button svg { width: 24px; height: 24px; fill: currentColor; }

.street-view-drop-tip {
    position: absolute;
    left: 50px;
    top: 2px;
    width: max-content;
    max-width: 210px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #073f55;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 5px 16px rgba(7, 48, 65, .22);
    pointer-events: none;
}

.street-view-placement-layer {
    position: absolute;
    inset: 0;
    z-index: 899;
    /* Worker appears only while choosing the Street View drop point. */
    cursor: url("assets/street-view-worker.png") 14 45, crosshair;
    background: rgba(0, 151, 178, .025);
}

.street-view-placement-layer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: none;
}

.street-view-drop-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid #008fc7;
    border-radius: 50%;
    background: rgba(0, 174, 230, .34);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .92),
        0 0 0 5px rgba(0, 174, 230, .22),
        0 4px 8px rgba(0, 68, 94, .30);
    z-index: 2;
    transform: translate(-100px, -100px);
    pointer-events: none;
}

.street-view-drop-target::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #006eaa;
}

.street-view-placement-layer.is-snapping::after {
    content: "Finding the nearest road…";
    display: block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(7, 63, 85, .94);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}

@media (max-width: 700px) {
    .street-view-drop-button { width: 40px; height: 40px; }
    .street-view-drop-tip { left: 46px; max-width: 175px; }
    .street-view-placement-layer::after { bottom: 18px; font-size: 11px; }
    .street-view-drop-target { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}
.map-center-button { display:flex !important; align-items:center; justify-content:center; width:92px !important; height:42px !important; padding:0 10px !important; gap:7px; border:0 !important; border-radius:10px !important; background:rgba(255,255,255,.98) !important; line-height:1 !important; }
.map-center-button .center-button-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.map-center-button .center-button-icon circle { fill:#087ac1; stroke:#087ac1; }
.caltrans-camera-icon,.camera-help-symbol { border-radius:6px !important; }
.caltrans-camera-icon { box-shadow:0 2px 5px rgba(7,48,65,.32) !important; }
@media (max-width:600px) {
    .leaflet-control-layers,.leaflet-control-layers-expanded,
    .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-control-layers-expanded .leaflet-control-layers-toggle,.map-center-button { width:42px !important; min-width:42px !important; }
    .layers-button-label,.center-button-label { display:none; }
}

/* Final Option 3 light field-ticket popup overrides. */
.leaflet-popup-content-wrapper { overflow:hidden !important; border:1px solid rgba(7,63,85,.18) !important; border-top:6px solid #008b89 !important; border-radius:13px !important; background:rgba(255,255,255,.99) !important; box-shadow:0 10px 28px rgba(7,48,65,.24) !important; }
.leaflet-popup-content { margin:0 !important; color:#263f4d !important; font:12px/1.45 "Segoe UI",Arial,sans-serif !important; }
.agreement-popup,.camera-popup,.traffic-event-popup { box-sizing:border-box; padding:14px 16px 15px; color:#263f4d !important; }
.agreement-popup-title,.camera-popup-title,.traffic-event-popup h3 { margin:0 0 11px !important; padding:0 34px 10px 0 !important; border-bottom:1px solid #dce6ea; color:#0b536b !important; background:transparent !important; font-size:15px !important; font-weight:800 !important; line-height:1.25 !important; }
.agreement-popup b,.traffic-event-popup b,.camera-popup-details b { color:#17384a; font-weight:750; }
.row-disclaimer,.traffic-source,.camera-popup-details { margin-top:11px !important; padding:9px 10px !important; border:0 !important; border-radius:8px !important; color:#59717d !important; background:#eef6f8 !important; font-size:10px !important; line-height:1.35 !important; }
.sensitive-chemical-section { margin-top:11px !important; padding:10px 11px !important; border-left:4px solid #d92d20 !important; border-radius:8px !important; background:#fff1ef !important; }
.agreement-card { margin-top:10px !important; border:1px solid #d6e1e6 !important; border-radius:9px !important; background:#f8fbfc !important; }
.camera-popup-badge { display:inline-flex !important; margin:0 0 9px !important; padding:4px 8px !important; border-radius:999px !important; }
.camera-media { border:1px solid #d3dee3; border-radius:9px !important; }
.traffic-event-popup { width:min(350px,calc(100vw - 48px)) !important; max-height:min(540px,calc(100vh - 100px)); overflow-y:auto; scrollbar-width:thin; }
.leaflet-container a.leaflet-popup-close-button { top:11px !important; right:10px !important; width:27px !important; height:27px !important; border-radius:8px !important; color:#526b77 !important; background:#edf4f6; line-height:25px !important; }
.leaflet-container a.leaflet-popup-close-button:hover { background:#dfecef !important; }
.leaflet-popup-tip { background:#fff !important; }
@media (max-width:600px) {
    .agreement-popup,.camera-popup,.traffic-event-popup { padding:12px 13px 13px; }
    .agreement-popup-title,.camera-popup-title,.traffic-event-popup h3 { padding-right:30px !important; }
}

/* Final compact phone layout. Desktop positioning remains unchanged. */
@media (max-width:600px) {
    .leaflet-center .map-search-control {
        width:calc(100vw - 20px) !important;
        margin-top:10px !important;
        padding:6px !important;
        border-radius:11px !important;
    }
    .map-search-tabs {
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:4px !important;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .map-search-tabs::-webkit-scrollbar { display:none; }
    .map-search-tab {
        flex:1 0 auto !important;
        min-width:82px;
        min-height:34px !important;
        padding:5px 8px !important;
        font-size:11px !important;
    }
    .map-search-row { gap:5px !important; }
    .map-search-input { height:34px !important; padding:0 8px !important; font-size:12px !important; }
    .map-search-button { height:34px !important; padding:0 10px !important; font-size:11px !important; }

    .leaflet-top.leaflet-left .center-location-control {
        margin:100px 0 0 10px !important;
    }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-control-layers {
        margin:100px 10px 0 0 !important;
    }
    .leaflet-control-layers-expanded .leaflet-control-layers-list {
        width:min(300px,calc(100vw - 20px)) !important;
        padding:9px !important;
        border-radius:11px !important;
        overscroll-behavior:contain;
    }
    .professional-layer-heading { margin-bottom:6px; padding-bottom:6px; }
    .professional-layer-heading > span { font-size:11px; }
    .clear-all-layers-button { min-height:25px; padding:0 7px; font-size:8px; }
    .layer-accordion-group { margin-top:6px !important; }
    .layer-accordion-header { min-height:32px !important; padding:5px 7px !important; font-size:11px !important; }
    .layer-accordion-body { padding:3px !important; }
    .professional-layer-row > div { min-height:29px !important; padding:2px 4px !important; font-size:10px !important; }
    .professional-layer-icon { flex-basis:21px !important; width:21px !important; height:21px !important; margin-right:5px !important; }

    .camera-filter-control.is-mobile-positioned,
    .traffic-options-control.is-mobile-positioned,
    .pin-drop-control.is-mobile-positioned {
        position:fixed !important;
        z-index:1002;
        margin:0 !important;
    }
    .camera-filter-control.is-mobile-layer-hidden,
    .traffic-options-control.is-mobile-layer-hidden,
    .pin-drop-control.is-mobile-layer-hidden { display:none !important; }
    .camera-filter-control,
    .traffic-options-control {
        width:min(245px,calc(100vw - 20px)) !important;
        min-width:0 !important;
        max-width:none !important;
        max-height:42vh;
        padding:8px !important;
        overflow-y:auto !important;
    }
    .field-filter-header { min-height:25px !important; margin-bottom:6px !important; padding-bottom:6px !important; }
    .camera-filter-tabs button { min-height:27px !important; }
    .traffic-option { min-height:33px !important; }
    .pin-drop-control { width:74px !important; height:32px !important; }
    .pin-drop-toggle { width:74px !important; height:32px !important; padding:0 7px !important; }

    .drain-inlet-legend {
        min-width:0 !important;
        width:118px;
        margin:0 6px 20px 0 !important;
        padding:6px 7px !important;
        border-radius:9px !important;
        font-size:9px !important;
        line-height:1.35 !important;
    }
    .drain-inlet-legend-title { margin-bottom:3px !important; font-size:10px !important; }
    .drain-legend-dot { width:8px !important; height:8px !important; margin-right:4px !important; }
    .leaflet-control-attribution { max-width:100%; font-size:8px !important; line-height:1.15 !important; }
}

/* FINAL phone-landscape override — intentionally last in this stylesheet. */
@media (orientation: landscape) and (max-height:520px) and (max-width:950px) {
    .leaflet-center .map-search-control {
        display:grid !important;
        grid-template-columns:150px minmax(0,1fr) !important;
        width:calc(100vw - 150px) !important;
        max-width:640px !important;
        margin-top:10px !important;
        padding:5px !important;
        gap:5px !important;
        border-radius:11px !important;
    }
    .leaflet-center .map-search-tabs { margin:0 !important; gap:3px !important; }
    .leaflet-center .map-search-tab { min-width:0 !important; min-height:34px !important; padding:5px 7px !important; font-size:11px !important; }
    .leaflet-center .map-address-row,.leaflet-center .map-postmile-row { margin:0 !important; }
    .leaflet-center .map-search-input,.leaflet-center .map-search-button { height:34px !important; }
    .leaflet-center .map-search-input { padding:0 8px !important; font-size:12px !important; }
    .leaflet-center .map-search-button { padding:0 10px !important; font-size:11px !important; }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded,
    .leaflet-top.leaflet-right .leaflet-control-layers .leaflet-control-layers-toggle,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
    .leaflet-top.leaflet-left .map-center-button { width:46px !important; min-width:46px !important; height:42px !important; }
    .layers-button-label,.center-button-label { display:none !important; }
    .leaflet-top.leaflet-left .center-location-control { margin:10px 0 0 10px !important; }
    .leaflet-top.leaflet-right .leaflet-control-layers,
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded { margin:10px 10px 0 0 !important; }
}

/* Right-of-way source-color explanation. */
.right-of-way-legend {
    display:none;
    box-sizing:border-box;
    width:230px;
    margin:0 12px 28px 0 !important;
    padding:11px 12px !important;
    border:1px solid rgba(7,63,85,.16);
    border-radius:12px;
    color:#294858;
    background:rgba(255,255,255,.97);
    box-shadow:0 8px 24px rgba(7,48,65,.20);
    font:11px/1.35 "Segoe UI",Arial,sans-serif;
}
.right-of-way-legend.is-visible { display:block; }
.right-of-way-legend.is-beside-layers {
    position:fixed !important;
    z-index:1002;
    bottom:28px !important;
    margin:0 !important;
}
.right-of-way-legend-title {
    margin-bottom:8px;
    padding-bottom:7px;
    border-bottom:1px solid #dce6ea;
    color:#0b536b;
    font-size:13px;
    font-weight:800;
}
.right-of-way-legend-summary {
    margin:0 0 8px;
    padding:7px 8px;
    border-radius:7px;
    color:#294858;
    background:#eaf5fb;
    font-size:10px;
    line-height:1.35;
}
.right-of-way-legend > div:not(.right-of-way-legend-title):not(.right-of-way-legend-note):not(.right-of-way-load-status) {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:7px 0;
}
.right-of-way-legend small { display:block; margin-top:1px; color:#637984; }
.row-legend-line { flex:0 0 27px; margin-top:7px; border-top:4px solid; border-radius:99px; }
.row-vector { border-color:#005fd1; }
.row-raster { border-color:#00a88f; }
.right-of-way-legend-note {
    margin-top:8px;
    padding:7px 8px;
    border-radius:7px;
    color:#59717d;
    background:#eef6f8;
    font-size:9px;
    line-height:1.35;
}
.right-of-way-load-status { margin-top:7px; padding:6px 7px; border-radius:7px; color:#607984; background:#f0f5f7; font-size:9px; font-weight:700; line-height:1.3; }
.right-of-way-load-status.is-loading { color:#086b91; background:#eaf6fb; }
.right-of-way-load-status.is-success { color:#087451; background:#eaf8f2; }
.right-of-way-load-status.is-notice { color:#775d12; background:#fff8df; }
.right-of-way-load-status.is-error { color:#a52b20; background:#fff0ee; }
.row-record-details { margin-top:7px; padding:6px 7px; border-radius:7px; background:#eef6f8; color:#486572; }
.row-record-details summary { color:#0876a5; font-weight:800; cursor:pointer; }
.row-record-details[open] summary { margin-bottom:5px; }

/* Mobile map-panel drawers. Desktop controls remain unchanged. */
.mobile-panel-collapse-button,
.mobile-panel-restore-tab {
    display: none;
}

@media (max-width:600px), (orientation:landscape) and (max-height:520px) {
    .mobile-drawer-panel .field-filter-header,
    .mobile-drawer-panel .sensitive-area-legend-title,
    .mobile-drawer-panel .drain-inlet-legend-title,
    .mobile-drawer-panel .right-of-way-legend-title {
        display: flex;
        align-items: center;
    }
    .mobile-panel-collapse-button {
        display: inline-grid;
        place-items: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        margin: -2px 0 -2px auto;
        padding: 0;
        border: 1px solid #b9ced8;
        border-radius: 9px;
        color: #087fb7;
        background: #f6fbfd;
        box-shadow: none;
        font: 900 20px/1 Arial,sans-serif;
        cursor: pointer;
    }
    .mobile-panel-collapse-button:active { background:#e5f4f9; }

    .mobile-drawer-panel {
        transition: transform .22s ease, opacity .18s ease !important;
    }
    .mobile-drawer-panel.mobile-panel-collapsed {
        transform: translateX(calc(100vw + 30px)) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .mobile-panel-restore-tab.is-visible {
        position: fixed;
        right: 0;
        top: var(--mobile-tab-top, 48%);
        z-index: 1900;
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 44px;
        max-width: 118px;
        padding: 8px 7px 8px 9px;
        border: 1px solid #b9ced8;
        border-right: 0;
        border-radius: 13px 0 0 13px;
        color: #0b536b;
        background: rgba(255,255,255,.97);
        box-shadow: 0 5px 16px rgba(7,48,65,.22);
        font: 800 9px/1.1 "Segoe UI",Arial,sans-serif;
        text-transform: uppercase;
        cursor: pointer;
    }
    .mobile-panel-restore-tab .mobile-restore-arrow {
        color: #0787bd;
        font-size: 19px;
        line-height: 1;
    }
}
@media (max-width:600px), (orientation:landscape) and (max-height:520px) {
    .right-of-way-legend {
        width:190px;
        margin:0 7px 20px 0 !important;
        padding:8px 9px !important;
        font-size:9px;
    }
    .right-of-way-legend-title { margin-bottom:5px; padding-bottom:5px; font-size:11px; }
    .right-of-way-legend-summary { margin-bottom:5px; padding:5px 6px; font-size:8px; }
    .right-of-way-legend > div:not(.right-of-way-legend-title):not(.right-of-way-legend-note):not(.right-of-way-load-status) { gap:6px; margin:5px 0; }
    .row-legend-line { flex-basis:22px; border-top-width:3px; }
}

/* iPhone landscape: use the safe-area space and keep Follow clear of search. */
@media (orientation:landscape) and (max-height:520px) {
    html { overflow:hidden !important; }
    body {
        width:calc(100% + env(safe-area-inset-left) + env(safe-area-inset-right)) !important;
        max-width:none !important;
        margin-left:calc(0px - env(safe-area-inset-left)) !important;
        overflow:hidden !important;
    }
    .center-location-control .follow-mode-button {
        top:calc(100% + 15px) !important;
        left:calc(100% + 8px) !important;
        right:auto !important;
    }
}

/* R49: Desktop Postmile search spacing — give Route and Direction enough room. */
@media (min-width: 951px) and (min-height: 521px) {
  body:not(.installed-app-only) .leaflet-center .map-search-control {
    grid-template-columns: 250px minmax(0, 1fr) !important;
    width: min(820px, calc(100vw - 180px)) !important;
    max-width: 820px !important;
  }
  body:not(.installed-app-only) .leaflet-center .map-postmile-row {
    grid-template-columns: 110px 125px minmax(190px, 1fr) auto !important;
    gap: 7px !important;
  }
  body:not(.installed-app-only) .leaflet-center .map-postmile-route,
  body:not(.installed-app-only) .leaflet-center .map-postmile-direction {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
  }
  body:not(.installed-app-only) .leaflet-center .map-postmile-input {
    min-width: 190px !important;
  }
}

/* Paving calculator */
.paving-area-summary{text-align:center;padding:12px 6px;border-bottom:1px solid #d9e3e7}.paving-area-summary span,.paving-area-summary small{display:block;color:#607887;font-size:10px;font-weight:900}.paving-area-summary strong{display:block;margin:5px 0;color:#00a0a8;font-size:22px}.paving-depth-options{grid-template-columns:repeat(4,1fr)!important}.paving-field{margin-top:9px}.paving-field label{display:block;margin-bottom:4px;color:#58717e;font-size:9px;font-weight:900}.paving-field input{box-sizing:border-box;width:100%;min-height:38px;padding:7px 9px;border:1px solid #bfd0d8;border-radius:7px;font:800 13px Segoe UI,Arial}.paving-results{margin-top:13px;border-top:1px solid #d9e3e7;padding-top:7px}.paving-results>div{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;font-size:11px}.paving-results b{color:#173d50}.paving-results .paving-total{font-size:13px}.paving-results .paving-total b{color:#00a0a8}.paving-location{margin-top:9px;padding:9px;border-radius:7px;background:#eef5f7;color:#365464;font-size:10px;line-height:1.45}.paving-export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.paving-export-actions button{min-height:39px}.spray-clear-button{width:100%;margin-top:8px;min-height:39px}

/* R60: cleaner paving lane dropdown */
#pavingLaneSelect {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 36px 9px 12px;
  border: 1px solid rgba(96, 115, 137, 0.35);
  border-radius: 10px;
  background: var(--panel-bg, #fff);
  color: inherit;
  font: inherit;
  font-weight: 600;
}
#pavingLaneSelect:focus {
  outline: 2px solid rgba(30, 112, 214, 0.28);
  outline-offset: 1px;
}
/* R75 paving PDF action should match full-width Clear Drawing button */
.paving-export-actions{display:block!important;width:100%!important;grid-template-columns:none!important}
.paving-export-actions #pavingPdfButton{display:block!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box!important}