/* Shared header navigation for the map and the guide.
 *
 * One file, linked by both pages, so the two screens read as one product and the bar
 * can never drift apart between them. Deliberately slim — on the map screen every
 * pixel it takes is a pixel of satellite imagery lost.
 */

.appbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 46px;
  padding: 0 18px;
  background: #101f36;
  color: #dce6f3;
  border-bottom: 1px solid #24344f;
}

.appbar-brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.appbar-brand .appbar-sub {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7e97ba;
}

.appbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.appbar-nav a {
  padding: 6px 13px;
  border-radius: 4px;
  color: #b9c9de;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.appbar-nav a:hover { background: #1c2c44; color: #fff; }

/* The page you are on: filled, not just tinted, so it reads at a glance. */
.appbar-nav a[aria-current="page"] {
  background: #1a5fb4;
  color: #fff;
}

.appbar-nav a:focus-visible,
.appbar-brand:focus-visible {
  outline: 2px solid #7fb0f0;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .appbar { padding: 0 12px; gap: 10px; }
  .appbar-brand .appbar-sub { display: none; }
  .appbar-nav a { padding: 6px 10px; font-size: 13px; }
}

@media print {
  .appbar { display: none; }
}