/* ── BASE ──────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%;overflow:hidden;background:var(--bg);font-family:Calibri,'Trebuchet MS',sans-serif;font-size:14px;color:var(--text)}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none;-webkit-appearance:none;cursor:pointer}

/* ── ACCESS GATE ───────────────────────────────────────── */

.accessScreen{position:fixed;inset:0;z-index:9000;background:linear-gradient(160deg,#0f172a,#1e3a8a);display:flex;align-items:center;justify-content:center;padding:20px}

.accessCard{width:100%;max-width:380px;background:#fff;border-radius:24px;padding:32px 24px;box-shadow:0 24px 60px rgba(0,0,0,.4);text-align:center}

.accessLogo{font-size:22px;font-weight:900;letter-spacing:.12em;color:var(--blue);margin-bottom:4px}

.accessTagline{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}

.accessInstructions{font-size:14px;color:#475569;margin-bottom:16px}

.accessInput{width:100%;height:52px;border:2px solid var(--line);border-radius:14px;padding:0 16px;font-size:20px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:12px;background:var(--soft)}

.accessInput:focus{border-color:var(--blue)}

.accessButton{width:100%;height:52px;background:var(--blue);color:#fff;border:0;border-radius:14px;font-size:16px;font-weight:900;letter-spacing:.08em;margin-bottom:12px}

.accessError{font-size:13px;color:var(--red);font-weight:700;min-height:18px}

/* ── APP SHELL ─────────────────────────────────────────── */

#appShell{display:flex;flex-direction:column;height:100dvh;overflow:hidden;position:relative}

.syncPill{}

/* ── MAP ───────────────────────────────────────────────── */

#mapStage{flex:1;position:relative;overflow:hidden}

#map{width:100%;height:100%}

.gpsBanner{position:absolute;top:0;left:0;right:0;z-index:800;background:rgba(220,38,38,.94);color:#fff;text-align:center;padding:8px;font-weight:900;font-size:13px}

.zoomButton{position:absolute;right:12px;z-index:800;width:42px;height:42px;background:#fff;border:1px solid var(--line);border-radius:11px;font-size:22px;font-weight:300;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}

.zoomIn{top:12px}

.zoomOut{top:62px}

.satToggle{top:112px;font-size:18px}
.satToggleLabel{font-size:12px;font-weight:900;color:#1e3a8a;letter-spacing:0.04em}
.satToggle.active{background:var(--brand-blue);color:#fff}
.satToggle.active .satToggleLabel{color:#fff}
.headingToggle { top: 162px; font-size:18px}
.followToggle{top:212px;font-size:18px;color:#1e3a8a}
.followToggle.active{background:var(--brand-blue);color:#fff}
.headingToggleLabel{font-size:13px;font-weight:900;color:#1e3a8a;letter-spacing:0.02em}
.headingToggle.active{background:var(--brand-blue);color:#fff}
.headingToggle.active .headingToggleLabel{color:#fff}

.addrSearchBar{display:flex;align-items:center;gap:4px;height:48px;background:#fff;border:0.5px solid var(--line);border-radius:24px;padding:0 8px 0 6px;box-shadow:0 2px 10px rgba(0,0,0,.18);min-width:0;width:100%}
.addrSearchBar.hidden{display:none}
.addrSearchIcon{flex:none;width:36px;height:36px;border:none;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border-radius:50%}
.addrSearchIcon:active{background:var(--soft)}
.addrSearchInput{flex:1;min-width:0;height:100%;border:none;background:transparent;padding:0;margin:0;font-size:16px;font-weight:600;color:var(--text);width:auto;text-transform:none;letter-spacing:0;box-shadow:none;border-radius:0}
.addrSearchInput:focus{outline:none;box-shadow:none}
.mapLineButtons{display:flex;align-items:center;gap:10px;justify-self:start}
.findIcon{font-size:22px;line-height:1}

.mapOpacityCtrl{position:absolute;left:12px;bottom:12px;z-index:800;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:6px 12px;display:flex;align-items:center;gap:10px;backdrop-filter:saturate(140%) blur(2px)}
.mapOpacityLabel{font-size:12px;font-weight:900;color:#0f172a;letter-spacing:0.06em;flex-shrink:0}
.mapOpacityVal{font-size:15px;font-weight:900;color:#0f172a;min-width:46px;text-align:center;flex-shrink:0}
.opacityStepBtn{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px;font-weight:900;line-height:1;padding:0;cursor:pointer;color:var(--brand-blue);display:flex;align-items:center;justify-content:center}
.opacityStepBtn:active{background:#dbeafe}
.satToggleBtn{height:32px;padding:0 11px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.04em;line-height:1;cursor:pointer;color:var(--brand-blue);display:flex;align-items:center;justify-content:center}
.satToggleBtn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}

.mapHailLegend{position:absolute;left:230px;bottom:12px;z-index:800;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:6px 8px;display:flex;align-items:center;gap:4px;backdrop-filter:saturate(140%) blur(2px)}
.mapLegendChip{min-width:38px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0 4px}
.mapLegendChip b{font-size:12px;font-weight:900;line-height:1}

@media (max-width: 720px) {
  /* v6.9.18: drop the stacked controls down toward the bottom edge — the hail
     screen has no field bar below them, so the earlier lift left a big empty
     gap. Legend sits just above opacity, opacity just above the safe-area. */
  .mapHailLegend{left:12px;right:12px;top:auto;bottom:calc(130px + var(--safe-bottom, 0px));padding:7px 10px;gap:5px;justify-content:space-between;box-sizing:border-box}
  .mapOpacityCtrl{left:12px;right:12px;bottom:calc(184px + var(--safe-bottom, 0px));padding:7px 10px;gap:10px;justify-content:flex-start;box-sizing:border-box}
  /* v7.37: legend + opacity stack ABOVE the bottom control row (search/▲/buttons) so they never collide with it */
  .mapLegendChip{flex:1;min-width:0;height:34px}
  .mapLegendChip b{font-size:12px}
  .opacityStepBtn{width:34px;height:34px}
  .satToggleBtn{height:34px}
}

#batteryBanner{top:0}

.fieldButton span{font-size:30px;line-height:1}

@media(max-height:680px){.fieldButton span{font-size:23px}.fieldButton b{font-size:10px}}

/* ── SHEET ─────────────────────────────────────────────── */

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 36px rgba(15,23,42,.24);transform:translateY(110%);transition:transform .22s ease;max-height:92dvh;padding-bottom:var(--safe-bottom)}

.sheet.open{transform:translateY(0)}

.sheetBody{padding:18px 13px 16px;overflow:auto;max-height:calc(92dvh - 22px)}

.sheetTitleRow h2{font-size:20px;line-height:1.15;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:76vw}

.sheetTitleRow p{margin:0;color:var(--muted);font-size:12px}

.iconButton{margin-left:auto;border:0;background:#fee2e2;color:var(--red);border-radius:10px;width:42px;height:38px;font-size:28px;font-weight:900}

.iconButton.small{width:36px;height:36px;font-size:22px;background:var(--soft);color:var(--muted)}

/* ── STATUS BUTTONS ────────────────────────────────────── */

.statusGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 8px}

.statusButton{height:62px;border:2px solid var(--line);border-radius:11px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}

.statusButton span{font-size:20px}

.statusButton b{font-size:9px}

.statusButton.deal{border-color:#d97706}

.statusButton.hotlead{border-color:#e11d48}

.statusButton.noanswer{border-color:#16a34a}

.statusButton.no{border-color:#dc2626}

.statusButton.dnk{border-color:#111827}

.statusButton.selected.deal{background:#d97706;color:#fff;border-color:#d97706}

.statusButton.selected.hotlead{background:#e11d48;color:#fff;border-color:#e11d48}

.statusButton.selected.noanswer{background:#16a34a;color:#fff;border-color:#16a34a}

.statusButton.selected.no{background:#dc2626;color:#fff;border-color:#dc2626}

.statusButton.selected.dnk{background:#111827;color:#fff;border-color:#111827}

/* ── INPUTS ────────────────────────────────────────────── */

textarea,input,select{width:100%;border:1.5px solid var(--line);border-radius:11px;background:var(--soft);padding:10px;color:var(--text)}

textarea{resize:none;margin-bottom:7px}

.compactGrid{display:grid;gap:7px;margin-bottom:7px}

.compactGrid.two{grid-template-columns:1fr 1fr}

.plateGrid{grid-template-columns:2fr 1fr}

/* ── SHEET ACTIONS ─────────────────────────────────────── */

.sheetActions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:8px}

.actionButton{height:46px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-weight:900;font-size:13px}

.actionButton.save{background:var(--blue);border-color:var(--blue);color:#fff;grid-column:1/-1}

.actionButton.navigate{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}

.actionButton.danger{background:#fff1f2;border-color:#fecdd3;color:var(--red)}

.conflictBadge{margin:7px 0;padding:8px 11px;background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;font-size:12px;font-weight:900;color:#92400e}

/* ── PANELS ────────────────────────────────────────────── */

.panel{position:fixed;inset:0;z-index:2500;background:var(--soft);display:none;flex-direction:column;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}

.panel.open{display:flex}

.panelHeader{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0}

.panelHeader h2{margin:0;font-size:16px;color:var(--blue);letter-spacing:.08em;text-transform:uppercase}

.backButton{height:42px;border:1.5px solid #e2e8f0;background:#ffffff;color:#1d4ed8;border-radius:11px;padding:0 15px;font-weight:900;font-size:16px}

.filterTabs{display:flex;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0}

.filterTabs button{flex-shrink:0;border:0;background:#fff;padding:13px 11px;font-size:12px;font-weight:900;color:var(--muted);border-bottom:3px solid transparent}

.filterTabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
/* v7.76 Chunk 2b: Archive sort controls -> standard blue-bar segmented control (scoped to #historyFilters only; Visits/Route filterTabs untouched) */
#historyFilters{background:#1d4ed8;border-bottom:none;border-radius:13px;padding:4px;gap:3px;margin:8px 12px;overflow:hidden}
#historyFilters button{flex:1;background:rgba(255,255,255,.22);color:#fff;border:none;border-bottom:none;border-radius:9px;padding:11px 4px;font-size:12.5px;font-weight:900}
#historyFilters button.active{background:#fff;color:#1d4ed8;border-bottom:none}

.listTools span{flex:1}

.listTools button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 9px;font-weight:900;font-size:11px}

.stopList,.mapsList{overflow:auto;flex:1}

.stopItem{display:flex;align-items:flex-start;gap:9px;padding:12px;border-bottom:1px solid var(--line);background:#fff;width:100%;text-align:left;cursor:pointer}

.dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0}

.stopInfo{min-width:0;flex:1}

.stopInfo b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stopInfo span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.tag{font-size:10px;font-weight:900;border:1px solid currentColor;border-radius:999px;padding:3px 7px;white-space:nowrap}

.toolList,.settingsBody{padding:12px;overflow:auto}

.toolList { display:flex; flex-direction:column; gap:10px }

.toolItem span{display:block;color:var(--muted);font-size:14px;line-height:1.4}

/* ── MAPS PANEL ────────────────────────────────────────── */

.mapItem{display:flex;align-items:center;border-bottom:1px solid var(--line)}

.mapItem.active{background:#eff6ff}

.mapItemMain{flex:1;padding:14px 12px;text-align:left;background:transparent;border:0}

.mapRenameBtn{width:44px;height:44px;background:transparent;border:0;color:var(--blue);font-size:18px;border-radius:8px}
.mapShareBtn{width:44px;height:44px;background:transparent;border:0;color:var(--blue);font-size:18px;border-radius:8px}
.mapShareBtn:active{background:#dbeafe}
.mapUnlinkBtn{width:44px;height:44px;background:transparent;border:0;font-size:18px;border-radius:8px;filter:grayscale(1) opacity(0.7)}
.mapUnlinkBtn:active{background:#fee2e2}

.mapDeleteBtn{width:44px;height:44px;background:transparent;border:0;color:var(--red);font-size:18px;font-weight:900;border-radius:8px}

.settingsBody input,.settingsBody select{margin-top:6px;font-size:16px}

.wideButton{width:100%;height:46px;border:0;border-radius:13px;background:var(--blue);color:#fff;font-weight:900;margin-top:8px;cursor:pointer}

.wideButton.secondary{background:var(--soft);color:var(--muted);border:1px solid var(--line)}

.versionTag{margin-top:14px;text-align:center;color:#94a3b8;font-size:11px;letter-spacing:.05em;font-weight:700}

.valueHeader div{min-width:0;flex:1}

.valueHeader h2{font-size:18px;margin:0;color:var(--blue);letter-spacing:.08em;text-transform:uppercase}

.valueHelper{margin:8px 0 14px;font-size:12px;line-height:1.35;color:var(--muted)}

.scanRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}

.scanStatus{min-height:16px;margin:-4px 0 10px;font-size:12px;font-weight:700;color:var(--muted);line-height:1.4}

.valueHomeActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.valueHomeActions .homeActionButton{margin-bottom:0 !important;padding:10px 14px !important}
.valueHomeActions #openSupportFromHome{grid-column:1 / -1;width:calc(50% - 4px);justify-self:center}

/* ── ROUTE / WEATHER CONTENT ───────────────────────────── */

.intelContent{font-family:'Courier New',monospace;font-size:14px;line-height:1.6;white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;color:#1e293b;min-height:120px;font-weight:600}

/* ── MODAL ─────────────────────────────────────────────── */

.modal{position:fixed;inset:0;z-index:4000;background:rgba(15,23,42,.5);display:none;align-items:flex-end;padding:12px}

.modal.open{display:flex}

.modalCard{width:100%;background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow)}

.modalCard h2{margin:0 0 10px;color:var(--blue);font-size:16px;text-transform:uppercase;letter-spacing:.08em}

.summaryGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}

.summaryCell{background:var(--soft);border:1px solid var(--line);border-radius:12px;text-align:center;padding:9px 4px}

.summaryCell b{display:block;font-size:20px;color:var(--blue)}

.summaryCell span{font-size:10px;color:var(--muted);font-weight:900}

/* ── TOASTS ────────────────────────────────────────────── */

.toast{position:fixed;left:50%;bottom:106px;z-index:5000;transform:translateX(-50%);background:rgba(15,23,42,.94);color:#fff;padding:9px 17px;border-radius:999px;font-size:12px;font-weight:900;box-shadow:var(--shadow);white-space:nowrap}

.undoToast{position:fixed;left:50%;bottom:106px;z-index:5000;transform:translateX(-50%);background:rgba(15,23,42,.96);color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:900;box-shadow:var(--shadow);white-space:nowrap;display:flex;align-items:center;gap:11px}

.undoToast button{background:transparent;border:0;color:#fbbf24;font-weight:900;font-size:13px;padding:0;cursor:pointer}

.errorToast{position:fixed;left:50%;top:60px;z-index:6000;transform:translateX(-50%);background:var(--red);color:#fff;padding:10px 14px;border-radius:11px;font-size:13px;font-weight:900;display:flex;align-items:center;gap:12px;max-width:90%;box-shadow:0 8px 20px rgba(220,38,38,.4)}

.errorToast button{background:rgba(255,255,255,.2);border:0;color:#fff;font-weight:900;font-size:12px;padding:4px 10px;border-radius:6px;cursor:pointer}

.hidden{display:none!important}

/* ── PIN MARKERS ───────────────────────────────────────── */

.pinFloat{display:flex;flex-direction:column;align-items:center;gap:0;filter:drop-shadow(0 1px 3px rgba(15,23,42,.3))}

.pinFloatEmoji{font-size:16px;line-height:1}

.pinFloatNum{font-size:10px;font-weight:900;line-height:1;letter-spacing:-.02em;text-shadow:0 0 3px #fff,0 0 3px #fff}

.pinFloatDot{width:8px;height:8px;border-radius:50%;border:1.5px solid #fff;margin-top:1px}

/* ── ROUTE WAYPOINTS ───────────────────────────────────── */

.routeWaypoint{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,23,42,.3)}

/* ── PLAN MODE ─────────────────────────────────────────── */

.planLabel{background:rgba(255,255,255,.92);color:#1d4ed8;padding:12px 20px;border-radius:16px;text-align:center;box-shadow:0 4px 20px rgba(15,23,42,.35);border:2.5px solid #1d4ed8;min-width:100px}

.planLabel b{display:block;font-size:32px;font-weight:900;line-height:1;color:#1d4ed8}

.planLabel span{display:block;font-size:11px;letter-spacing:.10em;font-weight:700;margin-top:2px;color:#64748b}

/* Desktop cap */

/* ── RESPONSIVE LAYOUT (v6.2.0) ─────────────────────────────────────────
   Three tiers so the app fits the device instead of showing a phone strip
   on bigger screens:
     - phone   (<600px)     : base rules, full-bleed, untouched.
     - tablet  (600-1024px) : full-bleed and seamless — same field UI as the
                              phone, just using the whole tablet screen.
     - desktop (1025px+)    : framed app. Large centered map; forms, lists and
                              settings as a comfortable 820px column (not a
                              skinny 560 strip).
   ─────────────────────────────────────────────────────────────────────── */

/* TABLET — full-bleed. Intentionally NOT clamped: base rules (#appShell full
   width, .panel inset:0, .sheet edge-to-edge) apply, so an iPad gets the same
   seamless layout as a phone with more breathing room. */
@media(min-width:600px) and (max-width:1024px){
  #appShell{max-width:none;margin:0;height:100dvh}
  .accessScreen .accessCard{box-shadow:0 8px 40px rgba(0,0,0,.2)}
}

/* DESKTOP / LAPTOP — framed. Big centered map area; overlays sit as a generous
   centered column over the soft background. */
@media(min-width:1025px){
  body{background:#e2e8f0}
  #appShell{max-width:1280px;margin:0 auto;box-shadow:0 0 40px rgba(15,23,42,.15);height:100dvh;border:1px solid #cbd5e1}
  .panel,.modal,.valueHomePanel{width:min(820px,94vw);max-width:820px;left:50%;right:auto;top:0;bottom:0;transform:translateX(-50%)}
  .panel.open{display:flex;transform:translateX(-50%)}
  .panel{box-shadow:0 0 0 100vw #e2e8f0}
  .modal.open{display:flex;transform:translateX(-50%);align-items:flex-end}
  .sheet{left:50%;right:auto;transform:translateX(-50%) translateY(110%);width:min(820px,94vw);max-width:820px;border-radius:20px 20px 0 0}
  .sheet.open{transform:translateX(-50%) translateY(0)}
  .accessScreen .accessCard{box-shadow:0 8px 40px rgba(0,0,0,.2)}
  /* in-map controls slightly larger on desktop */
  .mapOpacityCtrl{left:20px;bottom:20px;padding:8px 14px;gap:12px}
  .mapOpacityLabel{font-size:13px}
  .mapOpacityVal{font-size:16px}
  .opacityStepBtn{width:36px;height:36px;font-size:22px}
  .satToggleBtn{height:36px}
  .mapHailLegend{left:280px;bottom:20px;padding:8px 10px;gap:6px}
  .mapLegendChip{min-width:46px;height:38px}
  .mapLegendChip b{font-size:14px}
  /* version banner less obtrusive on big screens */
  #tempVersion{font-size:10px}
}

.mapOpenButton { background:var(--blue); color:#fff; height:42px; padding:0 16px; border-radius:11px; font-weight:900; font-size:14px; border:0 }

/* Big single input — no redundant label */

.bigInput { width:100%; height:54px; border:2px solid #94a3b8; border-radius:12px; padding:0 16px; background:#fff; color:var(--text); font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px }

.bigInput::placeholder { color:#94a3b8; font-weight:600 }

.bigInput:focus { border-color:var(--blue); outline:none }

.scanButton:active { transform:translateY(1px); background:#dbeafe }

/* State row with state + bias side-by-side */

.stateRow { display:grid; grid-template-columns: auto 1fr auto 1fr; gap:8px 10px; align-items:center; margin:10px 0 14px }

.stateLabel, .biasLabel { font-size:11px; font-weight:900; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap }

.stateSelect { height:44px; border:1.5px solid var(--line); border-radius:11px; padding:0 12px; background:#fff; font-size:16px; font-weight:800 }

.biasSlider { width:100%; height:44px; -webkit-appearance:none; background:transparent }

.biasSlider::-webkit-slider-runnable-track { height:6px; background:linear-gradient(90deg, #16a34a 0%, #cbd5e1 50%, #dc2626 100%); border-radius:999px }

.biasSlider::-moz-range-track { height:6px; background:linear-gradient(90deg, #16a34a 0%, #cbd5e1 50%, #dc2626 100%); border-radius:999px }

.biasSlider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); margin-top:-9px; cursor:pointer }

.biasSlider::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); cursor:pointer }

/* Run button: bigger and louder */

.valueRunButton { height:52px; font-size:17px; letter-spacing:.06em; font-weight:900 }

/* History panel */

.historyList { flex:1; overflow:auto; padding:0; -webkit-overflow-scrolling:touch }

.historyHeader { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; gap:8px }

.historyHeader b { font-size:14px; color:#1e293b; font-weight:800 }

.historyDate { font-size:11px; color:#94a3b8; white-space:nowrap }

.historyDetails { display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom:4px; font-size:13px; color:#1e293b }

.historyDetails b { color:#64748b; font-weight:700 }

.historyMeta { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11px; color:#94a3b8 }

/* Join map button */

.joinMapButton { background:linear-gradient(180deg,#1d4ed8,#1e3a8a); color:#fff; height:46px; font-size:13px; font-weight:900; letter-spacing:.05em; border:0; margin:8px 0 }

#topBar button, #topBar .syncPill { color: #fff }

/* Top pill buttons — distinct color per function */

/* Sync pill: state-based colors are visible against blue bar */

.syncPill.local { background:transparent !important; }

.syncPill.syncing { background:transparent !important; }

.syncPill.live { background:transparent !important; }

.syncPill.blocked { background:transparent !important; }

/* Visit list filter tabs — bigger, bolder */

#filterTabs { background:#1e3a8a; border-bottom:2px solid #0c2d8f }

/* Visit list action chips (SUMMARY, DEALS, HANDOFF) */

/* Error display in Value Check */

.vcError { background:#fef2f2; color:#991b1b; padding:12px; border-radius:10px; border:1px solid #fecaca; font-weight:700 }

.vcErrorHint { background:#fff7ed; color:#9a3412; padding:10px 12px; border-radius:10px; border:1px solid #fed7aa; margin-top:8px; font-size:12px; font-weight:600 }

/* Subtle border around the app on desktop */

@media(min-width:1025px){
  #appShell { border-radius:0 }
}

/* Bigger scan icons */

.scanButton .scanIcon { font-size: 36px !important; line-height:1; margin-bottom:4px }

.scanButton {
  height: 80px !important;
  font-size: 15px !important;
}

/* ── V4.2 RESULT CARD REFRESH — clean, professional, blue-accented ───── */

.valueResult {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 6px solid #1d4ed8 !important;
  border-radius: 12px !important;
  padding: 14px 14px 12px !important;
  margin: 12px 0 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}

.vcBigNums {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.15fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.vcBigItem {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 11px 6px 9px !important;
  text-align: center !important;
}

.vcBigItem.vcRepairMax {
  background: #f8fafc !important;
  border: 1.5px solid #1d4ed8 !important;
  box-shadow: 0 1px 4px rgba(29,78,216,.12);
}

.vcBigLabel {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  color: #475569 !important;
  margin-bottom: 5px !important;
}

.vcRepairMax .vcBigLabel { color: #1d4ed8 !important }

.vcBigVal {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -.02em;
  border-radius: 6px;
}

/* brief flash when the bias dial updates a value, so the change is obvious */
.vcFlash { animation: vcFlashAnim .6s ease-out; }
@keyframes vcFlashAnim {
  0%   { background: #fde68a; }
  100% { background: transparent; }
}

.vcRepairMax .vcBigVal {
  font-size: 24px !important;
  color: #1d4ed8 !important;
}

.vcDetails > div { margin-bottom: 4px }

.vcDetails b { color: #0f172a; font-weight: 800 }

.vcWarning {
  background: #fef3c7 !important;
  color: #92400e !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  margin-top: 10px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  border: 1px solid #fde68a;
}

/* Soften the home page background — no green needed */

.valueHomePanel {
  background: #f8fafc !important;
  border-top: 0 !important;
}

.valueHomeBody {
  border-bottom: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.valueHeader .mapOpenButton {
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-weight: 900;
}

/* Card wrapper for inputs section — give it visible structure */

.valueCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 8px 12px 6px;
  margin: 4px 0 2px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
/* v7.43: trim STATE/BIAS/SCAN row height so CHECK NOW clears the keyboard */
.stateRow > div, .stateRow > button { height: 60px !important; }

/* ── V4.3 vehicle line — subtle blue panel ───── */

.vcVehicleLine {
  background: #eff6ff !important;
  margin: -14px -14px 8px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #dbeafe !important;
  border-radius: 11px 11px 0 0;
}

/* ── V4.4 NEW VEHICLE button ───── */

.clearButton {
  background: linear-gradient(180deg, #16a34a, #15803d) !important;
  color: #ffffff !important;
  height: 60px !important;
  font-size: 17px !important;
  letter-spacing: .06em !important;
  font-weight: 900 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(22,163,74,.3);
}

.clearButton:active { transform: translateY(1px) }

.runRow { display:flex; gap:8px; flex-direction:column }

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */

:root {
  --brand-blue: #1d4ed8;
  --brand-blue-dark: #1e3a8a;
  --brand-blue-darker: #0c2d8f;
  --brand-blue-soft: #eff6ff;
  --brand-blue-tint: #dbeafe;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;
  --accent-gold: #fbbf24;
  --accent-gold-dark: #f59e0b;
  --success: #16a34a;
  --warning: #f97316;
  --danger: #dc2626;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 2px 8px rgba(15,23,42,.10);
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --soft: #f8fafc;
  --bg: #f1f5f9;
  --blue: #1d4ed8;
  --muted: #64748b;
  --line: #e2e8f0;
  --red: #dc2626;
  --shadow: 0 2px 8px rgba(15,23,42,.10);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── UNIFIED PAGE HEADERS ─────────────────────────────────────────
   Every panel header on every screen looks like this:
   [back-button-left]  [centered-title]  [spacer-right]
   Dark blue band, white centered title, blue back button on the right
   ───────────────────────────────────────────────────────────────── */

.panel > .panelHeader,
.panel > header.panelHeader {
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark)) !important;
  border-bottom: 3px solid var(--brand-blue-darker) !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  gap: 10px;
}

.panel > .panelHeader h2,
.panel > header.panelHeader h2 {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  flex: 1 !important;
  text-align: center !important;
}

.panel > .panelHeader > div:empty,
.panel > .panelHeader .headerSpacer {
  width: 84px;
  flex-shrink: 0;
}

/* ── UNIFIED BACK BUTTON ──────────────────────────────────────────
   Always top-right, white pill with blue text, "← BACK"
   No more red back buttons anywhere.
   ───────────────────────────────────────────────────────────────── */

.panel .backButton:active {
  transform: translateY(1px);
  background: var(--brand-blue-soft) !important;
}

/* ── UNIFIED ACTION BUTTONS ──────────────────────────────────────
   Light blue fill, darker border, blue text — uniform across screens
   ───────────────────────────────────────────────────────────────── */

/* Primary action button — solid blue, white text — used for CHECK NOW, SAVE, etc. */

.wideButton.valueRunButton:active,
.wideButton.primary:active {
  background: var(--brand-blue-dark) !important;
}

/* Destructive button — only for DELETE — red */

/* ── UNIFIED LIST CARDS ─────────────────────────────────────────── */

.homeActionButton:hover,
.toolItem:hover {
  border-color: var(--brand-blue) !important;
}

.homeActionButton b,
.toolItem b {
  display: block !important;
  font-size: 17px !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  margin-bottom: 3px !important;
}

.homeActionButton span,
.toolItem span {
  display: block !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* ── VISITS FILTER TABS — high contrast on dark bg ─────────────── */

#filterTabs.visitsFilterTabs,
#filterTabs,
#routeFilterTabs {
  background: var(--brand-blue-dark) !important;
  border-bottom: 2px solid var(--brand-blue-darker) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

#filterTabs button,
#routeFilterTabs button {
  background: transparent !important;
  color: #cbd5e1 !important;
  border: 0 !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  flex: 1 !important;
  text-align: center !important;
  cursor: pointer;
}

#filterTabs button.active,
#routeFilterTabs button.active {
  color: #ffffff !important;
  background: var(--brand-blue) !important;
  border-bottom: 3px solid var(--accent-gold) !important;
}

/* ── VISITS LIST TOOLS BAR — punchier ───────────────────────────── */

/* ── FIELD MAP TOP BAR — already styled, but unify pill sizes ─── */

/* Fire icon pill — gold/amber, only visible when count > 0 */

.streakPill.hidden { display: none !important }

/* ── HOME ACTION BUTTONS — already polished, ensure consistency  ─ */

.valueHeader {
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark)) !important;
  border-bottom: 3px solid var(--brand-blue-darker) !important;
  min-height: 64px !important;
}

.valueTitle {
  color: #ffffff !important;
  font-size: 24px !important;
  letter-spacing: .12em !important;
  white-space: nowrap !important;
}

/* ── SEARCH BAR consistency ─────────────────────────────────────── */

.searchBar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 12px !important;
  display: flex !important;
  gap: 8px !important;
}

.searchBar input {
  flex: 1 !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: var(--surface-alt) !important;
}

.searchBar input:focus {
  border-color: var(--brand-blue) !important;
  outline: none !important;
}

/* ── BOTTOM FORM (e.g., "create map" bar) ──────────────────────── */

.bottomForm {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 12px !important;
  display: flex !important;
  gap: 8px !important;
}

.bottomForm input {
  flex: 1 !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.bottomForm button {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  cursor: pointer;
}

/* ── EMPTY STATES — consistent friendly tone ───────────────────── */

.emptyMessage {
  padding: 36px 20px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Clear Route — visible but secondary */

.wideButton.clearRoute {
  background: #fff7ed !important;
  border: 1.5px solid #f97316 !important;
  color: #c2410c !important;
  margin-top: 8px !important;
}

/* Pin sheet close button — blue, not alarming */

/* Locate button — push down more, just above the field bar */

/* Pin sheet CLOSE button — no arrow, just "CLOSE" */

/* Visits filter tabs — fix contrast (was blue-on-blue) */

#filterTabs.visitsFilterTabs button,
#filterTabs button,
#routeFilterTabs button {
  color: #ffffff !important;
  opacity: 0.55;
}

#filterTabs.visitsFilterTabs button.active,
#filterTabs button.active,
#routeFilterTabs button.active {
  color: #ffffff !important;
  opacity: 1 !important;
  background: var(--brand-blue-darker) !important;
  border-bottom: 3px solid var(--accent-gold) !important;
}

/* Visits action bar — balance the layout */

/* Detail rows — bigger, more readable */

.vcDetails { font-size: 14px !important; line-height: 1.55 !important }

.vcVinRow,
.vcDetailRow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  gap: 12px;
}

.vcVinRow { flex-direction: row !important; align-items: baseline !important; padding: 5px 0 !important; gap: 8px !important; justify-content: flex-start !important; }

.vcDetails > .vcVinRow:last-child,
.vcDetails > .vcDetailRow:last-child { border-bottom: 0 !important }

/* Loading indicator — bigger text + cycling dots */

.vcLoading {
  text-align: center !important;
  padding: 24px 12px !important;
}

.vcLoadingText {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--brand-blue) !important;
  letter-spacing: .04em !important;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.vcLoadingSub {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
  letter-spacing: .03em;
}

.vcDots { display: inline-flex; gap: 2px; margin-left: 2px }

.vcDots span {
  animation: vcDotPulse 1.2s infinite;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.vcDots span:nth-child(1) { animation-delay: 0s }

.vcDots span:nth-child(2) { animation-delay: 0.2s }

.vcDots span:nth-child(3) { animation-delay: 0.4s }

@keyframes vcDotPulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* progressive value-check: vehicle shows first, prices spin in */
.vcPending {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}
.vcSpinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 3px solid var(--border, #cbd5e1);
  border-top-color: var(--brand-blue, #1d4ed8);
  border-radius: 50%;
  animation: vcSpin .7s linear infinite;
}
@keyframes vcSpin { to { transform: rotate(360deg); } }
.vcValuingNote {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: .03em;
  margin: 8px 0 2px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}


/* Map wipe button — gentler than delete */

.mapWipeBtn {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-left: 4px;
}

.mapWipeBtn:active { background: #fde68a !important }

/* Home action buttons (Maps, Visits, History, Settings) — match PLATE/VIN scan buttons */

.homeActionButton {
  background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
  border: 1.5px solid #bfdbfe !important;
  border-radius: 13px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
}

.homeActionButton:hover {
  border-color: var(--brand-blue) !important;
}

.homeActionButton:active {
  background: #dbeafe !important;
  transform: translateY(1px);
}

.homeActionButton b {
  display: block !important;
  font-size: 19px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  letter-spacing: .02em;
}

.homeActionButton span {
  display: block !important;
  font-size: 14px !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Tools menu items — same shading */

.toolItem {
  background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
  border: 1.5px solid #bfdbfe !important;
  width: 100% !important;
  text-align: left !important;
}

.toolItem b {
  color: var(--brand-blue) !important;
}

/* Settings label tags */

.optionalTag {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-left: 6px;
}

.settingsBody label {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
}

/* History delete button */

.historyItem { position: relative !important; padding: 10px 32px 10px 12px !important; border-bottom: 1px solid #e2e8f0 !important }

.historyDelete {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 !important;
}

.historyDelete:active { background: #fecaca !important }

/* Track button paused state */

.fieldButton.paused {
  background: #fef3c7 !important;
  color: #92400e !important;
}
/* v6.9.9: TRACK button is solid green while actively recording, so a glance
   confirms tracking is live. Pairs with the far-right placement to prevent the
   accidental-stop problem. */
#trackButton.active {
  background: #16a34a !important;
}
#trackButton.active b,
#trackButton.active span { color: #fff !important; }
#trackButton.paused b,
#trackButton.paused span { color: #92400e !important; }

/* — half-transparent, slightly smaller */

.pinFloat.pinGhost {
  opacity: 0.45;
  transform: scale(0.85);
  transform-origin: center bottom;
}

/* Map attribution — visible but unobtrusive */

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #64748b !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 4px 0 0 0;
}

.leaflet-control-attribution a {
  color: #64748b !important;
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  color: var(--brand-blue) !important;
  text-decoration: underline;
}

/* ── PIN SHEET TAP-TO-CLOSE OVERLAY ──────────────────────── */

.pinSheetOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 899;
  background: transparent;
}

.pinSheetOverlay.active {
  display: block;
}

/* VALUE CHECK button highlight */

.actionButton.vcHighlight {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.listPills {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.listPill {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listPill:active {
  background: #f1f5f9 !important;
}

#topBar > * {
  flex: 0 0 auto;
}

/* 🎯 ME — locate button: white pill, blue text */

/* SYNC button — amber/orange pill so it's distinct from LIVE */

/* ── PLAN MODE: PIN button active state ──────────────────── */

#fieldBar .fieldButton#addPinButton.planMode {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

#fieldBar .fieldButton#addPinButton.planMode span {
  filter: none;
}

/* ── SETTINGS: cache clear button ────────────────────────── */

.clearCacheBtn {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

.clearCacheBtn:active {
  background: #e2e8f0 !important;
}

.cacheClearNote {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ── VISITS FILTER TABS — uniform pills (v4.7.12) ─────────── */

#filterTabs.visitsFilterTabs {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

#filterTabs.visitsFilterTabs button,
#filterTabs.visitsFilterTabs button.active {
  background: #fff !important;
  color: var(--brand-blue) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0 !important;
}

#filterTabs.visitsFilterTabs button.active {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-color: var(--brand-blue) !important;
}

#filterTabs.visitsFilterTabs button:active:not(.active) {
  background: #f1f5f9 !important;
}

/* ── VISITS COUNT BADGE — own line, prominent ────────────── */

.listTools {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.listCountBox {
  background: #fff !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.listCountBig {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* ── HAIL BUTTON ─────────────────────────────────────────── */

/* ── HAIL PANEL ──────────────────────────────────────────── */

.hailBody {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hailIntro {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.hailLoading {
  text-align: center;
  padding: 30px 12px;
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 900;
}

.hailLoading .vcDots span {
  font-size: 15px !important;
  color: #1d4ed8 !important;
}

.hailEmpty {
  text-align: center;
  padding: 30px 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.hailStormList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.hailStormList::-webkit-scrollbar { display: none; width: 0; height: 0; }

.hailStormRow.selected {
  background: #fef3c7;
  border-color: #f59e0b;
}

.hailStormMeta {
  font-size: 12px;
  color: #64748b;
}

.hailControls {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 24px;
}
.hailControls::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Map legend for active overlays */

/* ── HISTORY: methodUsed badges for EOR calibration ─────── */

.historyMethod {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.historyMethod-live { background: #dcfce7; color: #166534; }

.historyMethod-cached { background: #f1f5f9; color: #64748b; }

.historyMethod-fallback { background: #fef3c7; color: #92400e; }

.historyMethod-unknown { background: #f1f5f9; color: #94a3b8; }

/* ── CAPTURE FOR CALIBRATION button (v4.8.2) ─────────────── */

.captureCalBtn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
}

.captureCalBtn:active {
  background: #fde68a;
}

.captureCalBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.captureCalBtn.captured {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #16a34a !important;
}

/* ── CARRIER PICKER (calibration capture, v4.8.3) ────────── */

.carrierPicker {
  margin-top: 10px;
  padding: 12px;
  background: #fef9c3;
  border: 1.5px solid #facc15;
  border-radius: 12px;
}

.carrierPickerLabel {
  font-size: 12px;
  font-weight: 800;
  color: #713f12;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
}

.carrierPickerGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.carrierPickerBtn {
  background: #fff;
  color: #1d4ed8;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carrierPickerBtn:active {
  background: #dbeafe;
}

.vcCLpill {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.vcCL-high { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

.vcCL-mod { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

.vcCL-low { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Hide the old inline "CL:" label since we now use the pill */

.vcCL { display: none !important; }

/* ── v4.8.4: HAIL STORMS — restructured row layout ───────── */

.hailStormRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 10px !important;
  margin-bottom: 2px !important;
  padding: 8px 12px !important;
}

.hailStormRow.active {
  background: #dbeafe !important;
  border-color: #1d4ed8 !important;
}

.hailStormRow.pending {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
}

.hailStormDate {
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}

.hailStormMeta {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.hailStormLoc {
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.stormInfoBtn {
  margin-left: auto !important;
}

/* Vehicle name — 2-line layout: year+make prominent, model+trim below */

.vcVehTop {
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.vcVehSub {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  line-height: 1.3;
  margin-top: 1px;
}

.vcVehicleLine .vcVehTop,
.vcVehicleLine .vcVehSub { display: block; }

/* ACV / Salvage main cells — match Repair Max prominence */

/* VIN — larger for readability on phones */

.vcVin {
  font-size: 14px !important;
  letter-spacing: .04em !important;
  word-break: break-all !important;
}

/* Detail row — pull value+CL cluster closer to label */

.vcDetailRow {
  justify-content: flex-start !important;
  gap: 16px !important;
}

.vcDetailLabel {
  font-size: 12px !important;
  min-width: 60px !important;
  white-space: nowrap !important;
}

.vcDetailVal {
  flex: 1 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* ── v4.8.6: Count label is tappable to dismiss ──────────── */

.planLabelMarker { cursor: pointer; }

.planLabelMarker .planLabel {
  transition: transform 0.15s ease;
}

.planLabelMarker:hover .planLabel,
.planLabelMarker:active .planLabel {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ── v4.8.7: Multi-vehicle multiplier ─────────────────────── */

.sheetTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.vehMult {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 4px 6px;
  flex-shrink: 0;
}

.vehMult.hidden { display: none; }

.vehMultBtn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #92400e;
  border: 0;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.vehMultBtn:active { background: #fde68a; }

.vehMultBtn:disabled { opacity: 0.4; cursor: not-allowed; }

.vehMultLabel {
  font-weight: 900;
  font-size: 13px;
  color: #92400e;
  letter-spacing: .02em;
  padding: 0 4px;
  min-width: 22px;
  text-align: center;
}

/* ── BOTH BARS: same height, blue background ── */

#topBar {
  height: 64px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  padding: 4px !important;
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a) !important;
  border-bottom: 3px solid #0c2d8f !important;
  align-items: stretch !important;
  z-index: 900 !important;
  flex-shrink: 0 !important;
}

#fieldBar {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  padding: 4px 4px calc(4px + var(--safe-bottom, 0px)) !important;
  gap: 3px !important;
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a) !important;
  border-top: 3px solid #0c2d8f !important;
  flex-shrink: 0 !important;
  z-index: 900 !important; /* v6.8.3: match #topBar. Without this the field bar
    sat under the full-screen map's layers (z 200-700) and was painted over —
    the real reason it never appeared since the bars went full-screen in v6.6.0. */
}

/* ── AUTO-HIDE CHROME (v6.6.0) ──────────────────────────────────────────────
   The bars float over a full-screen map (so the map is truly edge to edge)
   and fade out when the map sits idle. .chromeHidden slides each bar off and
   disables its taps; a tap/pan/zoom removes the class. The safe-area inset now
   rides on the top bar itself, since #appShell no longer pads the top. */
#topBar {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  padding-top: calc(4px + var(--safe-top)) !important;
  height: auto !important;
  min-height: 64px !important;
}
#fieldBar {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
}
#topBar, #fieldBar {
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}
#appShell.chromeHidden #topBar   { transform: translateY(-100%); opacity: 0; pointer-events: none; }
#appShell.chromeHidden #fieldBar { transform: translateY(100%);  opacity: 0; pointer-events: none; }
/* keep the right-side map controls clear of the floating top bar */
.zoomIn        { top: calc(80px  + var(--safe-top)) !important; }
.zoomOut       { top: calc(130px + var(--safe-top)) !important; }
.satToggle     { top: calc(180px + var(--safe-top)) !important; }
.headingToggle { top: calc(230px + var(--safe-top)) !important; }

/* ── TOP BAR BUTTONS ── */

.topBtn {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  color: #1d4ed8 !important;
  cursor: pointer !important;
  padding: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.topBtn:active { background: #dbeafe !important; }

.topBtnIcon {
  font-size: 22px !important;
  line-height: 1 !important;
  display: block !important;
}

.topBtn b {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  color: #1d4ed8 !important;
  line-height: 1.1 !important;
}

.topBarBack b {
  font-size: 16px !important;
}

/* MAP button — icon + map name */

#mapNameButton b {
  font-size: 10px !important;
  letter-spacing: .01em !important;
}

/* DEALS button — gold when active */

.topBtnDeals b { color: #1d4ed8 !important; }

.topBtnDeals.dealsActive {
  background: #fef3c7 !important;
  border: 2px solid #f59e0b !important;
}

.topBtnDeals.dealsActive b { color: #92400e !important; }

/* HAIL button — alert state only */

.topBtnHail b { color: #1d4ed8 !important; }

.topBtnHail.hailAlert b { color: #92400e !important; }

/* FILTER indicator dot on VISITS button */

.filterDot {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  font-size: 10px !important;
  color: #f59e0b !important;
  line-height: 1 !important;
}

.filterDot.hidden { display: none !important; }

/* ── SYNC INDICATOR — not a button, lives in blue bar ── */

.syncIndicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  cursor: default !important;
}

.syncIndDot {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}

.syncIndicator b {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  display: block !important;
  white-space: nowrap !important;
}

/* Sync states — dot and label color inside white box */

.syncIndicator.live .syncIndDot   { color: #16a34a !important; }

.syncIndicator.live b             { color: #16a34a !important; }

.syncIndicator.syncing .syncIndDot { color: #d97706 !important; }

.syncIndicator.syncing b           { color: #d97706 !important; }

.syncIndicator.local .syncIndDot   { color: #dc2626 !important; }

.syncIndicator.local b             { color: #dc2626 !important; }

.syncIndicator.blocked .syncIndDot { color: #d97706 !important; }

.syncIndicator.blocked b           { color: #d97706 !important; }

/* ── BOTTOM BAR BUTTONS — match top bar height ── */

.fieldButton {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #1d4ed8 !important;
  position: relative !important;
}

.fieldButton span:first-child { font-size: 26px !important; line-height: 1 !important; }

.fieldButton b { font-size: 11px !important; font-weight: 900 !important; letter-spacing: .02em !important; color: #1d4ed8 !important; }

.fieldButton.primary { background: #1d4ed8 !important; color: #fff !important; }

.fieldButton.primary b { color: #fff !important; }

.fieldButton.active { background: #fbbf24 !important; color: #1e293b !important; }

.fieldButton.active b { color: #1e293b !important; }

.fieldButton.planMode { background: #fef3c7 !important; border-color: #f59e0b !important; color: #92400e !important; }

/* Responsive small screens */

@media(max-height:680px) {
  #topBar, #fieldBar { min-height: 54px !important; height: auto !important; }
  .topBtnIcon, .fieldButton span:first-child { font-size: 18px !important; }
  .topBtn b, .fieldButton b { font-size: 9px !important; }
}

.hailGoBtn { width: 100%; padding: 14px 16px; background: #1d4ed8; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 800; letter-spacing: .04em; cursor: pointer; margin-bottom: 8px; }

.hailGoBtn:active { transform: scale(0.98); }

.sheetCloseBtn { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; padding: 4px 8px; line-height: 1; z-index: 10; }

.sheetCloseBtn:active { color: #475569; }

.stormDetailCard { max-width: 480px; }

.stormDetailContent { max-height: 60vh; overflow-y: auto; }

.stormReportRow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 13px; }

.stormReportRow:last-child { border-bottom: none; }

.stormReportSize { font-weight: 800; font-size: 15px; min-width: 50px; }

.stormReportLoc { color: #334155; flex: 1; margin: 0 8px; font-weight: 600; }

.stormReportTime { color: #64748b; font-size: 12px; white-space: nowrap; font-weight: 600; }

.stormInfoBtn { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; color: #475569; font-size: 11px; font-weight: 700; padding: 3px 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0; margin-left: auto; display: inline-block; }

.stormInfoBtn:active { background: #dbeafe; }

/* deploy-stamp: 2026-05-23-v551

/* Hail panel controls — compact row layout */

.hailControlRow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}

.hailControlLabel {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--text-muted, #64748b) !important;
  white-space: nowrap !important;
  min-width: 48px !important;
}

.hailSlider {
  flex: 1 !important;
  height: 6px !important;
  accent-color: #1d4ed8 !important;
  background: #cbd5e1 !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
}

.hailControlVal {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  min-width: 42px !important;
  text-align: right !important;
}

.hailClearBtn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 4px !important;
  display: block !important;
}

.hailClearBtn:active {
  background: #e2e8f0 !important;
}

/* Hail new-storm badge */

.hailBadge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 9px !important;
  height: 9px !important;
  background: #dc2626 !important;
  border-radius: 50% !important;
  display: block !important;
  border: 1.5px solid #fff !important;
  animation: hailPulse 1.5s infinite !important;
}

@keyframes hailPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Hail legend rows — tappable to fly to storm */

*/

/* ── DIRECT ID OVERRIDES — highest specificity, always win ── */
#mapNameButton {
  background: #ffffff !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  padding: 2px !important;
  color: #1d4ed8 !important;
}

#mapNameButton .topBtnIcon {
  font-size: 26px !important;
  line-height: 1 !important;
  display: block !important;
}

#mapNameButton b, #mapNameButton #activeMapName {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #1d4ed8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
}

#syncPill {
  background: #ffffff !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
  overflow: hidden !important;
  padding: 2px !important;
  gap: 2px !important;
}

#syncPill .syncIndDot {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}

#syncPill b, #syncPill #syncLabel {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  display: block !important;
  white-space: nowrap !important;
}

#syncPill.live .syncIndDot, #syncPill.live #syncLabel   { color: #16a34a !important; }

#syncPill.syncing .syncIndDot, #syncPill.syncing #syncLabel { color: #d97706 !important; }

#syncPill.local .syncIndDot, #syncPill.local #syncLabel   { color: #dc2626 !important; }

#syncPill.blocked .syncIndDot, #syncPill.blocked #syncLabel { color: #d97706 !important; }
.hailStormRow.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
/* deployed: 2026-05-22T22:14:47Z */

#settingsPanel {
  z-index: 2600;
}

/* ── SHOW THE MATH — expandable audit trail ─────────────── */

.vcShowMath {
  margin-top: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 6px !important;
}

.vcMathToggle {
  background: none !important;
  border: none !important;
  color: #1d4ed8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  width: 100% !important;
  text-align: left !important;
  letter-spacing: .02em !important;
}

.vcMathToggle:active {
  opacity: 0.7 !important;
}

.vcMathBody {
  display: none !important;
  padding-top: 8px !important;
}

.vcShowMath.open .vcMathBody {
  display: block !important;
}

.vcShowMath.open .vcMathToggle::after {
  content: '' !important;
}

.vcMathSection {
  margin-bottom: 12px !important;
}

.vcMathLabel {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #1d4ed8 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid #dbeafe !important;
}

.vcMathRow {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  padding: 3px 0 !important;
  font-size: 13px !important;
  color: #334155 !important;
  gap: 8px !important;
}

.vcMathRow span:first-child {
  color: #64748b !important;
  font-weight: 600 !important;
  min-width: 130px !important;
  flex-shrink: 0 !important;
}

.vcMathRow span:last-child {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.vcShowMath.open .vcMathToggle {
  color: #1d4ed8 !important;
}

.vcMathToggle::after {
  content: '' !important;
}

.vcShowMath:not(.open) .vcMathToggle {
  /* arrow points down when closed - already in the text */
}

.vcShowMath.open .vcMathToggle {
  /* We'll swap the arrow character via CSS */
}

.vcMathMethod {
  border-top: 1px dashed #e2e8f0 !important;
  margin-top: 2px !important;
  padding-top: 4px !important;
}

.vcMathMethod span:last-child {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  background: #eff6ff !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  color: #1d4ed8 !important;
}

.vcMathResult {
  border-top: 2px solid #1d4ed8 !important;
  margin-top: 4px !important;
  padding-top: 6px !important;
}

.vcMathResult span:last-child {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1d4ed8 !important;
}

.vcMathNote {
  font-size: 12px !important;
  color: #64748b !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  padding: 4px 0 !important;
}

/* ── HAIL ALERT STATE — button highlights when unseen storms exist ── */

.topBtnHail.hailAlert {
  background: #fef3c7 !important;
  border: 2px solid #f59e0b !important;
}

.topBtnHail:not(.hailAlert) {
  background: #ffffff !important;
  border: 0 !important;
}

/* ── UNSEEN STORM INDICATOR ── */

.hailStormRow.unseen {
  border-left: 4px solid #1d4ed8 !important;
  background: #eff6ff !important;
}

.hailStormRow.unseen::after {
  content: 'NEW';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 900;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
}

.hailStormRow {
  position: relative !important;
}

/* Show/Hide math toggle arrow via CSS */
.vcShowMath.open .vcMathToggle {
  font-size: 0 !important;
}
.vcShowMath.open .vcMathToggle::after {
  content: 'Hide the math ▴' !important;
  font-size: 13px !important;
}

/* ── HAIL STORM PILL (bottom center, above fieldBar) ─────── */
.hailStormPill {
  position: relative;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,.96);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  box-shadow: 0 -2px 8px rgba(15,23,42,.12);
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.hailPillDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hailPillX {
  margin-left: 8px;
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.hailPillX:hover,
.hailPillX:active {
  color: #ef4444;
}

/* custom modal */
.tpModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.tpModalBox{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.25)}
.tpModalTitle{font-size:16px;font-weight:700;color:#1e293b;margin-bottom:16px}
.tpModalInput{width:100%;padding:12px 14px;border:2px solid #cbd5e1;border-radius:10px;font-size:16px;color:#1e293b;outline:none;box-sizing:border-box;margin-bottom:16px}
.tpModalInput:focus{border-color:#1d4ed8}
.tpModalMsg{font-size:14px;color:#475569;line-height:1.5;margin-bottom:16px;white-space:pre-line}
.tpModalButtons{display:flex;gap:10px;justify-content:flex-end}
.tpModalBtn{padding:10px 24px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.tpModalBtnCancel{background:#f1f5f9;color:#475569}
.tpModalBtnOk{background:#1d4ed8;color:#fff}
.tpModalBtnOk:active{background:#1e40af}
.tpModalBtnCancel:active{background:#e2e8f0}

/* ── IN-APP PLATE CAMERA (v6.7.0) ──────────────────────────────────────────
   Full-screen live viewfinder. The guide box is a visual aim aid; the reader
   gets the whole frame. Dim outside the box via a large spread box-shadow. */
/* v7.0 cleanup: in-app plate viewfinder styles (.plateCam*) removed along with
   its markup and JS — SCAN now uses the OS camera. */


/* ── CLEANER MAP CONTROLS (v6.7.1) ─────────────────────────────────────────
   Drop the +/- buttons (pinch-to-zoom handles it) and move SAT + heading to
   the bottom-right corner, sitting just above the field bar, so the map view
   stays clean. */
.zoomIn, .zoomOut { display: none !important; }
.satToggle     { top: auto !important; bottom: calc(88px  + var(--safe-bottom, 0px)) !important; }
.headingToggle { top: auto !important; bottom: calc(138px + var(--safe-bottom, 0px)) !important; }
.followToggle  { top: auto !important; bottom: calc(188px + var(--safe-bottom, 0px)) !important; }

/* v6.7.2: compass needle inside the heading toggle. Rotates to point at true
   north when heading-up is on; sits straight up (north-up) when off. */
.headingNeedle{transform-origin:50% 50%;display:block}

/* v6.7.4: bottom reveal handle. The field bar is harder to summon than the top
   (the screen's bottom edge is the phone's gesture-nav zone, so taps there are
   eaten). This always-tappable handle appears when the chrome is hidden, sitting
   above the gesture zone, and brings the bars back on tap. */
.chromeReveal{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(58px + var(--safe-bottom, 0px));z-index:950;width:88px;height:46px;border:none;border-radius:14px;background:#1d4ed8;color:#fff;font-size:26px;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;cursor:pointer}
.chromeReveal.hidden{display:none}
/* v6.8.2: when the bars are OPEN the toggle rises to sit just above the field
   bar (showing ▾ = tap to dismiss); when collapsed it sits near the screen
   bottom (▴ = tap to open). It stays visible in both states. */
.chromeReveal.up{bottom:calc(76px + var(--safe-bottom, 0px))}

/* v7.36: bottom control row — search bar (left), reveal ▲ (center), compass + find-me (right).
   The whole row rides up/down with the field bar via the .up toggle (set in l()). */
.mapControlLine{position:absolute;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:560px;bottom:calc(18px + var(--safe-bottom, 0px));z-index:950;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;pointer-events:none}
.mapControlLine.hidden{display:none}
.mapControlLine.up{bottom:calc(76px + var(--safe-bottom, 0px))}
.mapControlLine > *{pointer-events:auto}
.mapControlLine .chromeReveal{position:static;left:auto;transform:none;bottom:auto;width:48px;height:48px;background:#fff;border:1px solid var(--line);border-radius:11px;color:var(--brand-blue);box-shadow:var(--shadow);font-size:22px}
.mapControlLine .zoomButton{position:static !important;top:auto !important;bottom:auto !important;right:auto !important;left:auto !important;width:48px;height:48px;display:flex}

/* v6.9.13: hail size tap popup — small, fades on its own after ~2s */
.hailSizePopup .leaflet-popup-content-wrapper{background:rgba(15,23,42,.92);color:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.hailSizePopup .leaflet-popup-content{margin:7px 12px;font-size:14px;font-weight:600}
.hailSizePopup .leaflet-popup-tip{background:rgba(15,23,42,.92)}
.hailSizePopup .leaflet-popup-content b{font-size:16px;font-weight:900}

/* v7.2 honest three-state output */
.vcThin{color:#c0392b;font-weight:600;margin:8px 2px 4px;font-size:.95em;}
.vcNotFound{color:#444;font-weight:500;margin:12px 2px;padding:10px 12px;background:#f5f5f5;border-left:3px solid #c0392b;border-radius:6px;}

/* v7.2 make the scan-fail / scan-status message bigger and clearer */
#scanStatus{
  font-size:1.15rem;
  line-height:1.4;
  font-weight:600;
  color:#c0392b;
  padding:8px 4px;
  display:block;
}

/* v7.22 make the vehicle name more prominent */
.vcVehicleLine { font-size: 1.15rem !important; font-weight: 700 !important; color: #0f172a !important; padding: 13px 14px !important; }

/* v7.40: hail legend removed from the live map (tap a swath for its size; legend lives on the
   Storms and Maps pages). Opacity is a compact, centered pill that rides below the top bar when
   the bars are open (.up) and up to the top edge when they retract. z-index sits ABOVE the top
   bar (900) so it's never painted over; desktop drops it lower since that top bar runs taller. */
#mapHailLegend{display:none !important}
.mapOpacityCtrl{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:auto !important;top:calc(12px + var(--safe-top, 0px)) !important;bottom:auto !important;justify-content:center;z-index:905 !important}
.mapOpacityCtrl.up{top:calc(64px + var(--safe-top, 0px)) !important}
.mapOpacityLabel{display:none !important}
@media(min-width:1025px){
  .mapOpacityCtrl.up{top:calc(88px + var(--safe-top, 0px)) !important}
}

/* ── SUPPORT / SOS (Phase 1) ──────────────────────────────────── */
.supportHomeButton b { color:#15803d !important; }            /* green = healthy */
.supportHomeButton.sosActive b { color:#dc2626 !important; }  /* red = SOS active */
.supportHomeButton.sosActive { border-color:#dc2626 !important; background:#fef2f2 !important; }
.supportHomeButton.sosActive b::after { content:" \2014 SOS sent, standing by"; font-size:13px; font-weight:800; }

.supportBody { padding:18px 16px; }
.sosIntro { font-size:15.5px; color:var(--text-muted,#64748b); text-align:center; margin-bottom:18px; line-height:1.45; }
.sosButton {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:auto; min-width:220px; max-width:300px; margin:6px auto 0; min-height:64px; padding:10px 22px;
  border:2px solid #dc2626; border-radius:14px;
  background:#fff; color:#dc2626; font-size:24px; font-weight:900; letter-spacing:1px;
  cursor:pointer;
}
.sosButton:active { background:#fef2f2; transform:translateY(1px); }
.sosButtonSub { font-size:13px; font-weight:800; letter-spacing:.3px; color:#b91c1c; }
.sosReassure { font-size:14px; color:var(--text-muted,#64748b); text-align:center; margin-top:16px; line-height:1.5; }

.sosConfirmText { font-size:20px; font-weight:900; text-align:center; margin:28px 0 20px; color:var(--text,#0f172a); }
.sosConfirmBtns { display:flex; gap:12px; }
.sosConfirmSend, .sosConfirmCancel { flex:1; height:54px; border:0; border-radius:14px; font-size:17px; font-weight:900; cursor:pointer; }
.sosConfirmSend { background:#dc2626; color:#fff; }
.sosConfirmSend:active { background:#b91c1c; }
.sosConfirmCancel { background:var(--soft,#f1f5f9); color:var(--muted,#475569); border:1.5px solid var(--line,#cbd5e1); }

/* ── VALUE-CHECK WARNING CARD (Phase 1) ───────────────────────── */
.vcWarn { background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:14px 16px; }
.vcWarnHead { font-size:17px; font-weight:900; color:#9a3412; margin-bottom:4px; }
.vcWarnFix { font-size:14px; font-weight:600; color:#7c2d12; }
.vcWarnFallback { font-size:12px; font-weight:500; color:#9a3412; margin-top:10px; padding-top:8px; border-top:1px dashed #fed7aa; }

/* Storms: recent auto-flood hidden — LOAD STORMS list is the one pickable list */
#hailStormList { display: none; }

/* ── v7.51 HOME REDESIGN ───────────────────────────────────── */
.homeTopRow { display:flex; gap:7px; align-items:stretch; margin-bottom:8px; }
.plateWrap { position:relative; flex:0 0 73%; display:flex; }
.plateWrap .bigInput { width:100%; margin-bottom:0; padding-right:44px; }
#clearPlateBtn { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:none; background:#e2e8f0; color:#475569; font-size:13px; font-weight:800; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
#clearPlateBtn:active { background:#cbd5e1; }
.stateCell { flex:0 0 24%; border:1.5px solid #cbd5e1; border-radius:12px; background:#f8fafc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.stateCell .stateSelect { font-size:21px; font-weight:900; color:#1e293b; border:none; background:transparent; text-align:center; width:100%; outline:none; -webkit-appearance:none; appearance:none; }
.cellLabel { font-size:9px; font-weight:800; color:#64748b; letter-spacing:1px; }
.homeMidRow { display:flex; gap:7px; margin-bottom:8px; }
.homeMidRow .biasCell, .homeMidRow .scanCell { flex:1; }
.biasCell { border:1.5px solid #cbd5e1; border-radius:12px; background:#f8fafc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px; height:58px; }
.biasControls { display:flex; align-items:center; gap:8px; }
.biasControls button { width:30px; height:30px; border-radius:7px; border:1.5px solid #cbd5e1; background:#fff; font-size:18px; font-weight:900; cursor:pointer; color:#1d4ed8; display:flex; align-items:center; justify-content:center; padding:0; }
#biasValueLabel { font-size:20px; font-weight:900; color:#1e293b; min-width:22px; text-align:center; }
.scanCell { border:1.5px solid #cbd5e1; border-radius:12px; background:#f8fafc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; height:58px; }
.scanCell .scanIcon { font-size:28px; line-height:1; }
.homeBarActions { display:flex; gap:3px; background:#1d4ed8; border-radius:13px; padding:4px; margin-top:10px; }
.homeBarActions .homeBarBtn { flex:1; }
.homeBarBtn { background:#fff; border:none; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:9px 1px; cursor:pointer; }
.homeBarBtn:active { background:#eff6ff; }
.homeBarBtn .hbIcon { font-size:17px; line-height:1; }
.homeBarBtn .hbLabel { font-size:9.5px; font-weight:800; color:#1d4ed8; letter-spacing:.02em; }
.homeBarBtn.supportHomeButton .hbLabel { color:#15803d; }
.homeBarBtn.supportHomeButton.sosActive .hbLabel { color:#dc2626; }
.homeBarBtn.supportHomeButton.sosActive { background:#fef2f2; }

/* v7.54: support page quick-fix troubleshooting section */
.tsTitle { font-size:14.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#1d4ed8; text-align:center; margin-bottom:10px; }
.tsList { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tsItem { background:#f8fafc; border:1px solid #e2e8f0; border-radius:11px; padding:11px 13px; }
.tsP { font-size:15.5px; font-weight:800; color:#0f172a; margin-bottom:3px; }
.tsF { font-size:14px; color:#64748b; line-height:1.45; }
.sosDivider { height:1px; background:#e2e8f0; margin:0 0 16px; }

/* v7.55: start screen — plate + state matched height, actually contracts */
.valueCard { padding:8px 12px 4px !important; margin-top:0 !important; }
.homeTopRow { margin-bottom:4px !important; align-items:stretch !important; }
.scanStatus:empty { min-height:0 !important; margin:0 !important; padding:0 !important; }
.homeTopRow .plateWrap { height:54px !important; }
.homeTopRow .stateCell { height:54px !important; }
.homeTopRow .plateWrap .bigInput { height:54px !important; }
.homeTopRow .stateCell .stateSelect { font-size:19px !important; }
.homeMidRow { margin-bottom:4px !important; }
.homeMidRow .biasCell, .homeMidRow .scanCell { height:46px !important; }
.homeMidRow .scanCell .scanIcon { font-size:22px !important; }
.valueRunButton { height:44px !important; margin-top:0 !important; }
/* v7.74 Chunk 1: home-screen polish — equal spacing, thicker bias/scan, inline labels, uniform borders */
.homeTopRow { margin-bottom:8px !important; }                 /* gap #1 (plate row -> bias row) */
.homeMidRow { margin-bottom:8px !important; }                 /* gap #2 (bias row -> CHECK NOW), now equal to #1 */
.homeMidRow .biasCell, .homeMidRow .scanCell { height:54px !important; }   /* thicker than the old 46px */
.homeMidRow .biasCell { flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:12px !important; }
.homeMidRow .scanCell { flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:12px !important; }
.homeMidRow .cellLabel { font-size:12px !important; }         /* label now sits inline to the left, bump up from 9px */
.homeMidRow .scanCell .scanIcon { font-size:26px !important; } /* slightly bigger camera, still balanced */
.homeTopRow .stateCell, .homeMidRow .biasCell, .homeMidRow .scanCell { border:2px solid #94a3b8 !important; } /* match the plate field's thicker/darker border */
.homeBarActions { margin-top:4px !important; }
/* v7.77 Chunk 3a: front-page Preferences button (opens settings panel; settings now reached here, freeing the nav for HAIL) */
.prefsButton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;padding:0;background:#1d4ed8;border:0;border-radius:13px;color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em;cursor:pointer}
.prefsButton .prefsGear{font-size:16px;line-height:1}
.prefsButton:active{background:#1843b8}
.homePrefsGroup{margin-top:auto;padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px}
.homePrefsRow{display:flex;gap:3px;background:#1d4ed8;border-radius:13px;padding:4px}
.prefsSubBtn{flex:1;height:40px;border:1.5px solid #cbd5e1;border-radius:11px;background:#fff;color:#475569;font-weight:800;font-size:13px;cursor:pointer}
.prefsSubBtn:active{background:#f1f5f9}
.prefsLogout{color:#94a3b8;font-weight:700}
/* v7.79 Chunk 3b: front-page business card — tinted white, floating shadow, red/blue accents (renders only filled fields) */
.bizCard{background:#f4f8ff;border:1px solid #e4ecf7;border-radius:13px;padding:15px 18px;margin-top:18px;box-shadow:-3px 5px 16px rgba(30,58,138,.14);display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:62px}
.bizCardEmpty{align-items:center;justify-content:center}
.bizCardEmpty .bizCardPrompt{color:#94a3b8;font-weight:700;font-size:14px}
.bizCard .bizShop{font-size:18px;font-weight:900;color:#b91c1c;letter-spacing:.02em;line-height:1.15}
.bizCard .bizName{font-size:16px;font-weight:800;color:#1e293b;line-height:1.2}
.bizCard .bizContacts{display:flex;flex-wrap:wrap;gap:3px 16px;margin-top:5px}
.bizCard .bizContact{font-size:13px;font-weight:600;color:#1d4ed8}
.homeBarBtn { padding:6px 1px !important; }

/* ════════════════════════════════════════════════════════════════
   v7.81 — HOME-SCREEN FINISH
   - Pin the 4 input rows (plate/state, bias/scan, CHECK NOW, 5 buttons)
     to the top so they always clear the soft keyboard. Pure layout,
     no keyboard JS — the keyboard stays fully native (slides up/down).
   - Business card always present: sharp when filled, muted ghost
     labels when empty. Inset with breathing room, never edge-to-edge.
   - Clear Cache / Log Out: blue border to match the 5 blue-bar buttons.
   ════════════════════════════════════════════════════════════════ */

/* Top cluster: the 4 rows, natural height, never scrolls away. */
.homeTopCluster { flex: 0 0 auto; }

/* Lower region: card + prefs. Fills the rest; the part below the keyboard
   simply hides while typing. */
.homeLowerScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Card floats centered in the open space with breathing room on all sides. */
.bizCardArea {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 8px;
}

/* The card itself — inset, white, crisp, professional. */
.bizCard {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  min-height: 112px;
  padding: 18px 20px 18px 26px;
  background: #ffffff;
  border: 1.5px solid #c9d4e6;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15,23,42,.20), 0 3px 8px rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
/* Left accent bar — the card's bit of color (blue over red), never in the text */
.bizCard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(#1d4ed8 0 50%, #b91c1c 50% 100%);
}
/* All text black; clear space between the company name and the rep name */
.bizCard .bizShop { font-size: 17px !important; font-weight: 900 !important; color: #0f172a !important; letter-spacing: .01em !important; line-height: 1.2 !important; }
.bizCard .bizName { font-size: 15px !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.25 !important; margin-top: 11px !important; }
.bizCard .bizContacts { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important; margin-top: 10px !important; }
.bizCard .bizContact { font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important; }
.bizCard.bizCardEmpty { align-items: stretch; justify-content: center; }

/* Ghost labels for empty fields: muted, half-shadow, not bulky — informative,
   not a nag. Same sizes as the real fields so it previews the layout. */
.bizCard .bizGhost {
  color: #94a3b8 !important;
  opacity: .55;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase;
}

/* Clear Cache / Log Out — blue border + blue label to match the 5 blue-bar
   buttons. Log Out keeps its muted text (deliberate accidental-tap guard). */
.prefsSubBtn { border: 1.5px solid #1d4ed8 !important; color: #1d4ed8 !important; }
.prefsLogout { color: #1d4ed8 !important; font-weight: 800 !important; }

/* ════════════════════════════════════════════════════════════════
   v7.85 — STORMS PAGE HEADER REORG (Chunk 4)
   One clean header top-to-bottom: title + reports row, count line
   (hidden until load), always-on legend, source + button, then cards.
   ════════════════════════════════════════════════════════════════ */
.hailHeader { padding: 10px 12px 6px; flex-shrink: 0; }
.hailHeaderTop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.hailHeaderTitle { font-size: 11px; color: #64748b; font-weight: 700; letter-spacing: .04em; }
.hailHeaderReports { font-size: 12px; color: #475569; font-weight: 600; text-align: right; white-space: nowrap; }
.hailHeaderCount { font-size: 12px; color: #64748b; font-weight: 700; text-align: center; padding: 0 0 7px; }
.hailLegendChips { display: flex; gap: 4px; justify-content: space-between; align-items: stretch; }
.hailHeaderSource { font-size: 12px; color: #64748b; font-weight: 600; text-align: center; padding: 9px 0 7px; line-height: 1.35; }
.hailHeaderBtnWrap { padding: 0 0 2px; }

/* ════════════════════════════════════════════════════════════════
   v7.88 — MAP BOTTOM-BAR ARRANGEMENT (Chunk 5a)
   Bottom bar becomes a flex row: Search (grows) · blue toggle · Opacity pill.
   SAT + find-me move to a floating, invisible-backed cluster top-right.
   First visual pass — positions to be dialed in from screenshots.
   ════════════════════════════════════════════════════════════════ */
.mapControlLine, .mapControlLine.up {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.mapControlLine > * { pointer-events: auto; }
.mapControlLine .addrSearchBar { flex: 1 1 auto; min-width: 0; }

/* blue reveal toggle, now inline in the bar (was absolute-center) */
.mapControlLine .chromeReveal {
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 auto;
  width: 56px;
  height: 48px;
  border-radius: 14px;
}

/* opacity as its own pill on the right, styled to match Search */
.mapControlLine .mapOpacityInline {
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  flex: 0 0 auto;
  height: 48px;
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  padding: 0 8px;
  gap: 6px;
  backdrop-filter: none;
}

/* SAT + find-me float top-right, invisible-backed */
.mapTopRightCtrls {
  position: absolute;
  top: calc(64px + var(--safe-top, 0px));
  right: 12px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.mapTopRightCtrls > * { pointer-events: auto; }
.mapTopRightCtrls .satFloat {
  height: 42px;
  border-radius: 21px;
  padding: 0 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.mapTopRightCtrls .findMeFloat {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
/* when the chrome is hidden, the top bar is gone — let the cluster rise */
.chromeHidden .mapTopRightCtrls { top: calc(14px + var(--safe-top, 0px)); }

/* ════════════════════════════════════════════════════════════════
   v7.89 — MAP TOP-RIGHT + BOTTOM-BAR DIAL-IN
   Top-right SAT + find-me get a blue border so they read on any
   map background. Reveal toggle wider. Opacity pill more compact.
   ════════════════════════════════════════════════════════════════ */
/* SAT + find-me: blue border + strong shadow so they're visible on white or satellite */
.mapTopRightCtrls .satFloat,
.mapTopRightCtrls .findMeFloat {
  border: 1.5px solid #1d4ed8 !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.28) !important;
  background: rgba(255,255,255,.97) !important;
}
/* reveal toggle wider — it's the "big blue button" */
.mapControlLine .chromeReveal {
  width: 66px !important;
}
/* opacity pill more compact so the − is clearly visible */
.mapControlLine .mapOpacityInline .opacityStepBtn {
  width: 28px !important;
  height: 28px !important;
}
.mapControlLine .mapOpacityInline .mapOpacityVal {
  min-width: 36px !important;
  font-size: 14px !important;
}
.mapControlLine .mapOpacityInline {
  gap: 4px !important;
  padding: 0 6px !important;
}

/* ════════════════════════════════════════════════════════════════
   v7.91 — PIN BUTTON OFF (hidden, NOT deleted)
   Pins are dropped by tapping the map; PIN only toggled silent/plan
   pins, which aren't in use. Button + all plan-mode code stay intact.
   TO RE-ENABLE: delete this whole block. Field bar returns to 5 cols.
   ════════════════════════════════════════════════════════════════ */
#fieldBar #addPinButton { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   v7.92 — SEARCH SUMMON
   SEARCH (field bar) pops the search bar high on the map, above where
   the keyboard lands. Tap again to dismiss. Search left the bottom strip.
   ════════════════════════════════════════════════════════════════ */
#appShell #addrSearchBar {
  position: absolute;
  top: calc(72px + var(--safe-top, 0px));
  left: 12px;
  right: 12px;
  width: auto;
  z-index: 960;
  display: none;
}
#appShell #addrSearchBar.searchOpen { display: flex; }
/* never show the search bar in the clean (retracted) view */
#appShell.chromeHidden #addrSearchBar { display: none !important; }
/* SEARCH button toggled-on state */
#fieldBar #mapSearchToggle.active { background: rgba(255,255,255,.20); }
/* bottom strip now holds just toggle + opacity — center them */
.mapControlLine { justify-content: center; }

/* ════════════════════════════════════════════════════════════════
   v7.93 — BOTTOM STRIP = SAT · TOGGLE · OPACITY (three locked zones)
   Grid 1fr/auto/1fr: SAT pinned left, toggle anchored dead center,
   opacity pinned right. They cannot overlap, and the toggle never
   shifts when opacity appears/disappears. Top edge now fully clean.
   ════════════════════════════════════════════════════════════════ */
.mapControlLine, .mapControlLine.up {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
}
.mapControlLine #satToggle      { justify-self: center !important; }
.mapControlLine #chromeReveal   { justify-self: center !important; }
.mapControlLine #mapOpacityCtrl { justify-self: center !important; }
/* SAT as a strip pill, matching opacity, blue border */
.mapControlLine .satStrip {
  height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 1.5px solid #1d4ed8;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  font-size: 14px;
  font-weight: 900;
  color: #1d4ed8;
}

/* ════════════════════════════════════════════════════════════════
   v7.95 — STRIP: bulletproof even spacing + blue buttons
   Three-ID selectors so nothing can override. All three forced to
   clean static grid items in equal thirds, each centered in its third.
   Blue fill so they read on white street maps (and as a load check:
   blue == new CSS loaded; white == cached, needs hard refresh).
   ════════════════════════════════════════════════════════════════ */
#appShell #mapControlLine,
#appShell #mapControlLine.up {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 8px !important;
}
#appShell #mapControlLine > #satToggle,
#appShell #mapControlLine > #chromeReveal,
#appShell #mapControlLine > #mapOpacityCtrl {
  position: static !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  transform: none !important;
  justify-self: center !important;
  margin: 0 !important;
}
/* blue fill — visible on white street maps; matches the toggle */
#appShell #mapControlLine #satToggle {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}
#appShell #mapControlLine #mapOpacityCtrl {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
#appShell #mapControlLine #mapOpacityCtrl .mapOpacityVal { color: #fff !important; }
#appShell #mapControlLine #mapOpacityCtrl .opacityStepBtn {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* ════════════════════════════════════════════════════════════════
   v7.96 — center toggle: blue fill, white triangle, larger arrow
   Overrides the older white-fill rule. Matches SAT + opacity blue.
   ════════════════════════════════════════════════════════════════ */
#appShell #mapControlLine #chromeReveal {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
  font-size: 30px !important;
}

/* ════════════════════════════════════════════════════════════════
   v7.97 — TOOLS PAGE TEARDOWN
   Hidden (NOT deleted) — restore any item by deleting its line below.
   Route Planner is parked for the routing rebuild; the rest are unused.
   Visits was relocated to the Maps panel. Tools now shows Export + Settings.
   ════════════════════════════════════════════════════════════════ */
#morePanel #resumeTool           { display: none !important; } /* Last Position — map auto-restores on open */
/* #morePanel #routeTool re-enabled for routing rebuild test (v7.113) */
#morePanel #territoryButton      { display: none !important; } /* Draw Territory */
#morePanel #territoryClearButton { display: none !important; } /* Clear Territory */
#morePanel #sessionsTool         { display: none !important; } /* Prospecting */

/* Export page — reports + send (v7.100) */
#morePanel .reportHead{font-size:13px;font-weight:800;letter-spacing:.06em;color:#1d4ed8;margin:14px 4px 8px;text-transform:uppercase}
#morePanel .reportItem{display:flex;align-items:flex-start;gap:12px;width:100%;background:#eef3ff;border:1px solid #c7d6ff;border-radius:12px;padding:12px 14px;margin:0 0 8px;text-align:left;cursor:pointer}
#morePanel .reportItem input[type=checkbox]{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:1px;flex:0 0 auto;border:2px solid #94a3b8;border-radius:6px;background:#fff;position:relative;cursor:pointer}
#morePanel .reportItem input[type=checkbox]:checked{background:#1d4ed8;border-color:#1d4ed8}
#morePanel .reportItem input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#morePanel .reportItem:has(input:checked){border-color:#1d4ed8;background:#dbe7ff}
#morePanel .reportItem .rptText{display:flex;flex-direction:column;gap:3px}
#morePanel .reportItem .rptText b{font-size:16px;color:#0f172a}
#morePanel .reportItem .rptText span{font-size:13px;color:#475569;line-height:1.35}
#morePanel .sendToLabel{display:block;font-size:13px;font-weight:700;color:#334155;margin:16px 4px 0}
#morePanel .sendToLabel input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #c7d6ff;border-radius:10px;font-size:16px;box-sizing:border-box}
#morePanel .sendBtnRow{display:flex;gap:10px;margin-top:10px}
#morePanel .sendBtnRow .sendBtn{flex:2;background:#1d4ed8;color:#fff}
#morePanel .sendBtnRow .copyBtn{flex:1;background:#1d4ed8;color:#fff}

/* Map top BACK button text to match panel back buttons (v7.105) */
#homeValueButton b{font-size:16px !important;font-weight:900}

/* TRACK OPTIONS toggles on the Export page (v7.107) */
#morePanel .trackOptsHead{font-size:13px;font-weight:800;letter-spacing:.06em;color:#1d4ed8;margin:16px 4px 8px;text-transform:uppercase}
#morePanel .optRow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef3ff;border:1px solid #c7d6ff;border-radius:12px;padding:12px 14px;margin:0 0 8px;cursor:pointer}
#morePanel .optLabel{font-size:15px;color:#0f172a}
#morePanel .optSwitch{-webkit-appearance:none;appearance:none;width:48px;height:28px;flex:0 0 auto;border-radius:999px;background:#cbd5e1;position:relative;cursor:pointer;transition:background .15s}
#morePanel .optSwitch:checked{background:#1d4ed8}
#morePanel .optSwitch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
#morePanel .optSwitch:checked::after{left:23px}
#morePanel .alertSignup{margin:20px 4px 0;padding:16px 14px;background:#eef3ff;border:1px solid #c7d6ff;border-radius:12px}
#morePanel .alertSignupHead{font-size:13px;font-weight:800;letter-spacing:.06em;color:#1d4ed8;text-transform:uppercase}
#morePanel .alertSignupSub{font-size:14px;color:#475569;margin:4px 0 4px}
#morePanel .alertSignup .sendToLabel{margin-top:10px}
#morePanel .alertSignupPrivacy{font-size:11px;color:#64748b;line-height:1.45;margin:8px 2px 0}
#morePanel .alertSignup .sendBtn{width:100%;margin-top:12px;background:#1d4ed8;color:#fff}
#morePanel .alertSignup .sendBtn:disabled{opacity:.6}
#morePanel .alertSignupMsg{font-size:14px;font-weight:600;margin:10px 2px 0;min-height:18px}
#morePanel .alertSignupMsg.ok{color:#16a34a}
#morePanel .alertSignupMsg.err{color:#dc2626}


/* Blinker live-camera capture overlay */
#blinkerCam { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column; }
#blinkerCam.hidden { display: none; }
#blinkerVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#blinkerHint { position: relative; z-index: 2; text-align: center; color: #fff; font-weight: 700; padding: 18px 16px; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }
#blinkerBar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 14px; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0)); }
#blinkerCancel, #blinkerShoot { flex: 1; border: none; border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 800; }
#blinkerCancel { background: rgba(255,255,255,.16); color: #fff; }
#blinkerShoot { background: #2563eb; color: #fff; }


/* value-check confidence / comp-count line */
.vcConfidence { text-align: center; font-size: 13px; font-weight: 700; margin-top: 6px; letter-spacing: .2px; }
.vcCL-H { color: #16a34a; }
.vcCL-M { color: #d97706; }
.vcCL-L { color: #dc2626; }
.vcCL-x { color: #6b7280; }


/* ===== v7.116 field polish ===== */
/* navigate arrow on the pin card: filled, bigger, white icon so it pops */
#pinNavIcon{background:#1d4ed8!important;width:44px!important;height:44px!important;box-shadow:0 2px 7px rgba(29,78,216,.5)!important}
#pinNavIcon svg{stroke:#ffffff!important;width:24px!important;height:24px!important}
/* delete pin: text fits neatly in the box */
#deletePinButton{font-size:12px!important;letter-spacing:0!important}
/* app name wordmark on the home header */
.valueTitle{font-size:27px!important;font-weight:800!important}
.valueTitle .vtPDR{color:#ff5a5f!important;font-weight:800}
/* export page: compact to fit one screen, drop the row descriptions */
#morePanel .toolList{gap:6px!important;padding:8px 10px!important}
#morePanel .reportItem{padding:8px 12px!important;margin:0 0 5px!important}
#morePanel .reportItem .rptText b{font-size:14px!important}
#morePanel .reportItem .rptText span{display:none!important}


/* ===== v7.117 title: large mixed-case white wordmark ===== */
.valueHeader{min-height:84px!important}
.valueTitle{text-transform:none!important;line-height:1!important;color:#fff!important;white-space:nowrap!important}
.valueTitle .vtMain{font-size:46px!important;font-weight:800;color:#fff!important}
.valueTitle .vtPDR{font-size:22px!important;color:#fff!important;font-weight:700;letter-spacing:.04em}


/* ===== v7.118 title: Vector only, mixed case, original bar height ===== */
.valueHeader{min-height:64px!important}
.valueHeader .valueTitle .vtMain{font-size:38px!important;text-transform:none!important;font-weight:800!important;color:#fff!important;letter-spacing:.01em}

/* ===== v7.121 Blinker zoom slider (native lens zoom + digital fallback) ===== */
#blinkerCam{overflow:hidden}
#blinkerVideo{transform-origin:center center}
#blinkerZoomWrap{position:absolute;left:18px;right:18px;bottom:104px;display:flex;align-items:center;gap:12px;z-index:6}
#blinkerZoomWrap.hidden{display:none}
#blinkerZoomWrap .bzMinus,#blinkerZoomWrap .bzPlus{color:#fff;font-size:26px;font-weight:700;width:26px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none}
#blinkerZoom{flex:1;height:36px;-webkit-appearance:none;appearance:none;background:transparent}
#blinkerZoom::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.45)}
#blinkerZoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#2348d8;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);margin-top:-12px}
#blinkerZoom::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.45)}
#blinkerZoom::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#2348d8;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* SOS standing-by indicator with bouncing dots (v7.125) */
.sosStandby{margin:18px auto 0;max-width:300px;display:flex;align-items:center;justify-content:center;gap:2px;color:#0f172a;font-size:15px;font-weight:700;letter-spacing:.01em;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:13px 16px;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.sosStandbyText{color:#0f172a}
.sosDots{display:inline-block;margin-left:4px;vertical-align:middle}
.sosDots span{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:currentColor;animation:sosDotBounce 1.2s infinite ease-in-out both}
.sosDots span:nth-child(1){animation-delay:-.24s}
.sosDots span:nth-child(2){animation-delay:-.12s}
.sosDots span:nth-child(3){animation-delay:0s}
@keyframes sosDotBounce{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-6px);opacity:1}}


/* SOS two-way conversation thread (v7.130) */
#supportPanel.inThread .supportBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0}
.sosThreadView{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.sosThreadStatus{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:2px;color:#0f172a;font-size:14px;font-weight:800;letter-spacing:.01em;padding:9px 16px;background:#fff;border-bottom:1px solid var(--line)}
.sosThreadMessages{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sosComposer{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
.sosComposerInput{flex:1 1 auto;width:auto;min-width:0;height:46px;border:1.5px solid var(--line);border-radius:12px;background:var(--soft);padding:0 14px;font-size:16px;color:var(--text);text-transform:none;letter-spacing:0}
.sosComposerInput:focus{border-color:var(--blue)}
.sosComposerSend{flex:0 0 auto;height:46px;padding:0 20px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:15px;font-weight:900;letter-spacing:.04em}
.sosComposerSend:active{transform:translateY(1px)}
.sosMsg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:15px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}
.sosMsg .sosMsgWho{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
.sosMsg--operator{align-self:flex-start;background:#fff;border:1.5px solid var(--line);color:#0f172a}
.sosMsg--tester{align-self:flex-end;background:var(--blue);color:#fff}
.sosMsg--tester .sosMsgWho{opacity:.85}

/* Operator console (v7.131) */
.opsHomeBtn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-bottom:8px;border:2px solid #dc2626;border-radius:12px;background:#fff;color:#dc2626;font-size:15px;font-weight:900;letter-spacing:.04em}
.opsHomeBtn:active{background:#fef2f2}
.opsHomeBadge{min-width:22px;height:22px;border-radius:11px;background:#dc2626;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px}
.opsBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#opsListView{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
.opsClusterHead{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px}
.opsCallRow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.opsCallRow:active{background:var(--soft)}
.opsCallMain{flex:1 1 auto;min-width:0}
.opsCallCode{font-size:15px;font-weight:800;color:#0f172a}
.opsCallMeta{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opsCallGo{flex:0 0 auto;color:var(--blue);font-weight:900;font-size:22px;line-height:1}
.opsEmpty{text-align:center;color:var(--muted);padding:48px 16px;font-size:15px}
.opsThreadView{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.opsThreadHead{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--line)}
.opsThreadWho{flex:1 1 auto;text-align:center;font-size:14px;font-weight:800;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opsBackToList{flex:0 0 auto;border:0;background:transparent;color:var(--blue);font-weight:800;font-size:14px;padding:6px 8px}
.opsResolve{flex:0 0 auto;border:0;border-radius:10px;background:#16a34a;color:#fff;font-weight:800;font-size:13px;padding:9px 13px}
.opsResolve:active{transform:translateY(1px)}

/* Operator console: unread indicators (v7.132) */
.opsUnreadDot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#dc2626}
.opsCallRow.unread{border-color:#dc2626;background:#fff7f7}
.opsCallRow.unread .opsCallCode{color:#dc2626}

/* Operator console: reply-to-all (v7.133) */
.opsClusterHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.opsReplyAll{flex:0 0 auto;border:1px solid var(--blue);border-radius:9px;background:#fff;color:var(--blue);font-weight:800;font-size:12px;padding:5px 10px}
.opsReplyAll:active{background:#eff6ff}
.opsBroadcast{position:absolute;inset:0;z-index:10;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px}
.opsBroadcastCard{width:100%;max-width:520px;margin-top:40px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.opsBroadcastTitle{font-size:15px;font-weight:900;color:#0f172a;margin-bottom:10px}
.opsBroadcastInput{width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--soft);padding:10px 12px;font-size:16px;color:var(--text);text-transform:none;letter-spacing:0;resize:none}
.opsBroadcastBtns{display:flex;gap:10px;margin-top:12px;justify-content:flex-end}
.opsBroadcastCancel{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-weight:800;font-size:14px;padding:9px 16px}
.opsBroadcastSend{border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:900;font-size:14px;padding:9px 18px}
.opsBroadcastSend:active{transform:translateY(1px)}


/* SOS standby: light up when support replies (v7.140) */
.sosStandby--reply{border-color:#16a34a !important;background:#f0fdf4;cursor:pointer}
.sosStandby--reply .sosStandbyText{color:#166534;font-weight:800}
#openSupportFromHome.sosReply{position:relative}
#openSupportFromHome.sosReply::after{content:"";position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 2px #fff}

/* SOS standby: calm 'online' state after reply is read (v7.141) */
.sosStandby--online{border-color:#94a3b8 !important;background:#f8fafc;cursor:pointer}
.sosStandby--online .sosStandbyText{color:#475569;font-weight:700}

/* ── Memory engine: rep scoreboard (front page, below value check) ── */
.vMetrics{background:#fff;border:2px solid #1d4ed8;border-radius:14px;padding:11px 13px 13px;margin:auto auto 0;max-width:460px;box-shadow:0 7px 20px rgba(20,30,60,.16),0 2px 6px rgba(20,30,60,.10)}
.vMetrics.hidden{display:none}
.vmHead{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.vmNav{width:26px;height:26px;flex:0 0 auto;border:none;background:#eef1f8;color:#33405e;border-radius:7px;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vmNav:active{background:#e0e5f1}
.vmPeriod{flex:1;text-align:center;font-weight:700;font-size:13px;color:#1b2640;letter-spacing:.01em}
.vmToggle{flex:0 0 auto;border:1px solid #d4dbea;background:#f6f8fc;color:#2a3550;font-weight:600;font-size:11px;padding:5px 9px;border-radius:8px;cursor:pointer}
.vmToggle:active{background:#eef1f8}
.vmGraphs{display:flex;flex-direction:column;gap:8px}
.vmGraphBlock{display:flex;flex-direction:column}
.vmGraphLabel{font-size:9px;font-weight:700;letter-spacing:.08em;color:#8a93a8;margin-bottom:2px}
.vmSvg{width:100%;height:54px;display:block}
.vmTotals{display:flex;gap:8px;margin-top:10px}
.vmStat{flex:1;text-align:center;background:#f7f9fc;border-radius:10px;padding:7px 4px}
.vmStatVal{font-size:19px;font-weight:800;color:#1b2640;line-height:1.1}
.vmStatLbl{font-size:9px;font-weight:600;letter-spacing:.04em;color:#8a93a8;text-transform:uppercase;margin-top:2px}
.vmStatAvg{background:#eef4ff}
.vmStatAvg .vmStatVal{color:#1f4fd8}

.vmAxis{position:relative;height:13px;margin-top:1px}
.vmAxisLbl{position:absolute;transform:translateX(-50%);font-size:9px;color:#9aa3b5;font-weight:600;white-space:nowrap}
.prefsStatsOn{background:#1d4ed8 !important;color:#fff !important;border-color:#1d4ed8 !important}
.vtMain{text-shadow:0 1px 1px rgba(0,0,0,.22),0 3px 7px rgba(0,0,0,.30)!important}
:root{color-scheme:light}
.pinActionRow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 12px;background:#1d4ed8;border-radius:13px;padding:4px}
.pinActBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 3px;border:none;border-radius:9px;background:#fff;color:#334155;font-size:11px;font-weight:800;line-height:1.12;text-align:center;cursor:pointer}
.pinActBtn>span{font-size:18px;line-height:1}
.pinActBtn.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.28)}
.pinActDelete{background:#fee2e2;border-color:#dc2626;color:#dc2626}
#pinNote::placeholder{color:#64748b}
#pinNote{border:2px solid #1d4ed8}

/* v7.167 Reports: 2-column compact checkboxes */
.reportGrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:6px}
.reportGrid .reportItem{align-items:center;margin:0;padding:9px 10px}
.reportGrid .rptText>span{display:none}

/* v7.169 Reports email tap-buttons */
.emailChips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 4px 2px}
.emailChip{display:inline-flex;align-items:center;gap:6px;background:#eef3ff;border:1px solid #c7d6ff;color:#1d4ed8;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:700;cursor:pointer}
.emailChip .chipX{font-weight:900;color:#64748b;font-size:15px;line-height:1;padding:0 1px}
.emailChipOn{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.emailChipOn .chipX{color:#dbeafe}

/* v7.170 field cluster: SAT + toggle + TRACK, same size, grouped low */
#mapControlLine{gap:8px !important}
#mapControlLine #satToggle.satStrip,
#mapControlLine #chromeReveal,
#mapControlLine #trackButton.clusterBtn{
  width:62px !important;min-width:62px !important;height:54px !important;
  border-radius:13px !important;padding:0 !important;
  display:flex !important;flex-direction:column !important;
  align-items:center !important;justify-content:center !important;
  box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
}
#mapControlLine #trackButton.clusterBtn{background:#fff !important;border:1.5px solid #1d4ed8 !important}
#mapControlLine #trackButton.clusterBtn span{font-size:20px !important;line-height:1 !important;color:#1d4ed8 !important;filter:none !important}
#mapControlLine #trackButton.clusterBtn b{font-size:9px !important;font-weight:900 !important;color:#1d4ed8 !important}
#mapControlLine #trackButton.clusterBtn.active{background:#fbbf24 !important;border-color:#f59e0b !important}
#mapControlLine #trackButton.clusterBtn.active span,#mapControlLine #trackButton.clusterBtn.active b{color:#1e293b !important}
#mapControlLine #trackButton.clusterBtn.paused{background:#fef3c7 !important}
#mapControlLine #trackButton.clusterBtn.paused span,#mapControlLine #trackButton.clusterBtn.paused b{color:#92400e !important}

/* v7.173 Clear Border button: edge-anchored, appears only while a fence exists */
.clearBorderBtn{position:absolute;top:72px;left:10px;z-index:600;background:#fff;border:1.5px solid #dc2626;color:#dc2626;font-weight:900;font-size:13px;letter-spacing:.02em;padding:9px 13px;border-radius:11px;box-shadow:0 2px 10px rgba(0,0,0,.22);cursor:pointer}
.clearBorderBtn.armed{background:#dc2626;color:#fff;border-color:#dc2626}

/* v7.175 Usage dashboard (owner only) */
.usageBody{padding:14px 14px 24px;overflow-y:auto}
.usageSummary{font-size:13px;font-weight:800;color:#1d4ed8;margin:0 2px 12px;letter-spacing:.02em}
.usageList{display:flex;flex-direction:column;gap:8px}
.usageRow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef3ff;border:1px solid #c7d6ff;border-radius:12px;padding:11px 13px}
.usageCode{font-weight:900;font-size:15px;color:#0f172a;letter-spacing:.03em}
.usageMeta{font-size:12px;color:#475569;margin-top:2px}
.usageRight{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.usagePill{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px}
.pill-active{background:#dcfce7;color:#166534}
.pill-slowing{background:#fef9c3;color:#854d0e}
.pill-quiet{background:#fee2e2;color:#991b1b}
.pill-never{background:#e2e8f0;color:#475569}
.usageSeen{font-size:11px;color:#64748b}
.usageEmpty{text-align:center;color:#64748b;padding:34px 16px;font-size:14px}
.opsHomeBtn + .opsHomeBtn{margin-top:8px}

.mapsStormsBtn { background:linear-gradient(180deg,#1d4ed8,#1e3a8a) !important; font-size:18px !important; letter-spacing:.04em !important; }

/* hail live on map -> Maps button lights up amber */
#mapNameButton.hailGlow { background:#fef3c7 !important; box-shadow:0 0 0 2px #f59e0b, 0 0 12px rgba(245,158,11,.55) !important; }
#mapNameButton.hailGlow .topBtnIcon, #mapNameButton.hailGlow b { color:#92400e !important; }

/* VMI-1 advisory note: market-intelligence context, not a changed value */
.vcVmi{margin-top:8px;padding:8px 10px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;font-size:12px;line-height:1.4;color:#475569}
.vcVmi.vcVmiReview{background:#fff7ed;border-color:#fed7aa;color:#9a3412;font-weight:600}

/* ── FEEDBACK DIALOG ─────────────────────────────────────── */
.feedbackOverlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(8,18,38,.55);padding:20px}
.feedbackOverlay.show{display:flex}
.feedbackCard{width:100%;max-width:420px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(8,18,38,.35)}
.feedbackCard h3{margin:0 0 6px;color:var(--blue);font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.feedbackHint{margin:0 0 12px;color:#64748b;font-size:13px;line-height:1.45}
.feedbackCard textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px;font-size:15px;font-family:inherit;resize:vertical;box-sizing:border-box}
.feedbackCard textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.feedbackMeta{margin-top:8px;color:#94a3b8;font-size:11px;line-height:1.4;letter-spacing:.02em}
.feedbackActions{display:flex;gap:10px;margin-top:14px}
.feedbackBtn{flex:1;height:44px;border:0;border-radius:11px;font-weight:900;font-size:14px;cursor:pointer;letter-spacing:.03em}
.feedbackCancel{background:#eef2f7;color:#475569}
.feedbackSend{background:var(--blue);color:#fff}
.feedbackSend:disabled{opacity:.55;cursor:default}
.feedbackStatus{margin-top:10px;text-align:center;font-size:13px;font-weight:700;min-height:18px}
.feedbackStatus.ok{color:#16a34a}
.feedbackStatus.err{color:#dc2626}