/* Map-specific layout rules that override/extend bral.css for the interactive map page. */

/* Full-height layout so the map fills the screen. Body is a flex column so
   the content row fills exactly the space left by the header, whatever its
   height, and the sidebar reaches the window bottom without overshooting. */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }
header#top { flex: 0 0 auto; }
.wrap {
  flex: 1 1 auto; min-height: 0;
  max-width: none; margin: 0; padding: 0; gap: 0;
  grid-template-columns: 350px 1fr;
}

/* Sidebar: let it scroll, keep its bral.css styling */
nav {
  position: static; top: auto; align-self: auto;
  max-height: none; height: 100%;
  border-radius: 0; border-width: 0 1px 0 0;
}

/* Map fills the main cell */
main {
  position: relative; overflow: hidden;
}
#map {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #0a0c18;
}

/* Sidebar toggle */
#toggle-sidebar {
  position: absolute; top: 50%; left: 350px; z-index: 1002;
  transform: translateY(-50%);
  width: 18px; height: 44px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-left: none;
  border-radius: 0 5px 5px 0;
  color: var(--muted); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: left .25s ease;
}
#toggle-sidebar:hover { color: var(--ink); background: #212546; }
.wrap.nav-collapsed #toggle-sidebar { left: 0; }
.wrap.nav-collapsed { grid-template-columns: 0px 1fr; }
.wrap.nav-collapsed nav { width: 0; overflow: hidden; padding: 0; border: none; opacity: 0; }

/* Legend */
.legend {
  position: absolute; top: 10px; right: 10px; z-index: 500;
  display: flex; flex-direction: column; gap: 4px;
  font-family: system-ui, sans-serif; font-size: 10px;
}
.legend .group {
  background: rgba(23,26,46,.85); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
  transition: border-color .15s;
}
.legend .group:hover { border-color: var(--accent); }
.legend .group.active { border-color: var(--accent); background: rgba(23,26,46,.95); }
.legend .row { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--zc); }
.legend .legend-title { font-weight: bold; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 3px; }
.legend .zone-row { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin: 1px -4px;
  transition: background .12s; }
.legend .zone-row:hover { background: rgba(122,162,255,.18); }
.legend .zone-row.active { background: rgba(122,162,255,.28); color: var(--gold); }

