/* tool_worldmap.css: /tools/world-map (MAPVIEW lane). Tokens and atoms from theme.css only (docs/LOOK.md): cards,
   buttons, folds and entity refs are the theme's atoms; the drop box uses the game's search-box colours (as the save
   checker does), the map frame the panel border, the minimap frame the panel colours. The map pixels themselves are
   the game's map colours, drawn by the script. */

.wm-private { margin: 0 0 var(--sp-3); }
.wm-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 7rem; padding: var(--sp-4); margin: 0 0 var(--sp-3); box-sizing: border-box; text-align: center;
  background: var(--c-search-bg); border: 2px dashed var(--c-info-border); cursor: pointer; }
.wm-drop:hover, .wm-drop.is-over, .wm-drop:focus-within { border-color: var(--c-accent); }
.wm-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wm-drop-t { color: var(--fg-link); font-weight: 700; }
.wm-drop-s { color: var(--fg-soft); font-size: var(--fs-s); }
.wm-in code { overflow-wrap: anywhere; }

.wm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.wm-find { flex: 1 1 14rem; min-width: 0; }
.wm-find input { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.wm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.wm-btns .btn { min-width: var(--tap); min-height: var(--tap); }
.wm-zoom { min-width: 4rem; color: var(--fg-soft); font-size: var(--fs-s); text-align: right; }
.wm-found { margin: 0 0 var(--sp-2); min-height: 1em; }
.wm-found:empty { display: none; }

.wm-stage { position: relative; height: 280px; overflow: hidden; touch-action: none;
  background: var(--c-bg); border: 2px solid var(--c-panel-border); cursor: grab; }
.wm-stage:active { cursor: grabbing; }
.wm-stage:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.wm-stage canvas { display: block; }
.wm-mini { position: absolute; right: var(--sp-2); bottom: var(--sp-2); border: 2px solid var(--c-panel-border);
  background: var(--c-panel-bg); cursor: pointer; }
.wm-hover { position: absolute; left: var(--sp-2); top: var(--sp-2); padding: 0 var(--sp-2); pointer-events: none;
  background: var(--c-panel-bg); color: var(--fg); font-size: var(--fs-s); white-space: pre; }
.wm-hover:empty { display: none; }

.wm-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width: 760px) { .wm-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wm-note { margin: 0 0 var(--sp-2); color: var(--fg-soft); font-size: var(--fs-s); }
.wm-set { margin: 0 0 var(--sp-3); padding: var(--sp-2); border: 2px solid var(--c-line); min-width: 0; }
.wm-set legend { padding: 0 var(--sp-1); font-weight: 700; }
.wm-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-height: var(--tap); }
.wm-l input { width: 20px; height: 20px; margin: 0; }
.wm-lt { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.wm-l .count { color: var(--fg-soft); font-size: var(--fs-s); white-space: nowrap; }
.wm-detail h3 { margin: 0 0 var(--sp-2); }
.wm-detail:empty::before { content: attr(data-empty); color: var(--fg-soft); }
.wm-cname { margin: 0 0 var(--sp-1); font-style: italic; overflow-wrap: anywhere; }
.wm-pos { margin: 0 0 var(--sp-2); color: var(--fg-soft); font-size: var(--fs-s); }
.wm-items, .wm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.wm-items li, .wm-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; }
.wm-items li.is-hit { outline: 2px solid var(--c-accent); }
.wm-items .ent { min-width: 0; overflow-wrap: anywhere; }
.wm-n { color: var(--fg-soft); font-size: var(--fs-s); white-space: nowrap; }
.wm-pre { color: var(--fg-soft); }
.wm-help { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.wm-help li { margin: 0 0 var(--sp-1); }
.wm-cite { color: var(--fg-soft); font-size: var(--fs-s); overflow-wrap: anywhere; }
.wm-fold { display: block; margin: 0 0 var(--sp-2); }
.wm-fold > summary .count { margin-left: var(--sp-2); color: var(--fg-soft); font-size: var(--fs-s); }
.wm-fold > .wm-set { margin-top: var(--sp-2); }
.wm-ctitle { display: flex; align-items: center; gap: var(--sp-1); }