@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --navy:      #1a3a8f;
  --navy-dk:   #0f2460;
  --navy-lt:   #e8edf8;
  --orange:    #e8600a;
  --white:     #ffffff;
  --offwhite:  #f5f7fb;
  --border:    #d1daf0;
  --txt:       #1a1a2e;
  --txt-mid:   #4a5568;
  --txt-mute:  #8a9ab5;
  --go:        #16a34a; --go-bg: #dcfce7;   --go-bd: #86efac;
  --warn:      #d97706; --warn-bg: #fef3c7; --warn-bd: #fde68a;
  --no:        #dc2626; --no-bg: #fee2e2;   --no-bd: #fca5a5;
  --font:      'Inter', sans-serif;
  --mono:      'IBM Plex Mono', monospace;
  --hh:        60px;
  --r:         10px;
  --rl:        14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:#fff}

/* ─ HEADER ─────────────────────────────────────────────── */
.map-header{
  position:fixed;inset:0 0 auto 0;
  height:var(--hh);
  background:#fff;
  border-bottom:3px solid var(--orange);
  box-shadow:0 1px 8px rgba(0,0,0,.10);
  display:flex;align-items:center;gap:8px;
  padding:0 10px;z-index:1000;
}
.map-header-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.map-header-logo img{height:44px;width:auto;max-width:150px;object-fit:contain}

.search-bar{
  flex:1;min-width:0;display:flex;align-items:center;
  background:var(--offwhite);border:1.5px solid var(--border);border-radius:8px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.search-bar:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,58,143,.1)}
.search-icon{padding:0 8px 0 10px;color:var(--txt-mute);font-size:14px;flex-shrink:0}
#location-search{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:14px var(--font);color:var(--txt);padding:9px 0;
}
#location-search::placeholder{color:var(--txt-mute)}
.search-clear{
  display:none;background:none;border:none;
  padding:0 9px;color:var(--txt-mute);font-size:15px;cursor:pointer;flex-shrink:0;
}
.search-clear.visible{display:block}

.crop-selector{flex-shrink:0}
#crop-select{
  background:var(--offwhite);border:1.5px solid var(--border);border-radius:8px;
  color:var(--txt);font:500 13px var(--font);padding:8px 26px 8px 8px;
  cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' fill='none' stroke='%238a9ab5' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;white-space:nowrap;
}
#crop-select:focus{border-color:var(--navy)}
#crop-select option{background:#fff;color:var(--txt)}

.search-suggestions{
  position:fixed;top:calc(var(--hh) + 2px);left:10px;right:10px;
  max-width:460px;background:#fff;
  border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);
  box-shadow:0 6px 20px rgba(26,58,143,.12);z-index:1001;display:none;overflow:hidden;
}
.search-suggestions.visible{display:block}
.suggestion-item{
  padding:10px 14px;font-size:13px;color:var(--txt);cursor:pointer;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;
}
.suggestion-item:last-child{border-bottom:none}
.suggestion-item:hover{background:var(--navy-lt)}
.suggestion-item .sug-name{font-weight:600}
.suggestion-item .sug-region{color:var(--txt-mute);font-size:11px;margin-left:auto}

/* ─ MAP ─────────────────────────────────────────────────── */
#map{position:fixed;inset:var(--hh) 0 0 0;z-index:0}

.map-prompt{
  position:fixed;top:calc(var(--hh) + 50%);left:50%;
  transform:translate(-50%,-50%);
  background:rgba(15,36,96,.88);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:var(--rl);
  padding:18px 24px;text-align:center;z-index:500;
  backdrop-filter:blur(8px);pointer-events:none;
  transition:opacity .3s;max-width:min(270px,88vw);
}
.map-prompt.hidden{opacity:0}
.map-prompt .prompt-icon{font-size:28px;margin-bottom:8px}
.map-prompt .prompt-text{font-size:14px;font-weight:500;line-height:1.5}
.map-prompt .prompt-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:5px}

/* ─ DECISION PANEL ─────────────────────────────────────── */
/* Mobile: bottom sheet */
.decision-panel{
  position:fixed;inset:auto 0 0 0;z-index:900;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.decision-panel.open{transform:translateY(0)}

.panel-inner{
  background:#fff;
  border-radius:var(--rl) var(--rl) 0 0;
  box-shadow:0 -4px 24px rgba(26,58,143,.15);
  max-height:72vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,12px);
}

/* Desktop: sidebar */
@media(min-width:768px){
  .decision-panel{
    inset:auto 14px 14px auto;width:358px;
    transform:translateX(calc(100% + 18px));
    transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  }
  .decision-panel.open{transform:translateX(0)}
  .panel-inner{
    border-radius:var(--rl);
    max-height:calc(100vh - var(--hh) - 28px);
  }
  .handle-bar{display:none}
}

/* Panel header */
.panel-handle{
  position:sticky;top:0;z-index:10;background:#fff;
  display:flex;align-items:center;gap:8px;
  padding:13px 12px 9px;
  border-bottom:1px solid var(--border);
}
.handle-bar{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--border);
}
.panel-location{
  flex:1;min-width:0;display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--navy);overflow:hidden;
}
.panel-location .loc-icon{color:var(--orange);flex-shrink:0}
.panel-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-crop-badge{
  flex-shrink:0;font-size:11px;font-weight:600;
  background:var(--navy-lt);color:var(--navy);
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.panel-close{
  flex-shrink:0;background:none;border:none;
  font-size:17px;color:var(--txt-mute);cursor:pointer;padding:2px 3px;line-height:1;
}

/* Weather strip */
.weather-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--offwhite);border-bottom:1px solid var(--border);
}
.wx-cell{
  padding:10px 4px;text-align:center;
  border-right:1px solid var(--border);
}
.wx-cell:last-child{border-right:none}
.wx-cell .wx-val{font:600 16px var(--mono);color:var(--navy);line-height:1}
.wx-cell .wx-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-mute);margin-top:4px}

