#mapShell {width:100%;height:100%;margin:0;padding:0;}

/* Область карты:ArcGIS canvas снизу, наш UI поверх него. */
.map-area {position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden;background:#dfe6ea;touch-action:none;overscroll-behavior:contain;}
#viewDiv,
#viewDiv.esri-view {position:absolute;inset:0;width:100%;height:100%;overflow:hidden;touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none;}

/* Эти классы оставлены только для поверхности карты и служебных контейнеров. */
#viewDiv .esri-view-root,
#viewDiv .esri-view-surface,
#viewDiv .esri-view-surface--inset-outline {position:absolute;inset:0;width:100%;height:100%;overflow:hidden;touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#viewDiv .esri-view-surface canvas {display:block;touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none;}
#viewDiv .esri-ui {position:absolute;inset:0;z-index:1;pointer-events:none;}
#viewDiv .esri-component {pointer-events:auto;}

/* Кнопки управления картой.
   Высота блока считается по фактическому количеству кнопок, включая кнопку слоев на страницах областей. */
.map-controls {position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
top:0;width:auto;max-height:100%;padding:5px;background-color:#fff;box-sizing:border-box;}
.map-controls--left {left:0;}
.map-button {display:grid;place-items:center;width:28px;height:28px;border:0;background:rgba(255, 255, 255, 0.96);box-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);cursor:pointer;}
.map-button:hover{background:#f4f7f9f5;}

/* Переключатель базовой карты. */
.map-basemap-toggle {position:absolute;top:0;right:0;z-index:1;width:auto;height:auto;padding:0;border:5px solid #ffffff;border-radius:0;background:transparent;cursor:pointer;overflow:hidden;}
.map-basemap-toggle:hover,
.map-basemap-toggle:focus {outline:1px solid #ffffff;outline-offset:0;}

/* Кнопка показывает не текущую, а следующую базовую карту. */
.map-basemap-toggle__thumb {display:block;width:50px;height:50px;background-image:url("images/hybrid.jpg");background-repeat:no-repeat;background-position:left top;background-size:auto;}
.map-basemap-toggle.is-next-hybrid .map-basemap-toggle__thumb {background-image:url("images/hybrid.jpg");}
.map-basemap-toggle.is-next-topo .map-basemap-toggle__thumb {background-image:url("images/topo.jpg");}

/* легенда */
.map-legend {position:absolute;top:135px;left:40px;z-index:1;min-width:200px;max-width:300px;max-height:min(350px, calc(100% - 24px));overflow:auto;border-radius:4px;color:#1f2937;background:rgba(255, 255, 255, 0.98);box-shadow:0 8px 22px rgba(15, 23, 42, 0.18);}
.map-legend[hidden] {display:none;}
.map-legend__title {margin:0;padding:5px 10px;border-bottom:1px solid #D8D2C6;color:#111827;font-size:16px;}
.map-legend__items {padding:5px 10px;}
.map-legend__item {display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;min-height:20px;}
.map-legend__icon {max-width:24px;max-height:24px;justify-self:center;}
.map-legend__label {color:#374151;font-size:13px;line-height:1.1;}

/* Собственный popup карты. */
.map-popup {position:absolute;z-index:1;min-width:225px;max-width:calc(100% - 24px);max-height:min(420px, calc(100% - 24px));overflow:visible;border-radius:4px;color:#374151;background:#ffffff;box-shadow:0 10px 26px rgba(15, 23, 42, 0.24);}
.map-popup[hidden] {display:none;}

/* Хвостик визуально связывает popup с объектом. */
.map-popup::after {content:"";position:absolute;left:var(--popup-anchor-x, 50%);width:0;height:0;transform:translateX(-50%);}
.map-popup.is-above::after {bottom:-7px;border-top:7px solid #ffffff;border-right:7px solid transparent;border-left:7px solid transparent;}
.map-popup.is-below::after {top:-7px;border-right:7px solid transparent;border-bottom:7px solid #ffffff;border-left:7px solid transparent;}
.map-popup__header {display:flex;align-items:flex-start;overflow:hidden;border-radius:4px 4px 0 0;border-bottom:1px solid #D8D2C6;background:#ffffff;}
.map-popup__title {flex:1 1 auto;margin:0;padding:7px 5px 5px 7px;color:#0b4d5b;font-size:16px !important;line-height:1.1;font-weight: normal;}
.map-popup__footer {display:flex;align-items:center;justify-content:flex-end;gap:4px;width:auto;padding:4px 10px;border-top:1px solid #D8D2C6;border-radius:0 0 4px 4px;background:#ffffff;}
.map-popup__footer[hidden] {display:none;}
.map-popup__nav-button {display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:4px;color:#374151;background:transparent;font:inherit;font-size:20px;line-height:1;cursor:pointer;}
.map-popup__nav-button:hover,
.map-popup__nav-button:focus {color:#111827;background:#f3f4f6;outline:none;}
.map-popup__nav-button:disabled {color:#9ca3af;background:transparent;cursor:default;}
.map-popup__counter {min-width:34px;color:#64748b;font-size:12px;line-height:1;text-align:center;white-space:nowrap;}
.map-popup__close {flex:0 0 auto;width:32px;height:32px;border:0;color:#374151;background:transparent;font:inherit;font-size:20px;line-height:1;cursor:pointer;}
.map-popup__close:hover,
.map-popup__close:focus {color:#111827;background:#f3f4f6;outline:none;}
.map-popup__content {max-height:350px;overflow:auto;padding:5px 5px 8px 7px;background:#ffffff;line-height:1.1;}
.map-popup-content p {margin:0 0 5px 0;line-height:normal;text-align:left;}
.map-popup-content p:last-child {margin-bottom:0;}

/* HTML внутри popup: разрешены абзацы, ссылки, списки, переносы и простые таблицы. */
.map-popup-content a {color:#2563eb;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;}
.map-popup-content a:hover,
.map-popup-content a:focus {color:#1d4ed8;}
.map-popup-content ul {margin:4px 0 7px 18px;padding:0;}
.map-popup-content li {margin:0 0 3px 0;padding:0;}
.map-popup-content table {width:65%;margin:0;border-collapse:collapse;}
.map-popup-content td {padding:0;border:none;vertical-align:top;overflow-wrap:anywhere;}
.map-popup-content tr:nth-child(even) td {background:#fff;}

/* Правая панель списка объектов */
.map-list-panel {display:flex;flex-direction:column;height:99%;background:#ffffff;}
.map-list-panel__header {flex:0 0 auto;padding:5px;margin:0 0 5px 0;border-bottom:1px solid #D8D2C6;}
.map-list-panel__title {padding:0 0 0 5px;color:#648bab;font-size:16px;}

/* Кнопка в шапке панели выглядит как ссылка и управляет всеми группами списка. */
.map-list-panel__toggle {width:100%;border:0;background:transparent;text-align:right;cursor:pointer;}
.map-list-panel__toggle:hover{color:#0a4855;outline:none;}
.map-list-panel__search {width:100%;height:28px;margin:5px 0;padding:2px 5px;border:1px solid #D8D2C6;color:#111827;background:#ffffff;box-sizing:border-box;font:inherit;font-size:14px;}
.map-list-panel__search:focus {border-color:#D8D2C6;outline:2px solid rgba(100, 139, 171, 0.24);outline-offset:0;}
.map-list-panel__status {flex:0 0 auto;padding:9px 14px;color:#64748b;font-size:12px;line-height:1.35;border-bottom:1px solid #eef2f7;}
.map-list-panel__status[hidden] {display:none;}
.map-list-panel__items {flex:1 1 auto;overflow:auto;padding:4px;}
.map-list-panel__item {display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:start;width:100%;margin:0;padding:2px 2px 2px 3px;border:0;color:#1f2937;background:transparent;text-align:left;font-size:14px;line-height:1.35;cursor:pointer;}

/* Level 1 в list-*.csv работает как заголовок группы: клик сворачивает/разворачивает level 2. */
.map-list-panel__item--group {position:relative;margin-top:5px;padding-top:5px;padding-bottom:5px;border-top:1px solid #D8D2C6;font-size:15px;color: #106475;}
.map-list-panel__item--group:first-child {margin-top:0;border-top:0;}
.map-list-panel__item--level-2,
.map-list-panel__item.p2- {padding-left:18px;font-size:14px;}

/* Маркеры списка приходят из style.css через классы p1, p2 и будущие p*. */
.map-list-panel__item::before {grid-column:1;margin-right:0;}
.map-list-panel__item__text {grid-column:2;min-width:0;}
.map-list-panel__item:hover,
.map-list-panel__item:focus {color:#0f172a;background:#f7f5f0;outline:none;}
.map-list-panel__item.is-active {color:#0f172a;background:#f7f5f0;box-shadow:inset 3px 0 0 #999185;}

/* Attribution оставляем от ArcGIS, но задаем компактный вид локально. */
#viewDiv .esri-attribution {position:absolute;bottom:0;left:0;width:auto;max-width:calc(100% - 8px);padding:0 2px;color:#4b5563;font-size:8px;line-height:1;background:rgba(255, 255, 255, 0.74);}
#viewDiv .esri-attribution__sources,
#viewDiv .esri-attribution__powered-by {display:inline;}

@media (max-width:480px) {#mapShell {flex-direction:column;}
.map-list-panel {border-top:1px solid #d1d5db;}
.map-legend{top:15px;left:35px;width:min(200px, calc(100% - 66px));}
.map-controls{gap:5px;width:auto;max-height:100%;padding:3px;}
.map-button {width:24px;height:24px;}
.map-area {width:100%;}
}