/* Оболочка полноэкранного режима инструмента (/<lang>/tools/<tool>/full/).
   Минимум навигации сайта: знак и слово сайта, тема, вход и кнопка «На сайт».
   Всё остальное — рабочее пространство самого инструмента (assets/astro), у него своя разметка.
   Подключается после site.css.

   18.09.2026: вместе с демо-инструментами отсюда ушли демо-набор карт, веб-чат, боковые колонки и
   переключатель режимов — в полный экран открывается только то, что считает по-настоящему. */

body.is-app { background: var(--bg); overflow-x: hidden; }
.app { min-height: 100dvh; display: grid; grid-template-rows: 60px minmax(0, 1fr); max-width: 100%; }
.app-bar { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.app-bar__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.app-bar__brand .brand__mark { height: 28px; }
.app-bar__brand .brand__word { height: 13px; }
.app-bar__sep { width: 1px; height: 28px; background: var(--line-2); flex: none; }
.app-bar__title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--ff-display); font-weight: 700; font-size: 1.125rem; color: var(--ink); white-space: nowrap; }
.app-bar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-bar__title .badge { flex: none; }
.app-bar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.app-bar .back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--pill); background: var(--brand-50); color: var(--brand-dark); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.app-bar .back svg { width: 16px; height: 16px; }
.app-bar .back:hover { background: var(--brand-100); }
.app-bar .lang__btn, .app-bar .icon-btn { height: 36px; width: auto; min-width: 36px; }
.app-bar .icon-btn { width: 36px; }
.app-bar .avatar { width: 36px; height: 36px; }

.app-bar__title svg { width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .app-bar__title small { display: none; }
  .app-bar .theme__menu { right: auto; left: 0; }
}
@media (max-width: 639px) {
  .app-bar { padding: 0 12px; gap: 8px; }
  .app-bar__brand .brand__word, .app-bar .back span { display: none; }
  .app-bar .lang__btn { padding: 0 10px; }
  .app-bar .lang__btn svg:last-child { display: none; }
  .app-bar .back { padding: 0 10px; }
}