body {
	padding: 0;
	margin: 0;
}

html, body, #map {
	width: 100%;
	height: 100%;
}

#map {
	position: absolute;
	inset: 0;
}

.overlay-message {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #f7f6f3;
	color: #333;
	font: 16px/1.5 system-ui, sans-serif;
	text-align: center;
}

/* Рамка фокуса вокруг всей карты: MapLibre делает холст фокусируемым,
   и по клику мышью с последующей клавишей Chrome обводит синим весь экран.
   Гасим её там, где фокус взят указателем; пометку ставит focus-ring.js.
   Приходу с клавиатуры рамка остаётся: там она по делу */
.maplibregl-canvas:focus-visible[data-pointer-focus] {
	outline: none;
}

/* Слайдер даты у правого края карты и подпись выбранного дня над ним */
.timeline {
	/* Ось, на которой стоит слайдер: центр кружка атрибуции MapLibre, а это
	   22 пикселя от правого края окна — кружок в 24 пикселя плюс отступ
	   в 10. Ползунок и кружок оказываются друг под другом, иначе они стоят
	   почти, но не совсем на одной линии, и это заметно */
	--axis: 22px;

	/* Размер ползунка. Заодно это ширина слайдера: браузер центрует
	   ползунок по ширине input, а не по дорожке */
	--thumb-size: 16px;

	position: absolute;
	top: 10px;
	right: calc(var(--axis) - var(--thumb-size) / 2);
	/* снизу оставлено место ссылкам Mapbox и OpenStreetMap */
	bottom: 44px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	/* мимо подписи и ползунка события уходят карте: иначе полоса шириной
	   в подпись отбирала бы у карты перетаскивание */
	pointer-events: none;
}

.timeline-date {
	pointer-events: auto;
	font: 24px 'Alegreya Sans SC', sans-serif;
	color: #333;
	white-space: nowrap;
}

/* Стрелки навигации по событиям: пара кнопок между подписью даты
   и слайдером. Правым краем они выровнены по подписи — на ось слайдера
   их не поставить, пара шире, чем расстояние от оси до края окна.
   Оформление повторяет кнопки масштаба MapLibre в левом углу, чтобы
   две пары кнопок на одной карте не выглядели из разных приложений */
