/* ==========================================================
   TOPO: contour-line background for dark green sections
   Every selector is namespaced with "topo-".
   ========================================================== */

/* The section that holds the canvas. Keeps the canvas inside it and
   lifts the section's real content above the drawing. */
.topo-host {
  position: relative;
  isolation: isolate;
}
.topo-host > :not(.topo-canvas) {
  position: relative;
  z-index: 1;
}

/* The drawing surface: fills the section, sits behind content, never
   catches clicks or taps. */
.topo-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  z-index: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Set by script.js if the browser can draw but the drawing failed:
   hide the canvas so the section's plain green shows. */
.topo-canvas.topo-canvas--off {
  display: none;
}

/* High-contrast / forced-colors modes and printing: plain background only. */
@media (forced-colors: active) {
  .topo-canvas { display: none; }
}
@media print {
  .topo-canvas { display: none; }
}