:root{
  /* Minnesota flag palette */
  --mn-light:#63B3FF;   /* light blue */
  --mn-dark:#0B4F6C;    /* dark blue */
  --mn-yellow:#FFC107;  /* yellow/gold */
  --mn-white:#FFFFFF;

  /* UI neutrals */
  --bg:#F7FAFC;
  --ink:#0F172A;
  --muted:#475569;
  --panel:#FFFFFF;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* Title */
.titlebar{
  position:fixed; z-index:500;
  left:1rem; top:1rem;
  background:linear-gradient(120deg,var(--mn-dark),#093B51);
  color:var(--mn-white);
  padding:.75rem 1rem;
  border-radius:1rem;
  box-shadow:var(--shadow);
  border:3px solid var(--mn-yellow);
}
.titlebar h1{
  margin:0; font-size:1rem; letter-spacing:.02em; font-weight:800;
}

/* Map */
#map{ position:absolute; inset:0; }

/* Panel */
.panel{
  position:fixed; z-index:520;
  left:1rem; bottom:1rem; width:320px;
  background:var(--panel);
  border-radius:1rem; box-shadow:var(--shadow);
  border:2px solid var(--mn-dark);
  overflow:hidden;
}
.panel__toggle{
  width:100%; text-align:left;
  background:var(--mn-dark); color:var(--mn-white);
  padding:.75rem 1rem; border:0; cursor:pointer; font-weight:700;
}
.panel__contents{ padding:1rem; max-height:50vh; overflow:auto; }
.label{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:.3rem; }
.input,.select{
  width:100%; border:2px solid var(--mn-dark); border-radius:.75rem;
  padding:.55rem .7rem; font-size:.95rem; outline:0; background:#fff;
}
.mt{ margin-top:1rem; }

.legend{ display:flex; gap:.75rem; align-items:center; padding:.5rem; background:#F0F8FF; border-radius:.75rem; border:1px solid #CCE6FF; }
.legend__swatch{ width:22px; height:22px; border-radius:.5rem; background:rgba(99,179,255,.2); border:2px solid var(--mn-dark); box-shadow:inset 0 0 0 2px var(--mn-yellow); }
.legend__title{ font-weight:700; }
.legend__note{ font-size:.75rem; color:var(--muted); }

.panel__footer{ margin-top:1rem; font-size:.75rem; color:var(--muted); }

/* Info popup (about) */
.infobtn{
  position:fixed; right:1rem; top:1rem; z-index:520;
  width:38px; height:38px; border-radius:999px;
  border:3px solid var(--mn-yellow);
  background:var(--mn-dark); color:var(--mn-white);
  font-weight:800; cursor:pointer; box-shadow:var(--shadow);
}
.infobox{
  position:fixed; right:1rem; top:3.75rem; z-index:520;
  width:360px; background:#fff; border-radius:1rem; box-shadow:var(--shadow);
  border:2px solid var(--mn-dark);
}
.infobox__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem; background:var(--mn-dark); color:#fff; border-bottom:3px solid var(--mn-yellow);
}
.infobox__close{
  border:0; background:transparent; color:#fff; font-size:1.25rem; cursor:pointer;
}
.infobox__body{ padding:.9rem; }
.small{ font-size:.85rem; color:var(--muted); }

/* Leaflet overrides */
.leaflet-container{ background:#EAF5FF; }
.leaflet-popup-content-wrapper{
  border-radius:1rem; border:3px solid var(--mn-dark);
}
.leaflet-popup-content{ margin:0; }
.leaflet-popup-tip{ background:#fff; border:3px solid var(--mn-dark); }

/* Park popup card */
.card{
  max-width:min(360px,80vw);
  border-radius:1rem; overflow:hidden;
}
.card__hero{
  background:linear-gradient(180deg,#fff,#f4f8ff);
  border-bottom:4px solid var(--mn-yellow);
}
.card__hero img{
  display:block; width:100%; height:200px; object-fit:cover;
}
.card__body{ padding:.85rem .9rem 1rem; }
.card__title{
  font-size:1.05rem; font-weight:800; color:var(--mn-dark);
  margin:.2rem 0 .4rem 0;
}
.badge{
  display:inline-block; padding:.1rem .45rem; border-radius:.5rem;
  border:2px solid var(--mn-dark); background:var(--mn-light); font-size:.7rem; font-weight:700;
}
.hr{
  height:3px; background:var(--mn-yellow); border:0; margin:.6rem 0 .7rem 0;
}
.sec-title{ font-weight:800; font-size:.9rem; margin:.2rem 0 .35rem 0; color:#0B3C54; }
.list{ margin:0; padding-left:1.1rem; }
.meta{ font-size:.9rem; color:#1f3140; }
.meta b{ color:#0B3C54; }
.link{
  display:inline-block; margin-top:.5rem; font-weight:700; color:#0B4F6C; text-decoration:underline; text-underline-offset:2px;
}

/* Hover highlight outline */
.feature-hover{
  filter: drop-shadow(0 0 0.25rem rgba(11,79,108,.5));
}

/* Responsive */
@media (max-width: 640px){
  .panel{ left:.75rem; right:.75rem; width:auto; }
  .titlebar{ left:.75rem; right:4.5rem; }
  .infobox{ right:.75rem; width:auto; left:.75rem; }
}