/* Shared chrome for all Moe's Valley maps.
   Loaded AFTER each map's inline <style>, so these rules are authoritative.
   Keep anything that must look identical across the three maps in here. */

/* ---------- key / legend toggle ---------- */
#toggle{
  position:absolute; z-index:1100; top:10px; left:10px;
  width:52px; height:52px; border-radius:14px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:rgba(22,19,17,.96); border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  color:#f0e6d6; font-size:0; cursor:pointer;
  transition:width .18s ease, height .18s ease, border-radius .18s ease,
             background .18s ease, box-shadow .18s ease, gap .18s ease;
}
#toggle span.bar{
  display:block; width:22px; height:2.5px; border-radius:2px; background:#f0e6d6;
  transition:width .18s ease, height .18s ease;
}
#toggle .lbl{
  font:700 8.5px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:#f0e6d6; margin-top:3px;
  transition:opacity .14s ease, max-height .18s ease;
}
#toggle:hover{ background:rgba(249,115,22,.92); border-color:rgba(249,115,22,.95); }
#toggle:focus-visible{ outline:2px solid #ff9a63; outline-offset:2px; }

/* compact once the panel is open */
body.panel-open #toggle{
  width:34px; height:34px; border-radius:9px; gap:3px;
  background:rgba(22,19,17,.9); box-shadow:0 2px 8px rgba(0,0,0,.35);
}
body.panel-open #toggle span.bar{ width:15px; height:2px; }
body.panel-open #toggle .lbl{ opacity:0; max-height:0; margin:0; overflow:hidden; }

/* ---------- back link in the panel ---------- */
#panel .panel-back{
  display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px;
  border-radius:8px; background:rgba(255,122,61,.12); border:1px solid rgba(255,122,61,.4);
  color:#ff9a63; text-decoration:none;
  font:600 12.5px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.02em;
}
#panel .panel-back:hover{ background:rgba(255,122,61,.22); color:#fff; }

/* ---------- shared map labels ---------- */
.lotlbl{
  background:rgba(10,22,14,.62); color:#c9f2d6;
  font:600 10px/1 ui-sans-serif,system-ui,sans-serif; padding:5px 10px; border-radius:999px;
  white-space:nowrap; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid rgba(134,239,172,.35);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.rdlbl{
  background:rgba(18,15,11,.55); color:#efe3d0;
  font:600 10.5px/1 ui-sans-serif,system-ui,sans-serif; padding:5px 10px; border-radius:999px;
  white-space:nowrap; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.albl{
  background:rgba(28,17,8,.55); color:#ffd9a8;
  font:600 10px/1 ui-sans-serif,system-ui,sans-serif; padding:5px 11px; border-radius:999px;
  white-space:nowrap; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(249,115,22,.4);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.closedlbl{ display:flex; align-items:center; justify-content:center; height:116px; width:22px; }
.clbl span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  background:rgba(153,27,27,.92); color:#fff;
  font:700 10.5px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; padding:9px 4px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* ---------- area outlines ---------- */
.areapoly{ pointer-events:none; }

/* ---------- clickable area rows in the legend ---------- */
.arealink{ cursor:pointer; border-radius:6px; }
.arealink:hover{ background:rgba(249,115,22,.12); }
.arealink .alink{
  color:#ff9a63; font-weight:700; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(255,154,99,.45);
}
.arealink:hover .alink{ text-decoration-color:#ff9a63; }
.arealink .chev{ color:#ff9a63; opacity:.7; font-size:14px; line-height:1; }

/* ---------- map tooltips ---------- */
.ttl{
  background:rgba(22,19,17,.92); color:#e8dccb; border:0;
  font:11px/1 ui-monospace,Menlo,Consolas,monospace; padding:3px 6px; border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.leaflet-tooltip.ttl:before{ display:none; }

/* ---------- divIcon wrappers (no chrome of their own) ---------- */
.arealbl, .roadlbl, .lotlabel{ background:none; border:0; }

/* ---------- legend group indentation (master / child rows) ---------- */
.row.ch{ padding-left:16px; }

/* ---------- step over gate icon ---------- */
.gateicon{ background:none; border:0; }
.gateicon svg{ display:block; overflow:visible; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.gatesw{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  vertical-align:middle; margin-right:2px; }
.gatesw svg{ display:block; }

/* the two area titles double as buttons for their access cards */
.albl-lg{ font-size:11.5px; letter-spacing:.13em; padding:6px 13px; cursor:pointer;
  border-color:rgba(249,115,22,.6); background:rgba(28,17,8,.68);
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.albl-lg:hover{ background:rgba(249,115,22,.9); border-color:rgba(249,115,22,.95); color:#fff; }
.arealbl{ pointer-events:none; }        /* plain area names stay click-through */
.arealbl-btn{ pointer-events:auto; }    /* the two titles that open access cards */

/* ---------- map popups ---------- */
.leaflet-popup-content{ font:13.5px/1.55 ui-sans-serif,system-ui,-apple-system,sans-serif; margin:11px 14px; }
.leaflet-popup-content b{ color:#c2410c; font-size:14.5px; }
.leaflet-popup-content i{ display:block; color:#6b6257; font-style:normal; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; margin:2px 0 8px; }
.leaflet-popup-content p{ margin:0 0 9px; }
.leaflet-popup-content p:last-child{ margin-bottom:0; }
.leaflet-popup-content ol{ margin:8px 0 0; padding-left:19px; }
.leaflet-popup-content li{ margin-bottom:5px; }
.areapop .leaflet-popup-content{ max-height:44vh; overflow-y:auto; }

/* ---------- map label centring ----------
   divIcons carry a fixed iconSize, so a pill wider or narrower than that box
   drifts off-centre. Collapse the wrapper and centre the pill on the anchor
   point instead, so every label is symmetrical whatever its length. */
.arealbl, .arealbl-btn, .lotlabel, .roadlbl, .gnum{
  width:0 !important; height:0 !important; margin:0 !important;
  background:none; border:0; overflow:visible;
}
.arealbl > div, .arealbl-btn > div, .lotlabel > div, .roadlbl > div, .gnum > div{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  display:inline-block; width:max-content;
}
/* symmetrical padding inside every pill */
.albl, .albl-lg, .lotlbl, .rdlbl{ box-sizing:border-box; text-align:center; }
.albl{ padding:5px 12px; }
.albl-lg{ padding:6px 14px; }
.lotlbl{ padding:5px 12px; }
.rdlbl{ padding:5px 12px; }