.event-nav {
	pointer-events: auto;
	display: flex;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.event-nav-button {
	width: 29px;
	height: 29px;
	padding: 0;
	border: none;
	background: transparent;
	color: #333;
	font: bold 18px/1 'Lucida Console', Monaco, monospace;
	cursor: pointer;
}

/* Скругление достаётся только внешним углам пары, а между кнопками идёт
   волосяная линия во всю высоту — так же устроена группа кнопок у MapLibre */
.event-nav-button:first-child {
	border-radius: 4px 0 0 4px;
}

.event-nav-button:last-child {
	border-radius: 0 4px 4px 0;
}

.event-nav-button + .event-nav-button {
	border-left: 1px solid #ddd;
}

.event-nav-button:hover:not(:disabled) {
	background: #f2f2f2;
}

/* Погашенная стрелка: дальше крайнего события идти некуда */
.event-nav-button:disabled {
	color: #ccc;
	cursor: default;
}

/* Рамка фокуса — только для тех, кто пришёл с клавиатуры. Пометку
   на фокусе от мыши ставит focus-ring.js, там же написано зачем.
   Штатную рамку гасим целиком: она рисуется по тому же :focus-visible
   и иначе вылезает там, где свою мы убрали */
.event-nav-button:focus-visible {
	outline: none;
}

.event-nav-button:focus-visible:not([data-pointer-focus]) {
	outline: 2px solid rgba(0, 120, 190, 0.6);
	outline-offset: -2px;
}

/* Слайдер стоит вертикально: writing-mode разворачивает шкалу,
   direction опускает ранние даты вниз.
   Видимая дорожка нарисована градиентом — полоска в четыре пикселя
   по центру: своей ширины дорожке задать нельзя, иначе ползунок съедет
   с неё в сторону */
.timeline-slider {
	pointer-events: auto;
	flex: 1;
	min-height: 0;
	width: var(--thumb-size);
	margin: 0;
	writing-mode: vertical-rl;
	direction: rtl;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

/* Правила для webkit и для Firefox приходится держать отдельно: в одном
   селекторе браузер выбросил бы всё правило из-за чужого префикса */
.timeline-slider::-webkit-slider-runnable-track {
	background: linear-gradient(to right,
		transparent calc(50% - 2px), rgba(0, 0, 0, 0.25) calc(50% - 2px),
		rgba(0, 0, 0, 0.25) calc(50% + 2px), transparent calc(50% + 2px));
}

.timeline-slider::-moz-range-track {
	background: linear-gradient(to right,
		transparent calc(50% - 2px), rgba(0, 0, 0, 0.25) calc(50% - 2px),
		rgba(0, 0, 0, 0.25) calc(50% + 2px), transparent calc(50% + 2px));
}

.timeline-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--thumb-size);
	height: var(--thumb-size);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.timeline-slider::-moz-range-thumb {
	width: var(--thumb-size);
	height: var(--thumb-size);
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Рамка фокуса рисуется вокруг ползунка, а не вокруг input: input тянется
   на всю высоту карты, и рамка по нему получилась бы во весь экран */
.timeline-slider:focus-visible {
	outline: none;
}

.timeline-slider:focus-visible:not([data-pointer-focus])::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(0, 120, 190, 0.6);
}

.timeline-slider:focus-visible:not([data-pointer-focus])::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(0, 120, 190, 0.6);
}

/* Карточка объекта — содержимое всплывающего окна MapLibre.
   Оформление окна задаётся здесь целиком: своё у MapLibre рассчитано
   на подпись в пару слов, а в карточке бывает абзац текста и ссылки */
.card .maplibregl-popup-content {
	padding: 14px 16px;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	font: 13px/1.45 system-ui, sans-serif;
	color: #333;
}

.card .maplibregl-popup-close-button {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: #999;
	font-size: 18px;
	line-height: 1;
}

.card .maplibregl-popup-close-button:hover {
	background: #f2f2f2;
	color: #333;
}

/* Заголовок набран тем же шрифтом, что и подписи станций на карте:
   название объекта в карточке и оно же на карте — один текст, и выглядеть
   он должен одинаково, см. решение 50.
   Справа оставлено место кнопке закрытия */
.card-title {
	margin: 0;
	padding-right: 20px;
	font: 600 16px/1.3 'Open Sans', sans-serif;
	color: #222;
}

/* Значок линии: кружок её цвета с номером. Цвет проставляется разметкой
   из палитры, потому что линий два десятка и на каждую пришлось бы
   заводить правило */
.line-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border-radius: 50%;
	font: 700 11px/1 system-ui, sans-serif;
	letter-spacing: -0.02em;
	color: #fff;
	/* значок стоит в строке текста, а не отдельной колонкой: у длинного
	   названия заголовок переносится, и значок должен остаться при первой
	   строке, а не съехать на середину двух.
	   Сдвиг поднимает кружок к центру заглавных букв заголовка: сам по себе
	   он равняется по базовой линии и стоит заметно ниже. Величина зависит
	   от кегля заголовка и при его смене подбирается заново */
	vertical-align: 2px;
}

/* Жёлтая линия: белый номер на ней не читается, см. palette.js */
.line-badge-dark {
	color: #1a1a1a;
}

/* Примечание. Разметка внутри приходит из набора данных, поэтому здесь
   заданы только отступы: править чужие теги правилами бесполезно */
.card-note {
	margin-top: 10px;
}

