:root{
  --ink:#2b2317;
  --paper:#f5efe0;
  --paper-2:#efe7d4;
  --line:#c9bda0;
  --accent:#7a3b2e;      /* barn red */
  --accent-2:#3d5a45;    /* forest */
  --shadow:0 2px 10px rgba(40,30,15,.25);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper)}
#map{position:absolute;inset:0;top:46px}

/* ---- top nav ---- */
#topnav{position:absolute;inset:0 0 auto 0;height:46px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--ink);color:var(--paper);
  box-shadow:0 1px 6px rgba(0,0,0,.35)}
#topnav .brand{display:flex;align-items:center;gap:8px;font-family:var(--serif)}
#topnav .brand-mark{color:var(--accent);font-size:15px}
#topnav .brand-name{font-size:19px;letter-spacing:.06em;font-weight:600}
#topnav nav{display:flex;gap:4px}
#topnav nav a{color:var(--paper);text-decoration:none;font-size:14px;
  padding:7px 12px;border-radius:6px;letter-spacing:.03em;opacity:.82}
#topnav nav a:hover{background:rgba(255,255,255,.12);opacity:1}
#topnav nav a.active{background:var(--accent);opacity:1}

/* ---- layer panel ---- */
#panel{position:absolute;top:58px;right:10px;z-index:20;width:250px;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--shadow);overflow:hidden;font-size:13.5px;max-height:calc(100% - 74px);
  display:flex;flex-direction:column}
#panel-toggle{display:none;width:100%;border:0;background:var(--ink);color:var(--paper);
  padding:9px;font-size:14px;cursor:pointer;font-family:var(--serif);letter-spacing:.05em}
#panel-body{overflow-y:auto;padding:4px 0}
.panel-group{padding:8px 12px;border-bottom:1px solid var(--line)}
.panel-group h3{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;
  color:#8a7d63;font-weight:700}
.row{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;line-height:1.25}
.row input{margin:0;flex:0 0 auto;cursor:pointer;accent-color:var(--accent-2)}
.row .swatch{flex:0 0 auto;width:15px;height:15px;border-radius:3px;border:1px solid rgba(0,0,0,.25)}
.row .swatch.line{height:0;border:0;border-top-width:3px;border-top-style:solid;border-radius:0;margin:6px 0}
.row .swatch.dash{border-top-style:dashed}
.row .swatch.ring{background:transparent}
.row label{cursor:pointer;flex:1}
.row .count{color:#9a8d70;font-size:11px}
.panel-note{padding:9px 12px;color:#7a6f58;font-size:11.5px;line-height:1.4}

/* collapsed (mobile) */
#panel.collapsed #panel-body{display:none}
#panel.collapsed #panel-toggle[aria-expanded]{display:block}

/* ---- popups ---- */
.maplibregl-popup{max-width:290px!important}
.maplibregl-popup-content{font-family:var(--sans);font-size:12.5px;color:var(--ink);
  padding:11px 13px;border-radius:8px;line-height:1.42;border-top:3px solid var(--accent)}
.pop-title{font-family:var(--serif);font-size:15px;font-weight:600;margin:0 0 5px}
.pop-sub{color:#7a6f58;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 7px}
.pop-tbl{width:100%;border-collapse:collapse}
.pop-tbl td{padding:2px 0;vertical-align:top}
.pop-tbl td:first-child{color:#8a7d63;padding-right:10px;white-space:nowrap}
.pop-flag{display:inline-block;margin-top:6px;padding:1px 6px;border-radius:4px;font-size:11px}
.pop-flag.warn{background:#f3e4c8;color:#8a5a1a}

/* ---- map text labels (HTML markers, glyph-free) ---- */
.lbl{font-family:var(--serif);font-size:12px;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper);
  pointer-events:none;transform:translateY(-2px)}
.lbl.well{color:#5a3410}
.lbl.poi{color:#574764;font-style:italic}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)}

/* ---- about ---- */
#about-btn{position:absolute;left:10px;bottom:26px;z-index:20;width:32px;height:32px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-style:italic;font-size:17px;cursor:pointer;box-shadow:var(--shadow)}
#about{position:absolute;left:10px;bottom:66px;z-index:25;width:300px;max-width:calc(100% - 20px);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);
  padding:16px 18px 14px;font-size:13px;line-height:1.5}
#about h2{font-family:var(--serif);margin:0 0 8px;font-size:19px}
#about ul{margin:6px 0;padding-left:18px}
#about li{margin:3px 0}
#about .fineprint{color:#7a6f58;font-size:11px;margin-top:10px}
#about a{color:var(--accent)}
#about-close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;
  line-height:1;cursor:pointer;color:#8a7d63}

#loading{position:absolute;inset:46px 0 0 0;z-index:15;display:flex;align-items:center;
  justify-content:center;background:var(--paper);color:#8a7d63;font-family:var(--serif);font-size:18px}
#loading.done{display:none}

/* ---- responsive ---- */
@media (max-width:640px){
  #panel{width:190px;top:54px;right:6px}
  #panel-toggle{display:block}
  #panel.collapsed{width:auto}
  #topnav .brand-name{font-size:17px}
}
@media (max-width:480px){
  #topnav{padding:0 8px}
  #topnav .brand-name{display:none}
  #topnav nav{gap:0}
  #topnav nav a{padding:7px 7px;font-size:13px}
}

/* ---- categorical legend (soils / geology) ---- */
#cat-legend{position:absolute;left:10px;bottom:66px;z-index:18;width:236px;max-height:46vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);
  padding:9px 11px;font-size:12px}
.lg-grp + .lg-grp{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.lg-title{font-family:var(--serif);font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.lg-row{display:flex;align-items:flex-start;gap:7px;padding:1.5px 0;line-height:1.25}
.lg-sw{flex:0 0 auto;width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.25);margin-top:1px}
.lg-tx{color:#6a5f4c}

/* ---- embed mode (map dropped into the docs via <iframe>) ---- */
body.embed #topnav, body.embed #panel, body.embed #about-btn{display:none!important}
body.embed #map{top:0}
body.embed #cat-legend{bottom:12px}
#embed-out{position:absolute;right:10px;top:10px;z-index:20;font-size:12px;font-family:var(--sans);
  background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:6px;text-decoration:none;box-shadow:var(--shadow)}
#embed-out:hover{background:var(--accent)}