/* MAGISTRAL · оболочка продукта (паттерн «Карта + панель», docs/DESIGN-KIT.md §5).
 * Шапка, карта-фон, плавающая панель / нижний лист, карточка ошибки, флаг «бета». */

html, body { min-block-size: 100%; }
#map { position: fixed; inset: 0; z-index: 0; }

/* ── шапка ─────────────────────────────────────────────────────────── */
.top {
  position: fixed; z-index: 20; inset-block-start: 0; inset-inline: 0;
  display: flex; align-items: center; gap: var(--s2);
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top .glass { border: 1px solid var(--line); box-shadow: var(--shadow); }
.top .brand { padding: 6px 14px 6px 8px; border-radius: var(--r-pill); }
.top .actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.top .who { max-inline-size: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top form { display: contents; }
.beta { font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--warn);
        padding: 4px 7px; border-radius: var(--r-pill); border: 1px dashed var(--warn); margin-inline-start: 6px; align-self: center; }
@media (max-width: 599px) {
  /* На телефоне в шапке только знаки: роза, подложка, тема, вход — всё по 44 px. */
  .top { gap: 6px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .top .brand { padding: 4px; }
  .top .brand span, .top .brand .beta { display: none; }
  .top .actions { gap: 6px; }
  #auth span { display: none; }
  #auth { inline-size: var(--tap); padding: 0; }
  .top .logout { display: none; }
}

/* ── панель поверх карты ───────────────────────────────────────────── */
.panel {
  position: relative; z-index: 5; display: grid; gap: var(--s5); align-content: start; grid-auto-rows: max-content;
  padding: var(--s5);
}
@media (min-width: 960px) {
  .panel {
    position: fixed; inset-block: 76px 16px; inset-inline-start: 16px; inline-size: var(--panel-w, 440px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-l);
  }
  .panel::-webkit-scrollbar { display: none; }
}
@media (max-width: 959px) {
  /* Лист поднимается обычным скроллом страницы; карта остаётся фоном сверху. */
  .panel {
    margin-block-start: var(--sheet-top, 44dvh); min-block-size: 56dvh;
    border-radius: var(--r-l) var(--r-l) 0 0; border-top: 1px solid var(--line);
    box-shadow: 0 -12px 40px rgb(0 0 0 / .2);
    padding-block-end: calc(var(--s6) + env(safe-area-inset-bottom));
  }
  .panel::before { content: ""; justify-self: center; inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--line); margin-block: -8px -4px; }
}

/* ── карточка ошибки поверх карты ──────────────────────────────────── */
main.err {
  position: fixed; z-index: 15; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%;
  inline-size: min(520px, calc(100vw - 32px));
  display: grid; gap: var(--s3); justify-items: start; padding: var(--s5);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-l);
}
main.err h1 { font-size: var(--fs-2); }

/* Яндекс: служебные надписи не перекрывают наши слои. */
.mq-ya [class*="copyrights"] { z-index: 1 !important; }