/* The world map (/map; templates/worldmap.html, static/worldmap.js).  Its own file rather than a
   section of pq.css: only the map pages load it, and pq.css is also embedded in the companion,
   which has no map. */

.wm-crumbs { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.wm-crumbs a { color: var(--text-dim); }
.wm-levels {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 0.75rem;
}
.wm-level { display: flex; align-items: center; gap: 0.4rem; }
.wm-level input { width: 5.5rem; }
/* The zone picker: first in the toolbar and the widest thing in it, because a hundred zones need
   room for "Valley of the Four Winds (86–87)".  On a phone it takes its own row. */
.wm-pick { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 18rem; max-width: 28rem; }
.wm-pick select { flex: 1 1 10rem; width: auto; }
.wm-search { flex: 1 1 14rem; max-width: 22rem; }
.wm-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  border: 0;
  margin: 0;
  padding: 0;
}
.wm-layers legend { float: left; margin-right: 0.5rem; color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wm-layers label { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

.wm-map {
  position: relative;
  height: min(70vh, 44rem);
  min-height: 22rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-inset);
  overflow: hidden;
}
.wm-map:not(.is-live) { height: auto; min-height: 0; padding: 0.75rem 1rem; }
.wm-noscript { margin: 0; color: var(--text-dim); }
.wm-hint { margin: 0.4rem 0 1rem; font-size: 0.85rem; }

/* Leaflet sits on the site's dark background rather than its default grey. */
.wm-map.leaflet-container { background: #0b0c11; font: inherit; }
.wm-map .leaflet-control-zoom a {
  background: var(--bg-raised);
  color: var(--text);
  border-color: var(--border-strong);
}
.wm-map .leaflet-control-zoom a:hover { background: var(--bg-inset); }
.wm-sea { fill: #10141c; }
.wm-map.is-schematic .wm-zone { cursor: pointer; }
.wm-zone { cursor: pointer; }

.wm-label {
  color: #f4f1e6;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 0 6px #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wm-label span { display: block; font-size: 0.7rem; color: #ffd27a; font-weight: 600; }

/* A mark on the map is the game's own picture (worldmap.js `pin`, static/markers.css): Leaflet
   draws it as an <img> at the size the page's marker list gives, and nothing here restyles it. */
.wm-pin { cursor: pointer; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.9)); }

.leaflet-tooltip.wm-tip {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.leaflet-tooltip.wm-tip::before { display: none; }
.wm-map .leaflet-popup-content-wrapper,
.wm-map .leaflet-popup-tip {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.wm-card strong { display: block; margin-bottom: 0.2rem; }
.wm-card-line { font-size: 0.85rem; color: var(--text-dim); }
.wm-card-line a { color: var(--link); }

.wm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.wm-table tr.is-fit th, .wm-table tr.is-fit td { background: rgba(111, 209, 140, 0.10); }

/* A table whose every row is a link (the zones of a continent).  The row header's <a> stays the
   one real link -- one tab stop and one name per row for a screen reader -- and its ::after is
   stretched to the right across the rest of the row, so a click, a middle-click or "open in new
   tab" anywhere on the row is that link's.  It is anchored on the cell and clipped by the wrapper
   rather than anchored on the <tr>, because `position: relative` on a table row is not honoured
   by every browser, and where it is not the stretched box would cover the whole table instead. */
.wm-rowlinks { overflow: hidden; }
.wm-rowlinks tbody th { position: relative; }
.wm-rowlinks tbody th a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100vw; }
.wm-rowlinks tbody tr:focus-within { background: var(--bg-inset); }

/* The world page's continents: each a disclosure that opens on its zones, no script needed. */
.wm-continents { border-top: 1px solid var(--border); }
.wm-continent { border-bottom: 1px solid var(--border); }
.wm-continent > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.6rem 0.6rem;
  list-style: none;
  cursor: pointer;
}
/* Safari and older WebKit draw their own triangle through this pseudo-element. */
.wm-continent > summary::-webkit-details-marker { display: none; }
.wm-continent > summary::before { content: "\25B8"; color: var(--text-dim); width: 0.8rem; }
.wm-continent[open] > summary::before { content: "\25BE"; }
.wm-continent > summary:hover { background: var(--bg-inset); }
.wm-continent-name { font-weight: 650; }
.wm-continent-facts { margin-left: auto; font-size: 0.85rem; }
.wm-continent-body { padding: 0 0.6rem 0.8rem 2.15rem; }
.wm-continent-open { margin: 0 0 0.5rem; }
.wm-zone-links { columns: 3 13rem; column-gap: 2rem; margin: 0; padding-left: 1.1rem; }
.wm-zone-links li { break-inside: avoid; margin-bottom: 0.25rem; }
.wm-zone-links li.is-fit { background: rgba(111, 209, 140, 0.10); }

@media (max-width: 30rem) {
  .wm-continent-facts { margin-left: 1.55rem; flex-basis: 100%; }
  .wm-continent-body { padding-left: 1rem; }
}

.wm-list { columns: 2 18rem; column-gap: 2rem; padding-left: 1.1rem; }
.wm-list li { break-inside: avoid; margin-bottom: 0.25rem; }
.wm-fits { columns: 2 16rem; column-gap: 2rem; padding-left: 1.1rem; }
.wm-coords { font-family: var(--mono); font-size: 0.85em; color: var(--text-dim); white-space: nowrap; }
.wm-faction { font-size: 0.75rem; padding: 0 0.35rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); }
.wm-faction.is-alliance { color: #8fbfff; border-color: #335e9a; }
.wm-faction.is-horde { color: #ff9c9c; border-color: #8a3434; }
.wm-source { font-size: 0.85rem; margin-top: 1rem; }

/* A long zone label must shrink inside the toolbar on a phone. */
.wm-pick { min-width:0; max-width:min(28rem,100%); }
.wm-pick select { min-width:0; }