/**
 * KoreAves — Shared EvidenceMap Stylesheet
 * Establishes consistent cartographic grammar across Species Reference, GIS, and Compare.
 * Enforces minimum cartographic viewport (min 280px), geometry-following polygon selection,
 * non-checkbox legend markers, and restrained floating map controls (+, -, reset).
 */

/**
 * Map encoding palette — one vocabulary, owned here.
 *
 * These were independent literals, and each surface then overrode them with a
 * vocabulary of its own: the design system's `--ka-color-map-*` on Species
 * Reference, `--ka-color-forest-surface` on GIS. The same evidence category
 * therefore rendered in three different colours depending on the page, and on
 * GIS the legend swatch did not match the map it described.
 *
 * Worse, GIS's pair could not carry the distinction at all: #e3ede7 against
 * #f4f2eb is a contrast ratio of 1.07:1, and separating those two categories
 * is the only thing this map does. The design-system pair gives 5.88:1.
 *
 * Each token now derives from the design system, with the former literal as a
 * fallback so this stylesheet still renders standalone. Surfaces must not
 * redefine these: a surface that needs a different map is a different
 * component, not an override.
 */
:root {
  --ka-map-bg: var(--ka-color-paper-sunken, #edebe4);
  --ka-map-land-context: var(--ka-color-map-land-context, #ded9cc);
  --ka-map-land-stroke: var(--ka-color-map-coastline, #c8c2b5);
  --ka-map-evidenced-fill: var(--ka-color-map-region-present, #2d5a44);
  --ka-map-evidenced-stroke: var(--ka-color-map-region-selected, #163626);
  --ka-map-none-fill: var(--ka-color-map-region-none, #e2ded4);
  --ka-map-none-stroke: var(--ka-color-map-coastline, #c8c2b5);
  --ka-map-boundary: var(--ka-color-map-boundary, #fcfbf9);
  --ka-map-grid: var(--ka-color-map-grid, #ded9cd);
  --ka-map-selected-stroke: #d9532f;
  --ka-map-selected-fill-overlay: rgba(217, 83, 47, 0.18);
}

/* Map Canvas Container with strict minimum cartographic height */
.map-canvas-container {
  position: relative;
  width: 100%;
  min-height: 280px;
  background: var(--ka-map-bg);
  border: 1px solid var(--ka-color-rule-subtle, #cfcac0);
  border-radius: 6px;
  overflow: var(--ka-map-canvas-overflow, hidden);
  box-sizing: border-box;
  touch-action: pan-y;
  user-select: none;
}

.map-svg {
  /* `width: auto` with `max-width` rather than `width: 100%`: combined with the
     height cap below, a forced full width letterboxes the drawing inside a
     wider box. That is not only wasted space — it also breaks geometric hit
     testing that assumes the element's box is the drawing. */
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  /* Sized from the viewBox aspect ratio, then capped.
     `height: 100%` inside a container whose height comes from the SVG is
     circular. Left uncapped, the 360x520 viewBox makes the map ~1.44x taller
     than wide — 1015px at desktop — which buries the legend and everything
     below it. GIS and Compare had each arrived at the same `max-height: 72vh`
     independently, in their own stylesheets, with the same reasoning written
     out twice; it belongs here once. */
  height: auto;
  max-height: 72vh;
  min-height: 280px;
  object-fit: contain;
  display: block;
  background: var(--ka-map-bg);
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.05s ease-out;
}

/* The SVG is an interaction surface, not a text-selection surface.
   Explicitly apply this to descendants because SVG text selection behaviour
   differs across desktop engines and must not compete with drag-to-pan. */
.map-svg * {
  user-select: none;
  -webkit-user-select: none;
}

/* Touch Device Protection: Polygon tap MUST NOT compete with pan/pinch or show focus */
@media (pointer: coarse) {
  .map-region-path {
    pointer-events: none !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Graticules and Contextual Features */
.graticule-line {
  stroke: #d8d3c5;
  stroke-width: 0.65px;
  stroke-dasharray: 2 2;
  pointer-events: none;
}

.graticule-text {
  font-family: var(--ka-font-mono, monospace);
  font-size: 7.5px;
  fill: #7c8880;
  pointer-events: none;
}

.basemap-land {
  fill: var(--ka-map-land-context);
  stroke: var(--ka-map-land-stroke);
  stroke-width: 0.65px;
  pointer-events: none;
}

.basemap-land-label {
  font-family: var(--ka-font-latin-serif, Georgia, serif);
  font-size: 8.5px;
  font-style: italic;
  fill: #858f87;
  pointer-events: none;
}

.marine-label {
  font-family: var(--ka-font-latin-serif, Georgia, serif);
  font-size: 8px;
  font-style: italic;
  fill: #8f9890;
  pointer-events: none;
}

/* LAYER 2 — Evidence fill: encodes ONLY evidence category. No boundary
   stroke of its own (that is .admin-boundary-layer, an independent
   geometry pass), and never mutated for selection/active/hover — those
   are separate layers/geometries, never additional classes on this path. */
.map-region-path {
  stroke: var(--ka-map-boundary);
  stroke-width: 0.5px;
  transition: fill var(--ka-transition-subtle, 150ms ease);
  outline: none !important;
}

.map-region-path.evidenced {
  fill: var(--ka-map-evidenced-fill);
}

.map-region-path.none {
  fill: var(--ka-map-none-fill);
}

.map-region-path:hover {
  filter: brightness(0.96);
}

/* Keyboard focus itself must stay invisible here — the actual visible
   channel is the independent .interaction-highlight-layer overlay. */
.map-region-path:focus-visible {
  outline: none !important;
}

/* LAYER 3 — Administrative boundaries: independent geometry, always
   visible above evidence fill regardless of category, never the primary
   emphasis. */
.admin-boundary-path {
  fill: none;
  stroke: #cfcbc2;
  stroke-width: 0.7px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* LAYER 4 — Selected region set: one overlay per selected region.
   Restrained translucent fill + thin outline, distinct from evidence fill
   and never mutating it. */
#selected-regions-overlay-group {
  pointer-events: none !important;
}

.selected-region-overlay {
  /* fill-opacity as its own property (not baked into an rgba alpha
     channel) so it is independently measurable/computable — see the
     active-vs-selected opacity-delta guard in the cross-surface validator. */
  fill: #205c42 !important;
  fill-opacity: 0.16 !important;
  pointer-events: none !important;
}

.selected-region-outline {
  fill: none !important;
  stroke: #205c42 !important;
  stroke-width: 1.2px !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}

/* LAYER 5 — Active inspected region: independent from selection through
   TWO channels (not stroke-width alone): a vivid rose/crimson hue AND a
   materially higher fill opacity (0.30 vs selected's 0.16, delta 0.14).
   NOTE: an earlier "warm terra" choice (#8c3a27) collided almost exactly
   with Compare's own --compare-color-taxon-b (#8c4a2a, "Mineral Umber/
   Terracotta evidence category") — a B-only-evidenced region that was
   also active would have been indistinguishable. This vivid, highly
   saturated crimson sits outside the whole muted "mineral paper" evidence
   palette (indigo/terracotta/teal/spruce/plum/ocean-pine/bronze-olive),
   so it never competes with any evidence-category color by hue OR
   saturation, only ever with the restrained selected/hover UI channels. */
#active-region-overlay-group {
  pointer-events: none !important;
}

.active-region-overlay {
  fill: #b0224f !important;
  fill-opacity: 0.30 !important;
  pointer-events: none !important;
}

.active-region-outline {
  fill: none !important;
  stroke: #b0224f !important;
  stroke-width: 1.8px !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}

/* LAYER 6 — Temporary hover/keyboard-focus highlight: a distinct channel
   (cool blue) from selected/active (green), cleared on pointerleave/blur,
   never mutating selection or evidence. */
#interaction-highlight-group {
  pointer-events: none !important;
}

.interaction-highlight-overlay {
  fill: #205c9e !important;
  fill-opacity: 0.14 !important;
  stroke: #205c9e !important;
  stroke-width: 1.4px !important;
  stroke-dasharray: 2 1.2;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}

/* Islands & Scale Bar */
.island-marker-pin {
  fill: #205c42;
  stroke: #163f2d;
  stroke-width: 0.65px;
}

.island-label {
  font-family: var(--ka-font-hangul-sans, sans-serif);
  font-size: 7.5px;
  font-weight: 600;
  fill: #1b2420;
}

/* Frame-fixed metric scale. This is viewport chrome, not geographic SVG
   content: pan never moves it; zoom only updates its distance/width. */
.map-scale-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 9;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 5px 7px 6px;
  background: rgba(252, 251, 247, 0.88);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(207, 202, 192, 0.9);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(27, 36, 32, 0.08);
  color: var(--ka-color-ink-primary, #1b2420);
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.map-scale-label {
  font-family: var(--ka-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.map-scale-rule {
  position: relative;
  display: block;
  height: 7px;
  box-sizing: border-box;
  border-bottom: 2px solid currentColor;
}

.map-scale-rule::before,
.map-scale-rule::after {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 2px;
  height: 7px;
  background: currentColor;
}

.map-scale-rule::before { left: -1px; }
.map-scale-rule::after { right: -1px; }

/* Floating Restrained Map Controls: ~28-30px visual, >=44px hit target */
.map-controls-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  background: rgba(252, 251, 247, 0.94);
  backdrop-filter: blur(4px);
  border: 1px solid var(--ka-color-rule-subtle, #cfcac0);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.map-control-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ka-color-ink-primary, #1b2420);
  font-family: var(--ka-font-hangul-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* Touch hit expansion to >=44px */
.map-control-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  pointer-events: auto;
}

.map-control-btn:hover {
  background: var(--ka-color-paper-sunken, #edebe4);
  border-color: var(--ka-color-rule-subtle, #cfcac0);
}

.map-control-btn:disabled,
.map-control-btn:disabled:hover,
.map-control-btn:disabled:active {
  opacity: 0.38;
  cursor: default;
  background: transparent;
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.map-control-btn:focus-visible {
  outline: 2px solid var(--ka-color-forest, #205c42);
  outline-offset: 1px;
}

.map-control-btn.btn-reset,
.map-control-btn.btn-focus-mode {
  font-size: 13px;
  width: 28px;
  height: 28px;
}

/* Compact Passive Legend with Small Square Swatches */
.evidence-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid var(--ka-color-rule-hairline, #e2ded5);
  color: var(--ka-color-ink-secondary, #4d5650);
}

.evidence-legend-items {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.evidence-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}

/* Small square swatch (no pill/circle radio mimicry) */
.evidence-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.evidence-legend-swatch.evidenced {
  background: var(--ka-map-evidenced-fill);
  border: 1px solid var(--ka-map-evidenced-stroke);
}

.evidence-legend-swatch.none {
  background: var(--ka-map-none-fill);
  border: 1px solid #cfcbc2;
}

.evidence-legend-swatch.selected {
  background: rgba(32, 92, 66, 0.16);
  border: 1.2px solid #205c42;
}

/* Matches .active-region-overlay/.active-region-outline exactly — vivid
   crimson (outside the muted evidence palette) + higher opacity, not just
   a thicker border. */
.evidence-legend-swatch.active {
  background: rgba(176, 34, 79, 0.30);
  border: 1.8px solid #b0224f;
}

/* Matches .interaction-highlight-overlay exactly — dashed, cool blue. */
.evidence-legend-swatch.interaction {
  background: rgba(32, 92, 158, 0.14);
  border: 1.4px dashed #205c9e;
}

.map-envelope-caveat {
  font-family: var(--ka-font-mono, monospace);
  font-size: 10px;
  color: var(--ka-color-ink-quiet, #616b64);
}

/* Geographic Inspection Tooltip (Desktop Hover) */
.map-region-tooltip {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: rgba(24, 28, 25, 0.94);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.1s ease;
  max-width: 220px;
}

.map-region-tooltip-en {
  font-weight: 700;
  font-size: 11.5px;
}

.map-region-tooltip-ko {
  font-size: 10.5px;
  color: #dcdad5;
}

.map-region-tooltip-status {
  font-size: 10px;
  color: #a3c2b1;
  margin-top: 2px;
  font-weight: 500;
}

.map-region-tooltip-selected {
  font-size: 10px;
  color: #f0e6c8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.map-ocean { fill: var(--ka-color-paper-sunken, #edebe4); }
.map-touch-feedback {
 position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
 top: max(12px, env(safe-area-inset-top)); z-index: 10000;
 display: flex; align-items: center; justify-content: space-between; gap: 12px;
 max-width: 480px; margin-inline: auto; padding: 12px 16px;
 background: var(--ka-color-paper-surface, #fff); color: var(--ka-color-ink-primary, #181c19);
 border-radius: 12px; box-shadow: 0 4px 20px #181c1933;
 font-size: 14px; line-height: 1.4;
}
.map-touch-feedback[hidden] { display: none; }
.map-touch-feedback p { margin: 4px 0 0; }
.map-touch-feedback button { min-width:44px; min-height:44px; font-size:24px; border:0; background:transparent; color:inherit; cursor:pointer; pointer-events:auto; touch-action:manipulation; }
@media (max-width: 900px) {
 .map-canvas-container svg:is(.map-svg, .comparison-svg-map) { max-height: 65svh; width: 100%; }
}

/* Short Tap Temporary Inspection Callout (Mobile Touch) */
.map-region-callout {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(253, 253, 252, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ka-color-rule-subtle, #cfcac0);
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}

@media (pointer: coarse) {
	.map-region-tooltip { display: none !important; }
	.map-region-callout {
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 20;
		min-height: 48px;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 12px;
		background: var(--ka-color-paper-surface, #fff);
		border: 1px solid var(--ka-color-rule-hairline, #d8d2c6);
		border-radius: 8px;
		box-shadow: 0 4px 14px rgba(24,28,25,.16);
	}
}

.map-region-callout-info {
  display: flex;
  flex-direction: column;
}

.map-region-callout-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ka-color-ink-primary, #181c19);
}

.map-region-callout-status {
  font-size: 11px;
  color: var(--ka-color-ink-secondary, #3b433d);
}

.map-region-callout-close {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #616b64;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

/* Ownership: EvidenceMap owns map-control interaction. */
.map-control-btn {
  border: 1px solid var(--ka-control-edge);
  box-shadow: var(--ka-control-press-inset);
  transition: var(--ka-control-transition);
}
.map-control-btn:hover { border-color: var(--ka-control-edge-strong); }
.map-control-btn:active {
  transform: translateY(1px);
  box-shadow: var(--ka-control-active-inset);
}