/* =========================================================================
   MeshWars: map page base styles -- page layout, the loading overlay, and
   dark-theme overrides for Leaflet's own chrome (attribution, popup
   wrapper, controls bar) plus the site nav bar shared across pages.

   Everything board-specific (the top-right territory panel, cell popups,
   its modal) lives in mc.css instead, next to the module that builds it
   (frontend/mc.js) -- that module now renders both boards, so there is
   no more Meshtastic-only settings panel, Top MQTT Feeders control,
   repeater-dot markers, live-track layer, or rich tile-popup styling
   here: those all belonged to the retired Meshtastic geohash renderer
   (frontend/code.js, deleted -- see mc.js's module docstring) and had no
   counterpart on the MeshCore board, so they were deleted rather than
   carried forward unstyled.
   ========================================================================= */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

#map {
  position: absolute;
  top: var(--mw-nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mw-page);
}

/* -------------------------------------------------------------------------
   No-JS fallback (see the <noscript> block in index.html). #loading-
   overlay (z-index: 5000, inset: 0) never gets its .fade-out class
   without mc.js running to add it, so without JS it sits fully opaque
   over the ENTIRE viewport forever, .mw-nav (z-index: 1000) included --
   a no-JS visitor stuck looking at "Loading map..." with no nav
   visible either way, whether this rule exists or not. Covering the
   full viewport here too (not just the area below the nav) rather than
   leaving a dead 48px strip at the top where the nav is already hidden
   behind that overlay regardless -- one clean takeover screen instead
   of a floating paragraph over a blank band.
   ------------------------------------------------------------------------- */
.mw-noscript {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: var(--mw-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.mw-noscript p {
  max-width: 480px;
  margin: 0;
  color: var(--mw-text-1);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.mw-noscript a { color: var(--mw-accent); }

/* -------------------------------------------------------------------------
   Loading overlay (faded out by mc.js once the initial board fetch finishes)
   ------------------------------------------------------------------------- */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--mw-page);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#loading-overlay.fade-out { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-text  { margin-top: 14px; color: var(--mw-text-6); font-size: 13px; }
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--mw-raised);
  border-top-color: var(--mw-accent);
  border-radius: 50%;
  margin: 0 auto;
  animation: mt-spin 0.9s linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   Leaflet control overrides (dark theme)
   ------------------------------------------------------------------------- */
.leaflet-bar a,
.leaflet-bar a:hover {
  background-color: var(--mw-panel);
  color: var(--mw-text-1);
  border-bottom: 1px solid var(--mw-line);
}
.leaflet-control-attribution {
  background: rgba(20, 20, 20, 0.7) !important;
  color: var(--mw-text-6) !important;
}
.leaflet-control-attribution a { color: var(--mw-text-4) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--mw-panel);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
}
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; }
.leaflet-popup-close-button { color: var(--mw-text-4) !important; }

/* -------------------------------------------------------------------------
   Site nav bar (Map / About / Join). Fixed, full width, across the very
   top of every page (frontend/index.html, about.html, join.html) --
   wordmark on the left, page links on the right, current page marked
   with .active. Identical declarations duplicated in coverage.css /
   landing.css / join.css (the same per-page duplication pattern .mw-nav
   already used before this) since the three pages never share a
   stylesheet. --mw-nav-h is read by each page's own layout rules so
   content starts exactly at the bar's bottom edge with no gap or
   overlap.
   ------------------------------------------------------------------------- */
:root {
  --mw-nav-h: 48px;
}
@media (max-width: 600px) {
  :root { --mw-nav-h: 40px; }
}

.mw-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mw-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--mw-panel);
  border-bottom: 1px solid var(--mw-line);
  box-sizing: border-box;
}
.mw-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mw-accent);
  text-decoration: none;
  white-space: nowrap;
}
/* A background rather than an <img src>, so the mark follows
   --mw-crest the way every colour follows its token. The element keeps
   an aria-label and role="img" since a background carries no alternative
   text of its own. */
.mw-nav-crest {
  display: block;
  height: 28px;
  width: 28px;
  flex: none;
  background-image: var(--mw-crest);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mw-nav-links {
  display: flex;
  gap: 4px;
}
.mw-nav-links a {
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mw-text-5);
  text-decoration: none;
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  background: var(--mw-panel);
  white-space: nowrap;
}
.mw-nav-links a:hover { background: var(--mw-raised); color: var(--mw-accent); }
.mw-nav-links a.active { color: var(--mw-accent); border-color: var(--mw-accent); }

/* Signed-in indicator on the Account nav link -- see join.css's own
   copy of this rule for the full reasoning; duplicated here for the
   same reason the rest of the nav block is duplicated per owning
   stylesheet. */
.mw-nav-account-signed-in::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--mw-friendly);
  vertical-align: middle;
}

/* GitHub mark: deliberately understated per the owner ("faded into the
   background so its visible but not prominent") -- low opacity at rest,
   full opacity on hover/focus. Lives inside .mw-nav-links (not a third
   flex child of .mw-nav) so the existing brand/links space-between
   layout is untouched -- it's just one more item in the links row. */
.mw-nav-github {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--mw-text-5);
  opacity: 0.35;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-nav-github svg { display: block; }
.mw-nav-github:hover,
.mw-nav-github:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}

@media (max-width: 600px) {
  .mw-nav { padding: 0 8px; gap: 6px; }
  .mw-nav-brand { font-size: 12px; gap: 6px; }
  .mw-nav-crest { height: 22px; }
  .mw-nav-links { gap: 3px; }
  .mw-nav-links a { padding: 4px 6px; font-size: 10px; }
  .mw-nav-github { padding: 4px; }
  .mw-nav-github svg { width: 14px; height: 14px; }
}

/* Skin switch -- see the matching rule in landing.css. The nav is
   duplicated across this file, landing.css and join.css (the pages do
   not share a stylesheet), so this rule is too. */
.mw-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mw-text-5);
  opacity: 0.35;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-theme-btn svg { display: block; }
.mw-theme-btn:hover,
.mw-theme-btn:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}
.mw-theme-btn[aria-pressed="true"] {
  opacity: 0.85;
  color: var(--mw-accent);
}

@media (prefers-reduced-motion: reduce) {
  .mw-theme-btn { transition: none; }
}