/* Info panel: slides up from the bottom of the map */
#info-panel {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 600;
  background: rgba(15,17,32,.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  max-height: 45vh; overflow-y: auto;
  padding: 16px 20px;
  display: none;
}
#info-panel.open { display: block; }
#info-panel .close {
  float: right; margin-left: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 7px;
  line-height: 1;
}
#info-panel .close:hover { color: var(--ink); }
/* Sidebar active link highlight */
nav li a.active { background: #212546; color: var(--gold); }

/* Leaflet overrides */
.leaflet-control-zoom a {
  background: var(--panel) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-control-attribution {
  background: rgba(15,17,32,.7) !important; color: var(--muted) !important;
  font-size: 10px !important;
}
.leaflet-tooltip {
  background: var(--panel) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  font-family: Georgia, serif !important; font-size: 13px !important;
  padding: 4px 8px !important;
}

/* Type-icon markers. A round badge filled with the zone color and ringed in
   white, with the World Anvil type silhouette knocked out in white on top
   (CSS mask, same trick as the sidebar district icons). The disc + white ring
   keep the marker visible over busy map art; zone color is still the fill.
   Districts are a touch larger. */
.bral-pin { display: flex; align-items: center; justify-content: center; background: none; border: 0; }
.bral-badge { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zc); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; }
/* Render the actual two-tone icon (not a flat mask) so the black/white detail
   that distinguishes each type survives. Zone color comes from the disc. */
.bral-pin.big .bral-badge { width: 40px; height: 40px; border-width: 3px; }

/* District markers: nested hexagons. Black outline on the outside, a zone-color
   band, then a white interior holding the black district glyph. */
.bral-pin.dist .bral-badge { width: 48px; height: 48px; background: none; border: 0;
  box-shadow: none; border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.hexwrap, .hexzone, .hexin { display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hexwrap { width: 48px; height: 48px; background: #0b0d18; }   /* outer outline */
.hexzone { width: 44px; height: 44px; background: var(--zc); } /* zone band */
.hexin   { width: 33px; height: 33px; background: #fff; }      /* white interior */

/* Type-filter chip glyphs: the same type silhouettes the markers use, masked
   in the chip's own text color so they read as a muted legend. Mirrors the
   district chips' .qm icons. */
.chip .tm { display: inline-block; vertical-align: -0.15em; width: 13px; height: 13px;
  margin: 0 5px 0 0; background-color: currentColor;
  -webkit-mask: var(--tm) center/contain no-repeat; mask: var(--tm) center/contain no-repeat; }
.t-tavern { --tm: url(../img/li-ic-tavern.webp); }
.t-inn { --tm: url(../img/li-ic-inn.webp); }
.t-food { --tm: url(../img/li-ic-baker.webp); }
.t-shop { --tm: url(../img/li-ic-trader.webp); }
.t-smith { --tm: url(../img/li-ic-blacksmith.webp); }
.t-weapons { --tm: url(../img/li-ic-weaponsmith.webp); }
.t-armor { --tm: url(../img/li-ic-armorsmith.webp); }
.t-magic { --tm: url(../img/li-ic-enchanter.webp); }
.t-noble { --tm: url(../img/li-ic-houses.webp); }
.t-warehouse { --tm: url(../img/li-ic-supplies.webp); }
.t-temple { --tm: url(../img/li-ic-temple.webp); }
.t-guild { --tm: url(../img/li-ic-guild.webp); }
.t-mercenary { --tm: url(../img/li-ic-swords_crossed.webp); }
.t-market { --tm: url(../img/li-ic-market.webp); }
.t-government { --tm: url(../img/li-ic-castle.webp); }
.t-embassy { --tm: url(../img/li-ic-embassy.webp); }
.t-military { --tm: url(../img/li-ic-helmet.webp); }
.t-dock { --tm: url(../img/li-ic-port.webp); }
.t-crime { --tm: url(../img/li-ic-coins.webp); }
.t-entertainment { --tm: url(../img/li-ic-theater.webp); }
.t-landmark { --tm: url(../img/li-ic-landmark.webp); }
.t-infrastructure { --tm: url(../img/li-ic-bridge.webp); }

/* Brief glow to draw the eye to a marker after the map jumps to it.
   Applied to the inner .bral-badge so the scale animation does not clobber the
   translate3d Leaflet puts on the marker container. */
.marker-glow {
  animation: bralMarkerGlow 1s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes bralMarkerGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(255,226,122,0)); }
  25%  { filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 11px #ffe27a); transform: scale(1.45); }
  100% { filter: drop-shadow(0 0 0 rgba(255,226,122,0)); transform: scale(1); }
}

/* Reserve the scrollbar gutter so filtering (which changes the list length,
   and thus whether the nav scrolls) doesn't change the content width and
   rewrap the filter chips, making buttons jump between rows. */
nav { scrollbar-gutter: stable; }

/* Sidebar-only footer for acknowledgments/credits, with breathing room at
   the very bottom of the scroll area. */
nav .nav-footer {
  margin-top: 16px;
  padding: 12px 8px 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
nav .nav-footer:empty { border-top: 0; }
nav .jump-top { text-align: center; padding: 10px 8px 4px; }
nav .jump-top a { color: var(--muted); font-family: system-ui, sans-serif; font-size: 12px;
  cursor: pointer; transition: color .15s; }
nav .jump-top a:hover { color: var(--ink); text-decoration: none; }
nav .nav-footer a { color: var(--gold); }

/* Brief glow when a zone or district is selected, fades itself out. */
.region-glow { animation: bralRegionGlow 1.7s ease-out forwards;
  filter: drop-shadow(0 0 8px var(--gold)); }
@keyframes bralRegionGlow {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Clear button sits left of the search bar in the header. */
.head-right { display: flex; align-items: center; gap: 8px; }
#clear-filters {
  flex: 0 0 auto; font: inherit; font-size: 14px; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px;
  transition: border-color .15s, color .15s;
}
#clear-filters:hover { border-color: var(--accent); color: var(--accent); }

/* Exclusive/multi-select filter toggle, sits above the filter sections. */
.filter-mode { font-family: system-ui, sans-serif; font-size: 12px; color: var(--muted);
  padding: 8px 8px 4px; display: flex; align-items: center; gap: 8px; }
.filter-mode label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.filter-mode input { cursor: pointer; margin: 0; }
.filter-mode .fm-btn { font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; transition: border-color .15s, color .15s; }
.filter-mode .fm-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-mode .fm-btn.first { margin-left: auto; }

/* ---- Mobile menu button (hidden on desktop) ---- */
.mobile-menu-btn {
  display: none;
  flex: 0 0 auto;
  font: inherit; font-size: 22px; line-height: 1;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; cursor: pointer;
  transition: border-color .15s;
}
.mobile-menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Nav close button (hidden on desktop) ---- */
.nav-close-btn {
  display: none;
  position: sticky; top: 0; z-index: 10;
  float: right;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 4px 9px;
  margin-bottom: 4px;
}
.nav-close-btn:hover { color: var(--ink); border-color: var(--accent); }

/* ---- Nav backdrop overlay (hidden by default) ---- */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.55);
}

/* =================================================================
   Mobile (<= 760px)
   ================================================================= */
@media (max-width: 760px) {

  /* --- Header --- */
  header#top {
    padding: 10px 14px; gap: 8px;
    flex-wrap: nowrap; align-items: center;
    position: sticky; z-index: 1010;
    background: var(--bg);   /* solid so map does not show through */
  }
  .mobile-menu-btn { display: block; }
  .head-left { flex: 1 1 auto; min-width: 0; }
  .head-left h1 { font-size: 14px; margin: 0; line-height: 1.2; }
  .title-sep { display: none; }
  .title-sub { display: block; font-size: 11px; color: #b8993e; }
  .head-left p { display: none; }
  .head-right {
    flex: 0 0 auto; width: auto; margin: 0;
    display: flex; align-items: center; gap: 6px;
  }
  #search {
    width: 120px; max-width: none; font-size: 13px;
    padding: 7px 9px;
  }
  #clear-filters { font-size: 12px; padding: 7px 9px; }

  /* --- Layout: map fills remaining space, sidebar is overlay --- */
  .wrap {
    display: block;
    position: relative;
    flex: 1 1 auto; min-height: 0;
  }
  main {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
  }

  /* --- Sidebar: overlay drawer from the left --- */
  nav {
    position: fixed; top: 48px; left: 0; bottom: 0;
    width: 85vw; max-width: 340px; z-index: 1000;
    height: 100%; max-height: none;
    border-radius: 0; border-width: 0 1px 0 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    padding: 10px;
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
    scrollbar-gutter: auto;
  }
  .wrap:not(.nav-collapsed) nav { transform: translateX(0); }
  .wrap.nav-collapsed nav {
    transform: translateX(-100%);
    width: 85vw; max-width: 340px;
    height: 100%; max-height: none;
    opacity: 1;
  }
  .nav-close-btn { display: block; }

  /* Backdrop visible when sidebar is open */
  .nav-backdrop { z-index: 999; }
  .wrap:not(.nav-collapsed) ~ .nav-backdrop { display: block; }
  .wrap.nav-collapsed ~ .nav-backdrop { display: none; }

  /* --- Map --- */
  #map {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  .leaflet-control-zoom { z-index: 7 !important; }

  /* --- Sidebar toggle (desktop button becomes a floating menu button) --- */
  #toggle-sidebar { display: none; }  /* replaced by .mobile-menu-btn in header */

  /* --- Legend: compact bar at the bottom --- */
  .legend {
    top: auto; bottom: 10px; right: 10px; left: 10px;
    flex-direction: row; gap: 0;
    justify-content: center;
  }
  .legend .group {
    display: flex; align-items: center; gap: 6px;
    border-radius: 20px; padding: 5px 12px;
    font-size: 10px;
  }
  .legend .legend-title { margin: 0 4px 0 0; font-size: 9px; letter-spacing: .3px; }
  .legend .row { margin: 0; white-space: nowrap; }
  .legend .zone-row { margin: 0; }
  #legend-underside { margin-left: 4px; }
  .legend-docks { display: none; }

  /* --- Info panel --- */
  #info-panel { max-height: 55vh; padding: 12px 14px; }
  #info-panel .close { font-size: 16px; padding: 4px 9px; }

  /* --- Sidebar content sizing --- */
  nav h2 { font-size: 11px; }
  nav li a { font-size: 13px; padding: 5px 8px; }
  .count { font-size: 10px; }
  .filt > summary { font-size: 11px; }
  .chip { font-size: 10px; padding: 4px 7px; }
  .filter-mode { font-size: 11px; flex-wrap: wrap; }
  nav .nav-footer { font-size: 10px; }
}