/* Shared city-map presentation: the same quiet palette as the travel globe. */
.city-map-page { --travel-accent: #466e7a; --accent: var(--travel-accent); }
[data-theme="dark"] .city-map-page { --travel-accent: #9bc5d0; }
.city-map-page .city-header {
    right: 0;
    height: 64px;
    padding: 0 24px;
    gap: 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    pointer-events: auto;
}
.city-map-page .city-title { padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: 20px; letter-spacing: -.035em; }
.city-map-page .city-country { font-size: 14px; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.city-map-page .back-link, .city-map-page .guide-link { min-height: 44px; background: none; box-shadow: none; padding: 8px; font-size: 14px; border-radius: 6px; }
.city-map-page .back-link { color: var(--travel-accent); }
.city-map-page .back-link svg { width: 16px; height: 16px; }
.city-map-page .guide-link:hover, .city-map-page .back-link:hover { background: var(--bg-secondary); }
.city-map-page .city-header .theme-toggle { margin-left: auto; flex-shrink: 0; width: 44px; height: 44px; background: radial-gradient(circle, var(--text-primary) 0 9px, transparent 10px); box-shadow: none; }
.city-map-page .app-container { height: 100svh; padding-top: 64px; }
.city-map-page .controls { top: 64px; padding: 12px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
.city-map-page:has(.sidebar.collapsed) .controls { right: 0; }
.city-map-page .filter-section > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.city-map-page .filter-btn { font: 500 14px/1.3 Inter, sans-serif; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); background: transparent; box-shadow: none; }
.city-map-page .filter-btn.active { background: var(--travel-accent); border-color: var(--travel-accent); color: var(--bg-primary); }
.city-map-page .filter-btn:hover { border-color: var(--travel-accent); }
.city-map-page .tag-filter-btn { font-size: 12px; min-height: 32px; box-shadow: none; border-color: var(--border); }
.city-map-page .sidebar-header { min-height: 64px; }
.city-map-page .sidebar-header h2 { font-size: 18px; letter-spacing: -.03em; }
.city-map-page .search-input { min-height: 44px; border-radius: 10px; }
.city-map-page .location-list { padding: 8px 16px 24px; }
.city-map-page .location-item { background: var(--bg-primary); border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 0; padding: 20px 4px; margin: 0; box-shadow: none; }
.city-map-page .location-item:hover { background: var(--bg-secondary); }
.city-map-page .location-item.active { border-color: var(--travel-accent); border-radius: 10px; padding-inline: 12px; background: var(--bg-secondary); }
.city-map-page .location-name { font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.city-map-page .location-description { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.city-map-page .toggle-sidebar { top: 140px; }
.city-map-page .close-sidebar[hidden] { display: none; }
.city-map-page :is(a, button, input, select):focus-visible { outline: 2px solid var(--travel-accent); outline-offset: 3px; }
@media (max-width: 768px) {
    .city-map-page .city-header { height: auto; min-height: 64px; flex-wrap: wrap; padding: 8px 12px; gap: 4px 8px; }
    .city-map-page .city-title { font-size: 18px; flex: 1; }
    .city-map-page .city-header .guide-link { font-size: 12px; padding-inline: 4px; }
    .city-map-page .city-header .theme-toggle { width: 32px; }
    .city-map-page .controls { padding: 8px 12px; }
    .city-map-page .filter-btn { min-height: 44px; }
    .city-map-page .sidebar { height: 100svh; }
    .city-map-page .sidebar-header { padding-inline: 16px; }
    .city-map-page .toggle-sidebar { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); right: 16px; min-height: 44px; }
    .city-map-page .sidebar-back-btn { min-height: 44px; }
}
@media (max-width: 768px) {
    .city-map-page .city-header { flex-wrap: nowrap; height: 64px; }
    .city-map-page .city-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* Keep the same Saved/Open now controls available at every screen size. */
.city-map-page .sidebar-filter-section { display: block; }
.city-map-page .toggle-filter-btn { min-height: 44px; font-size: 14px; }
@media (min-width: 769px) {
    .city-map-page .sidebar-filter-buttons,
    .city-map-page .sidebar-filter-section .sidebar-tags { display: none; }
}
/* A closed mobile drawer must not leave invisible controls in the tab order. */
@media (max-width: 768px) {
    .city-map-page .sidebar:not(.open) { visibility: hidden; }
    .city-map-page .sidebar.open { visibility: visible; }
}

.city-map-page .filter-toggles { flex-wrap: wrap; }
.city-map-page .hours-status:empty { display: none; }