/* ноутбук: мини-карта съедала место у редактора шага (на 1024px ему оставалось ~165px) */
@media (max-width: 1360px) {
  .wrap.with-map { grid-template-columns: 325px 1fr; }
  .wrap.with-map #miniMap { display: none; }
}
/* планшет: двухколоночные раскладки (сигналы/тексты/пользователи) схлопываются */
@media (max-width: 900px) {
  .u-grid2, .u-grid2.links { grid-template-columns: 1fr; }
  .wrap, .wrap.with-map, .wrap.only-editor { grid-template-columns: 1fr; }
  #miniMap { display: none; }
}
/* ---- мобильное меню (выезжающий сайдбар) ---- */
#burger { display: none; background: transparent; border: none; color: var(--text);
  padding: 6px; border-radius: 8px; }
#sideBackdrop { display: none; position: fixed; inset: 0; background: var(--scrim);
  z-index: 118; }
@media (max-width: 820px) {
  #main { grid-template-columns: 1fr !important; }
  #burger { display: inline-flex; }
  #side { position: fixed; top: 0; left: 0; height: 100dvh; width: 250px; z-index: 120;
    transform: translateX(-102%); transition: transform .22s ease; overflow-y: auto; }
  #main.side-open #side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  #main.side-open #sideBackdrop { display: block; }
  /* шапка сплошная, как нижняя панель: вкладки не наезжают на прокрученный текст */
  #topbar { padding: 14px 16px 8px; position: sticky; top: 0; z-index: 40;
    background: var(--glass-strong); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--glass-border); }
  #topbar h1 { font-size: 17px; }
  #topbar { flex-wrap: wrap; }
  .title-box { max-width: none; flex: 1; }
  .sec-tabs { order: 3; width: 100%; margin: 6px 0 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sec-tabs button { flex: none; min-height: 40px; }
  .cmdk-btn span, .cmdk-btn kbd { display: none; }
  .cmdk-btn { min-width: 40px; min-height: 40px; justify-content: center; padding: 0; }
  .bottom-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--glass-strong); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid var(--glass-border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .bottom-bar button { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 4px 2px; background: transparent;
    border: 0; color: var(--text-faint); font-size: 11px; font-weight: 600; border-radius: 12px; }
  .bottom-bar button svg { width: 20px; height: 20px; }
  .bottom-bar button.on { color: var(--accent); }
  #content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wrap { padding: 14px 16px 20px; }
  .u-head { flex-wrap: wrap; }
  .cards { grid-template-columns: 1fr 1fr; }
  /* цифры по две в ряд, иконка над подписью — как на «Обзоре» */
  .dstat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  /* components.css грузится позже — поэтому селектор с родителем */
  .dstat-grid > .dstat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .dstat-grid .dstat-ico { width: 30px; height: 30px; }
  /* таблицы-строки на узком: даём горизонтальную прокрутку контейнеру */
  .u-row { min-width: 520px; }
  .u-card { overflow-x: auto; }
}
/* узкий телефон: цифры остаются по две в ряд, иконка над подписью */
@media (max-width: 430px) {
  .cards { gap: 10px; }
  .card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .card .cico { width: 30px; height: 30px; }
  .card .cval { font-size: 19px; flex-wrap: wrap; row-gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { #side { transition: none; } }
/* телефон: все кнопки под палец (≥40px), кроме панели форматирования текста, карты и макетов Telegram */
@media (max-width: 820px) and (pointer: coarse) {
  #burger { min-width: 40px; min-height: 40px; }
  #content button:not(.rt-bar *):not(.map-area *):not(.tg-preview *):not(.step-card .arrows *) { min-height: 40px; }
  #content button.icon:not(.rt-bar *):not(.map-area *) { min-width: 40px; }
  /* стрелки порядка шагов: две друг над другом, каждая крупнее */
  .step-card .arrows { gap: 4px; }
  .step-card .arrows button { min-width: 36px; min-height: 30px; }
}