/* Hail Impact Map by ZIP — native conversion of the design-collab page. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: 'Manrope', system-ui, sans-serif; }

/* MapLibre chrome (from the design helmet) */
.maplibregl-ctrl-bottom-right { right: 16px; bottom: 16px; }
.maplibregl-ctrl-group { border-radius: 10px !important; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.maplibregl-ctrl-group button { background: #161b22 !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,.08) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) brightness(1.4); }
.maplibregl-ctrl-attrib { background: rgba(13,17,23,.72) !important; }
.maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib { color: #8b94a3 !important; }
.maplibregl-ctrl-bottom-right { bottom: 0 !important; right: 0 !important; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: block !important; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { display: none !important; }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 0 !important; }

/* Scrollbars */
.hailscroll::-webkit-scrollbar { width: 8px; }
.hailscroll::-webkit-scrollbar-thumb { background: #d9d5cc; border-radius: 8px; }
.hailscroll::-webkit-scrollbar-track { background: transparent; }
.hailscroll-x { scrollbar-width: none; -ms-overflow-style: none; }
.hailscroll-x::-webkit-scrollbar { height: 0; width: 0; display: none; }

/* Keyframes */
@keyframes hcpulse { 0% { box-shadow: 0 0 0 0 rgba(79,124,255,.5);} 70%{ box-shadow: 0 0 0 12px rgba(79,124,255,0);} 100%{ box-shadow: 0 0 0 0 rgba(79,124,255,0);} }
@keyframes hcspin { to { transform:rotate(360deg); } }
@keyframes hcfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes hcpop { 0% { transform:scale(0); } 62% { transform:scale(1.18); } 100% { transform:scale(1); } }
@keyframes hcgps { 0% { transform:translate(-50%,-50%) scale(0.04); opacity:0; } 10% { opacity:.75; } 100% { transform:translate(-50%,-50%) scale(1); opacity:0; } }
@keyframes hcgpsdot { 0%,100% { box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(59,130,246,.30), 0 2px 8px rgba(0,0,0,.45); } 50% { box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 0 10px rgba(59,130,246,0), 0 2px 8px rgba(0,0,0,.45); } }

/* Sidebar open/close */
.verify-sidebar {
  position: absolute; top: 0; left: 74px; bottom: 0; width: 384px; z-index: 25;
  display: flex; flex-direction: column; background: #f6f5f2; border-right: 1px solid #e0ddd4;
  box-shadow: 8px 0 30px rgba(0,0,0,.25);
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.verify-sidebar.hmv-closed { transform: translateX(calc(-100% - 74px)); }

.verify-open-tab {
  position: absolute; top: 50%; left: 74px; transform: translateY(-50%); z-index: 24;
  width: 34px; height: 60px; border: none; border-radius: 0 12px 12px 0; background: #f6f5f2;
  box-shadow: 4px 0 16px rgba(0,0,0,.22); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  animation: hcpulse 2.4s infinite;
}
.verify-open-tab.hmv-visible { display: flex; }

/* Sidebar panels */
.hmv-panel { position: absolute; top: 0; right: 0; bottom: 44px; left: 0; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* Tool rail buttons */
.hmv-tool {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; padding: 9px 0;
  border: none; border-radius: 12px; cursor: pointer; background: transparent; color: #8b94a3;
  font-family: 'Manrope', sans-serif; transition: background .15s, color .15s;
}
.hmv-tool.hmv-active { background: rgba(79,124,255,.16); color: #7aa0ff; }

/* Hover / focus states (the dc runtime's style-hover / style-focus) */
.hmv-primary:hover { background: #3d6af0 !important; }
.hmv-zip-input:focus { border-color: #4f7cff !important; background: #fff !important; }
.hmv-close-float:hover { background: rgba(13,17,23,.95) !important; }
.hmv-back-btn:hover { background: #f1efe9 !important; }
.hmv-more-zips:hover { background: #3d6af0 !important; border-color: #3d6af0 !important; }
.hmv-remote-link:hover { color: #3d6af0 !important; }

/* Profile / focus-area option rows */
.hmv-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 13px 16px; border: 1.5px solid #e7e4dd; border-radius: 12px; background: #fff;
  cursor: pointer; text-align: left; box-shadow: none; font-family: 'Manrope', sans-serif;
  transition: border-color .14s, box-shadow .14s;
}
.hmv-opt:hover { border-color: #c7cdd6; }
.hmv-opt.hmv-sel { border-color: #4f7cff; box-shadow: 0 2px 10px rgba(79,124,255,.14); }
.hmv-opt.hmv-sel:hover { border-color: #4f7cff; }
.hmv-opt-label { font-size: 13.5px; font-weight: 700; color: #2b303a; }
.hmv-opt.hmv-sel .hmv-opt-label { color: #4f7cff; }
.hmv-opt-box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; border: 1.5px solid #cfd4dc; background: #fff;
}
.hmv-opt.hmv-sel .hmv-opt-box { border-color: #4f7cff; background: #4f7cff; }
.hmv-opt-box svg { display: none; }
.hmv-opt.hmv-sel .hmv-opt-box svg { display: block; }

/* Pro cards */
.hmv-pro-card {
  position: relative; margin-top: 9px; padding: 14px 15px; border-radius: 16px; background: #fff;
  cursor: pointer; border: 1.5px solid #ece9e2; box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: border-color .15s, box-shadow .15s;
}
.hmv-pro-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.1); }
.hmv-pro-card.hmv-sel { border-color: #4f7cff; box-shadow: 0 8px 24px rgba(79,124,255,.2); }

/* Mobile */
@media (max-width: 600px) {
  .verify-tool-rail { width: 58px !important; }
  .verify-tool-rail > button { width: 50px !important; }
  .verify-sidebar { left: 58px !important; width: calc(100vw - 58px) !important; }
  .verify-open-tab { left: 58px !important; }
}