/* Decision cards */
.panel-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;padding:9px;
}
.p-card{
  border-radius:var(--r);padding:10px 10px 10px 13px;
  border:1px solid transparent;position:relative;overflow:hidden;
}
.p-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px}
.p-card.go    {background:var(--go-bg);  border-color:var(--go-bd)}
.p-card.go::before{background:var(--go)}
.p-card.caution{background:var(--warn-bg);border-color:var(--warn-bd)}
.p-card.caution::before{background:var(--warn)}
.p-card.nogo  {background:var(--no-bg);  border-color:var(--no-bd)}
.p-card.nogo::before{background:var(--no)}
.pc-icon{font-size:17px;line-height:1}
.pc-question{font-size:11px;font-weight:700;color:var(--txt);margin-top:5px;line-height:1.3}
.pc-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.p-card.go     .pc-status{color:var(--go)}
.p-card.caution .pc-status{color:var(--warn)}
.p-card.nogo   .pc-status{color:var(--no)}
.pc-reason{font-size:10px;color:var(--txt-mid);margin-top:2px;line-height:1.4}

/* Season tiles */
.season-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 9px 9px}
.sb-tile{background:var(--navy-lt);border-radius:var(--r);padding:8px 10px;text-align:center}
.sb-tile .sb-val{font:700 15px var(--mono);color:var(--navy);line-height:1}
.sb-tile .sb-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-mute);margin-top:4px}

/* Forecast strip */
.forecast-label{padding:2px 9px 5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--txt-mute)}
.forecast-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 9px 11px}
.forecast-scroll-wrap::-webkit-scrollbar{display:none}
.forecast-row{display:flex;gap:5px;width:max-content}
.fc-day{
  background:var(--offwhite);border:1px solid var(--border);
  border-radius:8px;padding:7px 8px 6px;min-width:54px;text-align:center;flex-shrink:0;
}
.fc-day.today{border-color:var(--orange);background:#fff5f0}
.fcd-dow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-mute)}
.fc-day.today .fcd-dow{color:var(--orange)}
.fcd-icon{font-size:15px;margin:3px 0 2px;line-height:1}
.fcd-hi{font:700 12px var(--mono);color:var(--navy)}
.fcd-lo{font:400 10px var(--mono);color:var(--txt-mute)}
.fcd-rain{font-size:9px;color:#2563eb;margin-top:2px}
.fcd-rain.dry{color:var(--txt-mute)}

/* CTA */
.panel-cta{
  margin:0 9px 13px;
  background:linear-gradient(135deg,var(--navy-dk),var(--navy));
  border-radius:var(--r);padding:12px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.cta-title{font-size:13px;font-weight:700;color:#fff}
.cta-sub{font-size:11px;color:rgba(255,255,255,.65);margin-top:2px}
.cta-btn{
  flex-shrink:0;background:var(--orange);color:#fff;border:none;
  border-radius:6px;padding:8px 13px;font:700 12px var(--font);cursor:pointer;white-space:nowrap;
}

/* Loading */
.panel-loading{padding:30px 16px;text-align:center;color:var(--txt-mute)}
.pl-spinner{
  width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--orange);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.pl-text{font-size:13px}

/* Marker */
.gisit-marker{
  width:14px;height:14px;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 0 0 3px rgba(232,96,10,.3),0 2px 6px rgba(0,0,0,.25);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(232,96,10,.3),0 2px 6px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 7px rgba(232,96,10,.08),0 2px 6px rgba(0,0,0,.25)}
}

.leaflet-control-zoom a{color:var(--navy)!important;font-weight:700}
.leaflet-control-zoom a:hover{background:var(--navy-lt)!important}

/*  Layer Control Panel  */
.layer-panel{
  position:fixed;
  top:calc(var(--hh) + 56px);
  left:10px;
  z-index:450;
}
.layer-toggle-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--navy);color:#fff;
  border:none;border-radius:6px;
  padding:7px 10px;
  font:600 10px var(--font);
  text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  white-space:nowrap;
}
.layer-toggle-btn:hover{background:var(--navy-dk,#0d1f5c)}
.layer-panel-body{
  display:none;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(26,58,143,.18);
  padding:12px;
  margin-top:6px;
  min-width:165px;
}
.layer-panel-body.open{display:block}
.layer-group{margin-bottom:10px}
.layer-group:last-child{margin-bottom:0}
.layer-group-label{
  font:700 9px var(--font);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--txt-mute);
  margin-bottom:6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.lbtn{
  display:block;width:100%;
  text-align:left;
  background:var(--offwhite);
  border:1.5px solid var(--border);
  border-radius:5px;
  padding:5px 8px;
  font:500 11px var(--font);
  color:var(--navy);
  cursor:pointer;
  margin-bottom:3px;
  transition:all .15s;
}
.lbtn:last-child{margin-bottom:0}
.lbtn:hover{background:var(--navy-lt)}
.lbtn.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.lbtn.needs-key{
  opacity:.45;cursor:default;
  font-style:italic;
}
.lbtn.coming-soon{
  opacity:.45;cursor:default;
  font-style:italic;
}
@media(min-width:768px){
  .layer-panel{top:calc(var(--hh) + 10px);left:10px}
}