/* radio.moores.town: the contour signal map (STYLE_GUIDE.md section 14). Its own colors, light and dark. */
:root {
  --radio-ground: #FFFFFF; --radio-line: #6A6A6A; --radio-line-alpha: 1; --radio-ink: #000000;
  --radio-case: #242424; --radio-case-edge: #000000; --radio-screen: #EDEDED; --radio-key: #A0A0A0; --radio-slat: #6A6A6A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --radio-ground: #171717; --radio-line: #8C8C8C; --radio-line-alpha: .8; --radio-ink: #FFFFFF;
    --radio-case: #141414; --radio-case-edge: #F2F2F2; --radio-screen: #F2F2F2; --radio-key: #9A9A9A; --radio-slat: #9A9A9A;
  }
}
:root[data-theme="dark"] {
  --radio-ground: #171717; --radio-line: #8C8C8C; --radio-line-alpha: .8; --radio-ink: #FFFFFF;
  --radio-case: #141414; --radio-case-edge: #F2F2F2; --radio-screen: #F2F2F2; --radio-key: #9A9A9A; --radio-slat: #9A9A9A;
}
body { background: var(--radio-ground); }
.radio-map { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--radio-ground); }
.radio-map > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } /* radio-map.js sizes and shifts them */
/* The contour file is only a shape: it masks a block of the line color, so the page's CSS colors the lines. */
.radio-contours { background: var(--radio-line); opacity: var(--radio-line-alpha); -webkit-mask: url("/assets/radio-contours.svg") center / 100% 100% no-repeat; mask: url("/assets/radio-contours.svg") center / 100% 100% no-repeat; }
/* Only the info button floats over the map, on a small chip so it stays readable. */
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
footer > * { pointer-events: auto; }
.about-btn { color: var(--radio-ink); background: color-mix(in srgb, var(--radio-ground) 88%, transparent); border-radius: 50%; }

/* Bullseyes and the Moorestown radio are drawn by radio-map.js into the overlay. */
.radio-overlay .fade-stop { stop-color: var(--radio-ground); }
.radio-overlay .ring { fill: none; stroke: var(--radio-ink); }
.radio-overlay .dot { fill: var(--radio-ink); }
/* The handheld radio at Moorestown: a case that stands out from the ground, a light display, and an outline of the ground color so contour lines stay behind it. */
.radio-overlay .hh-halo { fill: var(--radio-ground); stroke: var(--radio-ground); stroke-width: 6; }
.radio-overlay .hh-body { fill: var(--radio-case); stroke: var(--radio-case-edge); stroke-width: 1.5; }
.radio-overlay .hh-screen { fill: var(--radio-screen); stroke: var(--radio-case-edge); stroke-width: 1; }
.radio-overlay .hh-key { fill: var(--radio-key); }
.radio-overlay .hh-slat { fill: var(--radio-slat); }