/* Панель «Как сравнить» (лупа, шторка, две карты, проявление, эпохи) — общая для страниц с картой. Цвета и шрифты — токены. */
/* сравнение «было / стало»: вторая карта только с историческим планом (#cmp-map) поверх или рядом с основной */
#cmp-map { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#cmp-map.side { border-right: 2px solid var(--color-plan); border-bottom: 2px solid var(--color-plan); box-sizing: border-box; }
#lens-ring { position: absolute; z-index: 1; border: 2px solid var(--color-plan); border-radius: 50%; pointer-events: none; box-sizing: border-box; }
#lens-wrap { position: absolute; z-index: 1; border-radius: 50%; overflow: hidden; pointer-events: none; isolation: isolate; }
#lens-wrap #cmp-map { position: absolute; }
/* развёрнутая панель — узкая полоска внизу карты в одну строку */
#cmp-panel { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: var(--space-1);
             flex-wrap: nowrap; white-space: nowrap; max-width: calc(100% - 2 * var(--space-2)); box-sizing: border-box;
             background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 3px var(--space-1);
             box-shadow: 0 2px 10px rgba(0,0,0,.1); font: var(--text-s) var(--font-sans); overflow-x: auto; scrollbar-width: thin; }
#cmp-panel [hidden], #cmp-panel[hidden] { display: none !important; }
#cmp-panel button, #cmp-open { font: inherit; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius); cursor: pointer; }
#cmp-panel svg, #cmp-open svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp-modes { display: flex; gap: 2px; flex: none; }
.cmp-modes button { width: 32px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; }
.cmp-modes button[aria-checked=true] { border-color: var(--color-plan); color: var(--color-plan); box-shadow: inset 0 0 0 1px var(--color-plan); }
#cmp-layers { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
#cmp-layers select { font: inherit; max-width: 150px; min-width: 70px; height: 30px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); text-overflow: ellipsis; }
#cmp-swap { height: 30px; padding: 0 6px; flex: none; }
#cmp-panel input[type=range] { accent-color: var(--color-plan); width: 100px; flex: none; margin: 0 var(--space-1); }
#ctl-epochs { display: flex; gap: 2px; }
#ctl-epochs button { height: 30px; padding: 0 8px; }
#ctl-epochs button[aria-pressed=true] { border-color: var(--color-plan); color: var(--color-paper); background: var(--color-plan); }
#cmp-close { height: 30px; padding: 0 10px 0 6px; display: flex; align-items: center; justify-content: center; gap: 4px; flex: none; margin-left: 2px; font-weight: 600; }
/* «×» на краю лупы (телефон): круглая, крупная, поверх кольца; щелчок по ней не двигает лупу */
#lens-x { position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border-radius: 50%; cursor: pointer;
          display: flex; align-items: center; justify-content: center; background: var(--color-paper); color: var(--color-plan);
          border: 2px solid var(--color-plan); box-shadow: 0 1px 6px rgba(0,0,0,.25); touch-action: manipulation; }
#lens-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#lens-x:hover { background: var(--color-plan); color: var(--color-paper); }
#lens-x[hidden] { display: none; }
#cmp-panel button:hover, #cmp-open:hover { border-color: var(--color-plan); color: var(--color-plan); }
/* ручка для перетаскивания панели (слева): тянуть мышью или пальцем, двойной щелчок — место по умолчанию */
#cmp-grip { flex: none; align-self: stretch; width: 14px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; }
#cmp-grip span { width: 4px; height: 18px; border-left: 2px dotted var(--color-muted); border-right: 2px dotted var(--color-muted); }
#cmp-grip:hover span { border-color: var(--color-plan); }
#cmp-panel.dragging { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
#cmp-panel.dragging #cmp-grip { cursor: grabbing; }
/* свёрнутая панель — кнопка «Как было · год» в левом нижнем углу карты */
/* свёрнутая панель — крупная кнопка «Сравнить со старым планом» (10.11.2026): заметна на светлой карте */
#cmp-open { position: absolute; left: var(--space-3); bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,.2); font-family: var(--font-sans); font-size: var(--text-m); font-weight: 600;
            color: var(--color-paper) !important; background: var(--color-plan) !important; border-color: var(--color-plan) !important; }