.card-links {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Ссылка на внешний источник — квадратная кнопка со значком.
   Значок вставляется картинкой и цвет берёт из себя самого, см. card.js */
.card-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
}

.card-link:hover {
	background: #f2f2f2;
}

.card-link:focus-visible {
	outline: 2px solid rgba(0, 120, 190, 0.6);
	outline-offset: 1px;
}

/* Переключатель подложек в левом нижнем углу карты. Свёрнут до одной
   кнопки со значком стопки слоёв; список раскрывается по наведению
   и по фокусу — правилами, без обработчиков: разворачивать его на клик
   значит забирать у пользователя ещё одно нажатие.

   Кнопка крупнее кнопок масштаба: те стоят парой и попадать в них учатся
   по соседству друг с другом, а эта одна, и по ней ещё надо догадаться,
   что она переключает подложку */
.basemap-switch {
	position: relative;
	width: 56px;
	height: 56px;
	font: 13px/1 system-ui, sans-serif;
	color: #333;
}

.basemap-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	color: #333;
	cursor: pointer;
}

.basemap-toggle svg {
	width: 28px;
	height: 28px;
}

/* Список подложек. Растёт от левого нижнего угла — оттуда же, где стояла
   кнопка, и на её месте: так список появляется под курсором, а не рядом
   с ним.

   Фон белый именно у плашки, а не только у кнопок внутри: у MapLibre есть
   своё правило на кнопки внутри элемента управления, оно красит их под
   курсором в rgba(0, 0, 0, .05) и перебивает наш цвет. Пункт, в который
   целишься, от этого становился прозрачным, и сквозь него просвечивала
   карта. Белая плашка снимает вопрос: чем бы кнопка ни красилась,
   под ней белое */
.basemap-menu {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	/* Закрытый список погашен прозрачностью, а не display: none.
	   Спрятанный display кнопки внутри выпадают из обхода клавишей Tab,
	   и до переключателя нельзя добраться с клавиатуры вовсе:
	   раскрыться по фокусу ему уже не с чего */
	opacity: 0;
	pointer-events: none;
}

/* Кнопка выбора подложки: название и отметка о том, что она на карте.
   Своего фона у кнопки нет — он на плашке; подсветку под курсором рисует
   MapLibre тем же цветом, каким подсвечивает кнопки масштаба */
.basemap-option {
	height: 40px;
	padding: 0 14px;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	white-space: nowrap;
	text-align: left;
	cursor: pointer;
}

.basemap-option + .basemap-option {
	border-top: 1px solid #ddd;
}

/* Подложка, которая сейчас на карте. Отмечена и начертанием, и фоном:
   одного начертания на коротком слове почти не видно.
   Имя тега в селекторе нужно, чтобы отметка не смывалась подсветкой
   MapLibre, когда курсор проходит по этой же строке: специфичность
   у правил одинаковая, и спор решает порядок подключения таблиц */
.basemap-switch button.basemap-option[aria-pressed="true"] {
	background: #eee;
	font-weight: 700;
	cursor: default;
}

/* Рамка фокуса — только для тех, кто пришёл с клавиатуры, как у стрелок
   событий выше. Штатную гасим целиком: она рисуется по тому же
   :focus-visible и иначе вылезает там, где свою мы убрали */
.basemap-option:focus-visible {
	outline: none;
}

.basemap-option:focus-visible:not([data-pointer-focus]) {
	outline: 2px solid rgba(0, 120, 190, 0.6);
	outline-offset: -2px;
}

/* Раскрытый список встаёт на место кнопки, поэтому кнопка прячется.
   Именно прячется, а не убирается из потока: иначе плашка схлопывается
   и список прыгает */
.basemap-switch:hover .basemap-toggle,
.basemap-switch:focus-within .basemap-toggle {
	visibility: hidden;
}

.basemap-switch:hover .basemap-menu,
.basemap-switch:focus-within .basemap-menu {
	opacity: 1;
	pointer-events: auto;
}