/* Tactical maps — a printed board on Leaflet CRS.Simple, in the field-manual theme.
   Paper ground, ink linework, olive for the ground marks, one red for the pin and the active tool. */
.maps-section { max-width: 1280px; }
.maps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.maps-head .lede { margin-bottom: .2rem; }
.maps-head .label a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.maps-head .label a:hover { color: var(--red); }
.maps-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: .2rem; }

/* board picker: ink-outlined chips, the open board printed in red */
.maps-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.maps-tab {
  font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .45rem .85rem; line-height: 1.2; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}
a.maps-tab { text-decoration: none; }
.maps-tab:hover { background: var(--ink); color: var(--paper); }
.maps-tab.on { background: var(--red); color: #FBF6EA; border-color: var(--red); }
.maps-tab em { margin-left: .4rem; font-style: italic; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .78rem; opacity: .8; }

.maps-grid { display: grid; grid-template-columns: minmax(520px, 1fr) 300px; gap: .8rem; align-items: start; margin-bottom: 2rem; }
@media (max-width: 1000px) { .maps-grid { grid-template-columns: 1fr; } }

/* the sheet */
.maps-stage { background: var(--plate); border: 1px solid var(--ink); }
.maps-leaflet { height: min(72vh, 720px); min-height: 420px; background: #F3EEE0; border-bottom: 1px solid var(--ink); }
.maps-leaflet .leaflet-container { background: #F3EEE0; font-family: var(--mono); }
.maps-leaflet .leaflet-bar { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
.maps-leaflet .leaflet-bar a { background: var(--plate); color: var(--ink); border-bottom: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-weight: 700; }
.maps-leaflet .leaflet-bar a:last-child { border-bottom: 0; }
.maps-leaflet .leaflet-bar a:hover { background: var(--ink); color: var(--paper); }
.maps-leaflet .leaflet-bar a.leaflet-disabled { background: var(--plate-2); color: var(--ink-3); }
.maps-bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .45rem .75rem; background: var(--plate-2);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.maps-bar .mono { color: var(--ink); letter-spacing: .02em; text-transform: none; }

/* controls plate */
.maps-side { position: sticky; top: 1rem; }
.maps-search-wrap { position: relative; padding: .75rem .8rem 0; }
.maps-search-label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem; }
.maps-search {
  width: 100%; padding: .45rem .55rem; background: #fff; color: var(--ink);
  border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-size: .9rem;
}
.maps-search::placeholder { color: var(--ink-3); font-style: italic; font-family: var(--serif); }
.maps-search:focus { outline: none; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.maps-suggest {
  list-style: none; margin: -1px 0 0; padding: 0; position: absolute; left: .8rem; right: .8rem; z-index: 5;
  background: var(--plate); border: 1px solid var(--ink); max-height: 220px; overflow: auto;
}
.maps-suggest li + li { border-top: 1px solid var(--rule-2); }
.maps-suggest li button {
  display: block; width: 100%; text-align: left; padding: .4rem .6rem; background: transparent; border: 0;
  color: var(--ink); font-family: var(--serif); font-size: .92rem; cursor: pointer;
}
.maps-suggest li button:hover, .maps-suggest li button:focus { background: #fff; color: var(--red); box-shadow: inset 3px 0 0 var(--red); outline: none; }
.maps-suggest .maps-suggest-meta { color: var(--ink-3); font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; margin-left: .45rem; }

/* layer toggles: printed check boxes as outlined chips; a ticked layer is set in red */
.maps-layers { padding: .65rem .8rem .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.maps-layer {
  position: relative; display: inline-block; padding: .3rem .55rem; line-height: 1.2;
  font-family: var(--mono); font-weight: 700; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); background: var(--plate); border: 1px solid var(--rule); cursor: pointer; user-select: none;
}
.maps-layer::before { content: "\25A1"; margin-right: .35rem; font-size: .9em; }
.maps-layer input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.maps-layer:hover { color: var(--ink); border-color: var(--ink); }
.maps-layer:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.maps-layer.on { color: var(--red); border-color: var(--red); background: #fff; }
.maps-layer.on::before { content: "\25A0"; }

.maps-pin { border-top: 1px solid var(--ink); }
.maps-pin .hud-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; margin: .4rem 0 .7rem; }
.maps-pin .hud-stats > div { border-top: 1px solid var(--rule-2); padding-top: .3rem; }
.maps-pin .hud-stats .wide { grid-column: 1 / -1; }
.maps-pin .hud-stats dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.maps-pin .hud-stats dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.maps-pin .hud-stats dd.empty { color: var(--ink-3); font-weight: 400; }
.maps-side .hud-note { font-family: var(--serif); font-style: italic; font-size: .84rem; line-height: 1.4; color: var(--ink-2); margin: .55rem 0 0; }
.maps-arty-btn { width: 100%; margin-top: .2rem; }

.maps-cards .panel:hover { border-color: var(--red); }
.maps-cards .panel:hover h3 { color: var(--red); }

/* map symbols: printed conventional signs. Ink for the built world, olive for the ground, red for the pin. */
.maps-marker {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 12px; height: 12px; border: 1.5px solid var(--ink); background: #F3EEE0;
  font-family: var(--mono); font-weight: 700; font-size: 8px; line-height: 1; color: var(--paper);
}
.maps-marker.drill { background: var(--olive); border-color: var(--olive); transform: rotate(45deg); }
.maps-marker.drill-off { background: transparent; border: 1.5px dashed var(--olive); transform: rotate(45deg); opacity: .8; }
.maps-marker.settlement { background: var(--ink); border-radius: 50%; }
.maps-marker.industrial { background: transparent; border-width: 2px; }
.maps-marker.terrain { background: transparent; border: 1px solid var(--olive); border-radius: 50%; width: 8px; height: 8px; }
.maps-marker.base-lonestar, .maps-marker.base-valkyra, .maps-marker.base-manticore { background: var(--ink); width: 14px; height: 14px; }
.maps-marker.base-lonestar::after { content: "L"; }
.maps-marker.base-valkyra::after { content: "V"; }
.maps-marker.base-manticore::after { content: "M"; }
.maps-marker.garage { width: 10px; height: 10px; color: var(--ink); font-size: 7px; }
.maps-marker.garage::after { content: "G"; }
.maps-marker.deploy { background: transparent; border-radius: 50%; width: 9px; height: 9px; }
.maps-marker.pin { background: var(--red); border-color: var(--red); width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 1.5px #F3EEE0; }

.maps-label {
  background: var(--plate); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; box-shadow: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 5px; white-space: nowrap;
}
.maps-label::before { display: none; }

.maps-safezone { stroke: var(--ink); fill: none; stroke-opacity: .6; stroke-width: 1.2; stroke-dasharray: 4 6; }
.maps-poly-drill { stroke: var(--olive); fill: var(--olive); fill-opacity: .12; stroke-width: 1.2; }
.maps-poly-drill-off { stroke: var(--olive); fill: transparent; stroke-width: 1; stroke-dasharray: 5 4; stroke-opacity: .8; }
.maps-grid-line { stroke: var(--rule-2); stroke-width: 1; }
.maps-grid-major { stroke: var(--rule); stroke-width: 1; }
.maps-frame { stroke: var(--ink); stroke-width: 1; fill: none; }
.maps-road { stroke: var(--ink); stroke-opacity: .5; stroke-width: 2; }
.maps-road-dirt { stroke: var(--ink); stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 4 4; }
.maps-measure-line { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 4; }
.maps-measure-pt { stroke: var(--red); fill: var(--red); }