#cmp-open:hover { filter: brightness(1.1); }
#cmp-open svg { width: 22px; height: 22px; stroke-width: 2; }
#cmp-open[hidden] { display: none; }

@media (max-width: 699px) {
  /* та же полоска во всю ширину, одна строка (около 40 px — ниже 1/5 экрана); не помещается — прокрутка вбок */
  /* на телефоне — та же полоска во всю ширину; не помещается в строку — два ряда (около 80 px, ниже 1/5 экрана) */
  #cmp-panel { left: var(--space-2); right: var(--space-2); transform: none; max-width: none; max-height: 20vh; bottom: 28px;
               flex-wrap: wrap; justify-content: center; row-gap: 4px; overflow-x: hidden; }
  #cmp-layers { flex: none; }
  #cmp-layers select { max-width: 120px; }
  #cmp-panel input[type=range] { width: 90px; }
  /* первый ряд — значки, ползунок, «свернуть»; второй — слои */
  #cmp-grip { order: 0; align-self: center; height: 40px; } .cmp-modes { order: 1; } #cmp-panel .cmp-ctl { order: 2; } #cmp-close { order: 3; } #cmp-layers { order: 4; }
  /* под палец: кнопки и выборы — 40 px */
  .cmp-modes button { width: 40px; height: 40px; } #cmp-close { height: 40px; padding: 0 8px; } #cmp-close span { display: none; } #cmp-swap { height: 40px; padding: 0 10px; }
  #cmp-layers select { height: 40px; } #ctl-epochs button { height: 40px; }
  #cmp-open { left: var(--space-2); }
}
/* шторка (10.11.2026): линия и ручка поверх всех слоёв карты; захват — полоса 44 px вдоль линии и круг 44 px */
#swipe-bar { position: absolute; top: 0; bottom: 0; width: 0; z-index: 4; border-left: 2px solid var(--color-plan); touch-action: none; cursor: ew-resize; }
#swipe-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: -22px; width: 44px; }
#swipe-bar[hidden] { display: none; }
#swipe-bar span { position: absolute; top: 50%; left: -23px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; box-sizing: border-box;
                  background: var(--color-paper); border: 2px solid var(--color-plan); cursor: ew-resize; touch-action: none; user-select: none;
                  color: var(--color-plan); font: bold 18px/40px var(--font-sans); text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
#swipe-bar.dragging span, #swipe-bar span:hover { background: var(--color-plan); color: var(--color-paper); }
#cmp-swap { font: inherit; font-size: 12px; margin: 2px 0 4px; border: 1px solid var(--color-line); background: var(--color-paper); border-radius: var(--radius); padding: 2px 10px; cursor: pointer; color: var(--color-ink); }
#cmp-swap:hover { border-color: var(--color-plan); color: var(--color-plan); }
/* приглашение в клуб за границей открытого гостям куска клубного слоя (план Хотева: Кремль и Китай-город) */
#cmp-invite { position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 2 * var(--space-8) - 40px);
              background: color-mix(in srgb, var(--color-paper) 92%, transparent); border: 1px solid var(--color-line); border-radius: var(--radius);
              padding: var(--space-1) var(--space-3); font: var(--text-s)/1.4 var(--font-serif); color: var(--color-muted); text-align: center;
              box-shadow: 0 1px 6px rgba(0,0,0,.08); }
#cmp-invite a { color: var(--color-plan); }
#cmp-invite[hidden] { display: none; }
@media (max-width: 699px) {
  #cmp-invite { top: 52px; left: var(--space-2); right: var(--space-2); transform: none; max-width: none; font-size: 12px; padding: 3px var(--space-2); }   /* правее кнопок «+ / −» */
}

/* ночь 14.11: на телефоне панель сравнения — одна строка (режимы, ползунок, «×»); выбор слоёв — лентой годов над панелью */
@media (max-width: 699px) {
  #cmp-panel { flex-wrap: nowrap; max-height: none; }
  #cmp-layers { display: none !important; }
}