/* Панель фильтра справочника. Компоненты по канону: рамка 1 px --line,
   скругление 12, кегли со шкалы, одно акцентное действие на экране. */

.dm { margin: 0 0 20px }

.dm__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }

.dm__field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.dm__field--find { flex: 1 1 220px }
.dm__label { color: var(--color-text-mute); font-size: 12px;
	letter-spacing: .07em; text-transform: uppercase }

.dm__select, .dm__input {
	height: 44px; padding: 0 12px; min-width: 0;
	border: 1px solid var(--color-text-soft); border-radius: 4px;
	background: var(--color-surface); color: var(--color-text);
	font: inherit; font-size: 16px;
}
.dm__select { min-width: 260px; max-width: 100% }
.dm__input::placeholder { color: var(--color-text-mute) }
.dm__select:focus-visible, .dm__input:focus-visible {
	outline: 2px solid var(--color-accent); outline-offset: 1px;
	border-color: var(--color-accent);
}

.dm__reset {
	height: 44px; padding: 0 16px;
	border: 1px solid var(--color-line); border-radius: 4px;
	background: var(--color-surface); color: var(--color-text);
	font: inherit; font-size: 16px; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dm__reset:hover, .dm__reset:focus-visible {
	background: var(--color-accent-fill); border-color: var(--color-accent);
	color: var(--color-on-fill); outline: 0;
}

.dm__count { margin: 12px 0 0; color: var(--color-text-mute); font-size: 14px }

.dm__map { margin: 16px 0 0 }
.dm__map-btn {
	display: inline-flex; flex-direction: column; gap: 2px;
	min-height: 44px; padding: 8px 16px;
	border: 1px solid var(--color-line); border-radius: 4px;
	background: var(--color-surface); color: var(--color-text);
	font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dm__map-btn span { font-size: 13px; font-weight: 400; color: var(--color-text-mute) }
.dm__map-btn:hover, .dm__map-btn:focus-visible {
	background: var(--color-accent-fill); border-color: var(--color-accent);
	color: var(--color-on-fill); outline: 0;
}
.dm__map-btn:hover span, .dm__map-btn:focus-visible span { color: var(--color-on-fill); opacity: .85 }

.dm__map-box:empty { display: none }
.dm__frame {
	display: block; width: 100%; height: 420px;
	border: 1px solid var(--color-line); border-radius: 12px;
}
.dm__map-note { margin: 8px 0 0; color: var(--color-text-mute); font-size: 14px }

@media (max-width: 768px) {
	.dm__row { flex-direction: column; align-items: stretch }
	.dm__select { min-width: 0 }
	.dm__reset { width: 100% }
	.dm__frame { height: 320px }
}

/* [hidden] сам по себе не скрывает. У темы стоит .dir-item{display:block},
   а это правило тяжелее браузерного [hidden]{display:none} — строки
   получали атрибут и продолжали показываться: счётчик говорил
   «12 из 86», а в списке стояли все. Тот же капкан был в фильтре
   «Полезного», и там он уже закрыт этой же строкой. */
.dir-item[hidden],
.col-card[hidden],
.dir-letter-block[hidden],
.dir-alpha__item[hidden] { display: none !important }

/* И внутри самой панели — по той же причине: я задал кнопке карты
   display:inline-flex, и после открытия карты она оставалась висеть
   над ней, хотя атрибут hidden выставлялся. Наступил на свой же
   капкан второй раз за одну правку. */
.dm [hidden] { display: none !important }