/* City dropdown on the logo (citynav.js). The panel is a top-layer popover anchored under the button. */
.cnav-btn { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 6px; margin-left: -6px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; white-space: nowrap; transition: background .15s, border-color .15s; flex: none; }
.cnav-btn:hover, .cnav-btn.open { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.cnav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cnav-btn .brand { pointer-events: none; }
.cnav-cur { display: flex; flex-direction: column; padding-left: 10px; border-left: 1px solid var(--line); min-width: 0; }
.cnav-cur b { font: 700 15px/1.05 var(--cond); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.cnav-cur b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); vertical-align: middle; }
.cnav-cur small { font-size: 11px; color: var(--muted); line-height: 1.15; }
.cnav-chev { width: 7px; height: 7px; margin: -4px 2px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s, border-color .2s; font-size: 0; }
.cnav-btn:hover .cnav-chev { border-color: #fff; }
.cnav-btn.open .cnav-chev { transform: translateY(4px) rotate(225deg); border-color: var(--accent); }
.topbar.has-cnav .map-chip { display: none; }

#cityTabs.cnav-panel { display: none; position: fixed; inset: auto; margin: 0; width: 340px; max-height: calc(100dvh - 90px); overflow: auto; flex-direction: column; gap: 2px; flex: none;
  padding: 8px; border-radius: 14px; color: var(--text); background: rgba(13,15,24,0.97); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4); z-index: 60; }
#cityTabs.cnav-panel.open { display: flex; }
#cityTabs.cnav-panel:popover-open { display: flex; }
.cnav-label { padding: 6px 10px 3px; font: 700 10px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cnav-sep { height: 1px; margin: 4px 6px; background: var(--line); }
#cityTabs .cnav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; white-space: normal; }
#cityTabs .cnav-item:hover, #cityTabs .cnav-item:focus-visible { background: rgba(255,255,255,0.06); outline: none; }
#cityTabs .cnav-item.active { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
#cityTabs .cnav-item .city-dot { width: 10px; height: 10px; opacity: 0.7; }
#cityTabs .cnav-item.active .city-dot { opacity: 1; box-shadow: 0 0 10px var(--c); }
.cnav-txt { flex: 1; min-width: 0; }
#cityTabs .cnav-txt b { display: block; font: 700 16px/1.05 var(--cond); letter-spacing: 0.03em; text-transform: uppercase; }
#cityTabs .cnav-item.active .cnav-txt b { color: color-mix(in srgb, var(--c) 55%, #fff); }
#cityTabs .cnav-txt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--muted); }
.cnav-txt small em { font-style: normal; opacity: 0.75; }
.cnav-here { font-size: 13px; }
.cnav-ico { width: 10px; display: grid; place-items: center; font-size: 15px; }
#cityTabs .cnav-item kbd { flex: none; opacity: 0.7; }
#cityTabs .cnav-item.locked { opacity: 0.62; }
#cityTabs .city-lock { position: static; order: 5; flex: none; font-size: 11px; padding: 2px 6px; }

@media (max-width: 900px) {
  .cnav-btn { gap: 8px; padding: 3px 8px 3px 4px; }
  .cnav-cur { padding-left: 8px; }
  .cnav-cur small { display: none; }
  .cnav-cur b { font-size: 14px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .cnav-txt small em { display: none; }
  #cityTabs .cnav-item kbd { display: none; }
}
.topbar.has-cnav .stats { margin-left: auto; }
/* Phones: the logo, the current city's dot and the chevron; the panel names everything. */
@media (max-width: 520px) {
  .topbar.has-cnav { gap: 6px; }
  .cnav-btn { gap: 5px; padding: 3px 4px 3px 2px; margin-left: -4px; }
  .cnav-cur { padding-left: 0; border-left: 0; }
  .cnav-cur b { font-size: 0; max-width: none; }
  .cnav-cur b::before { width: 9px; height: 9px; margin: 0; }
}