/* Shared cross-surface navigation. Linked by the map, ops and the network so
   the control that gets you between them is defined exactly once. */
/* ══════════════════════════════════════════════════════════════════════
   Product switcher
   ──────────────────────────────────────────────────────────────────────
   Norevyn is three surfaces on one account — the live map, operations and
   the network — and until now each was an island: no link between them and
   no way back to norevyn.io. This is the same control on every page, so
   wherever someone is, the other two and the front door are one click away.
   ══════════════════════════════════════════════════════════════════════ */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: var(--accent-text); }
.prod-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(10, 22, 40, 0.030);
  flex: none;
}
.prod-switch a {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.prod-switch a:hover { color: var(--text); background: rgba(10, 22, 40, 0.042); }
.prod-switch a.on { color: var(--on-accent); background: var(--accent); }
.prod-switch a.on:hover { background: var(--accent); }
@media (max-width: 900px) {
  .prod-switch a { padding: 0 9px; font-size: 12px; }
}
/* On a phone the map's topbar is a fixed height that already wraps four
   groups of controls onto two rows. The switcher is one group too many at
   full size, so the brand gives up its wordmark — the mark alone still reads
   as Norevyn and still links home — and the switcher tightens to match. */
@media (max-width: 760px) {
  #topbar .brand { gap: 0; }
  .prod-switch { padding: 2px; }
  .prod-switch a { height: 24px; padding: 0 8px; font-size: 12px; }
}