/* ══════════════════════════════════════════════════════════════════════════
   HejMap v2 — full-screen map apps that keep their own engines
   (countries, worldcup, printable, upside-down, inverted; built by
   scripts/build-v2-reskins.mjs). Panels and the map become floating cards
   under the pill header, matching the explorer pages.
   ══════════════════════════════════════════════════════════════════════════ */

html.v2:has(body.v2-map),
.v2 body.v2-map { height: 100%; overflow: hidden; }
.v2 body.v2-map { display: flex; flex-direction: column; }
.v2-map [data-panel],
.v2-map button,
.v2-map input,
.v2-map select { font-family: var(--font); }

/* Stage: the map (and its side panels) sit in rounded cards with a small gutter. */
.v2-map .hejmap-layout,
.v2-map .sm-stage { flex: 1; min-height: 0; margin: 10px; }
.v2-map .hejmap-layout { gap: 10px; overflow: visible; }
.v2-map .hejmap-map-area,
.v2-map .sm-stage {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.v2-map [data-panel] {
  border: 1px solid var(--line) !important;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.v2-map [data-panel][data-panel-open="false"] { border-width: 0 !important; box-shadow: none; }
.v2-map .panel-header { border-bottom-color: var(--line); }
.v2-map .panel-header-title { color: var(--text-3); letter-spacing: 0.06em; }

/* Edge toggles ride the gap between a panel and the map. */
.v2-map .panel-toggle-btn { width: 20px; height: 48px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); box-shadow: var(--shadow-sm); }
.v2-map [data-panel="left"] .panel-toggle-btn { left: calc(var(--panel-left-w, 330px) + 10px); border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }
.v2-map [data-panel="right"] .panel-toggle-btn { right: calc(var(--panel-right-w, 370px) + 10px); border-right: 1px solid var(--line); border-radius: 10px 0 0 10px; }
.v2-map [data-panel="left"][data-panel-open="false"] .panel-toggle-btn { left: 10px; }
.v2-map [data-panel="right"][data-panel-open="false"] .panel-toggle-btn { right: 10px; }

/* Floating overlays on the map pick up the v2 surfaces. */
.v2-map .sm-map-title,
.v2-map .sm-panel-open,
.v2-map .sm-map-btn,
.v2-map .prn-map-btn {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
}
.v2-map .sm-map-title { border-radius: 16px; }
.v2-map .sm-map-title-label { color: var(--text-3); }
.v2-map .sm-map-title-text { font-weight: 750; letter-spacing: -0.02em; }

@media (max-width: 640px) {
  .v2-map .hejmap-layout,
  .v2-map .sm-stage { margin: 0; gap: 0; }
  .v2-map .hejmap-map-area,
  .v2-map .sm-stage { border: 0; border-radius: 0; box-shadow: none; }
  .v2-map [data-panel] { border-radius: 18px 18px 0 0; }
}

/* The header spans the same width as the map cards. */
.v2-map { --col-max: 100vw; --col-pad: 10px; }

/* Printing (printable map): no card chrome on paper. */
@media print {
  .v2 body.v2-map { background: #fff; }
  .v2-map .hejmap-layout,
  .v2-map .sm-stage { margin: 0; gap: 0; }
  .v2-map .hejmap-map-area,
  .v2-map .sm-stage { border: 0; border-radius: 0; box-shadow: none; }
}