:root {
  --bg: #f4f4f2; --fg: #1f2328; --panel: rgba(255, 255, 255, 0.92); --muted: #57606a;
  --line: #d8dadd; --tab: rgba(31, 35, 40, 0.07); --link: #0b5cd5; --code: #eaebe8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d21; --fg: #e6e6e6; --panel: rgba(30, 32, 36, 0.92); --muted: #9aa0a6;
    --line: #34373d; --tab: rgba(230, 230, 230, 0.1); --link: #7cb0ff; --code: #26292e;
  }
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
#map { position: absolute; inset: 0; }
header {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 12px; align-items: center;
  padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--panel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
header .name { font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }

/* Map, Docs and Connect: the current one is filled in. */
.tabs { display: flex; gap: 2px; }
.tabs a {
  padding: 4px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.tabs a:hover { color: var(--fg); background: var(--tab); }
.tabs a[aria-current="page"] { color: var(--fg); background: var(--tab); font-weight: 600; }

/* On a narrow phone the tabs must clear the zoom buttons at the top right. */
@media (max-width: 420px) {
  header { gap: 6px; padding-left: 10px; }
  .tabs a { padding: 4px 7px; }
}
@media (max-width: 360px) {
  body:not(.docs) header .name { display: none; }
  body:not(.docs) header { padding-left: 6px; }
}

/* Credits wrap inside the screen instead of running off the edge. */
.maplibregl-ctrl-bottom-right { max-width: 100%; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-ctrl {
  box-sizing: border-box; max-width: calc(100vw - 20px); margin: 0 10px 10px;
  padding: 4px 8px; border-radius: 6px; background: var(--panel); color: var(--muted);
  font-size: 11px; line-height: 1.4; text-align: right; white-space: normal; overflow-wrap: anywhere;
}
.maplibregl-ctrl-attrib a { color: inherit; }