.journal-city-switcher-bar {
	background: var(--js-canvas, #f3f1f0);
	border-bottom: 1px solid var(--js-line, #e5e7eb);
}

.journal-city-switcher-bar .container {
	display: flex;
	justify-content: flex-end;
	padding: 8px 0;
}

.journal-city-switcher {
	position: relative;
}

.journal-city-switcher summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	color: var(--js-ink, #171717);
	background: var(--js-surface, #fff);
	border: 1px solid var(--js-line, #e5e7eb);
	border-radius: 0;
	font-size: 13px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.journal-city-switcher summary::-webkit-details-marker {
	display: none;
}

.journal-city-switcher summary span {
	color: var(--js-accent, #e85d3f);
}

.journal-city-switcher[open] summary {
	border-color: var(--js-accent, #e85d3f);
}

.journal-city-switcher ul {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 220px;
	max-height: 320px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	list-style: none;
	background: var(--js-surface, #fff);
	border: 1px solid var(--js-line, #e5e7eb);
	border-radius: 0;
	box-shadow: 0 12px 32px rgba(23, 23, 23, 0.12);
}

.journal-city-switcher ul a {
	display: block;
	padding: 8px 10px;
	color: var(--js-ink, #171717);
	border-radius: 0;
	font-size: 14px;
	text-decoration: none;
}

.journal-city-switcher ul a:hover,
.journal-city-switcher ul a:focus {
	background: var(--js-canvas, #f3f1f0);
}

.journal-city-switcher ul a[aria-current="true"] {
	color: var(--js-accent, #e85d3f);
	font-weight: 700;
}

@media (max-width: 600px) {
	.journal-city-switcher-bar .container {
		padding: 6px 16px;
	}
}