/* tool-page.css
 * Версия: 1.4
 * v1.4 (14.07.2026): цвета микрошапки заданы явно по [data-theme] (фон, бренд,
 *   крошки, H1) — редактор задаёт --text глобально через :root и «замораживал»
 *   текст полосы; теперь полоса меняется вместе с темой. Парно lbl-designer v2.10.
 * v1.3 (14.07.2026): «app-модель» — .tool-page флекс-колонка на всю высоту
 *   окна, .tool-frame заполняет остаток → инструмент помещается, панели
 *   скроллятся сами, низ виден. Тумблер темы добавлен в микрошапку (справа),
 *   как в шапке сайта. Парно lbl-designer v2.9, стр_прочая v1.38.
 * v1.2 (14.07.2026): крошки и заголовок H1 сведены в микрошапку .tool-topbar
 *   (одна строка: логотип+бренд · крошки-путь · H1). Отдельные блоки крошек и
 *   SEO-описания убраны — короче и без дубля названия. Парно стр_прочая v1.37.
 * v1.1 (14.07.2026): тяжёлая сайтовая шапка (#siteHeader) скрыта на
 *   странице-инструмента — хватает узкой микрошапки ниже; убирает дубль
 *   логотипа и громоздкость. Парно стр_прочая v1.36, lbl-designer v2.8.
 * Подсистема: САЙ. Стили страниц-инструментов (флаг _инструмент, шаблон
 * стр_прочая v1.37). Кладётся в /css2/tool-page.css (оба домена), шаблон
 * подключает её веткой {{?_инструмент}}.
 *
 * Компоновка: микрошапка одной строкой (глиф+бренд · крошки-путь · H1) →
 * фрейм инструмента во всю ширину контентной зоны. Инструмент
 * встраивается 1С-препаратором в #tool-root
 * (ДанныеПоПрочейСтранице v1.28), его стили заскоуплены — здесь оформляем
 * только обёртку.
 *
 * Тёмная тема: как остальной сайт, через [data-theme="dark"] на html и
 * переменные (--bg, --surface, --text, --text2, --border). Глиф —
 * та же маска, что в шапке сайта (--logo-mask из all_HEADER.css).
 */

/* ── Страница-инструмент: убрать тяжёлую сайтовую шапку ──
   Инструменту хватает узкой микрошапки ниже. Сайтовая шапка (утилити-бар +
   логотип + поиск + корзина) дублировала бы логотип и занимала бы много
   места. :has срабатывает только на страницах с микрошапкой. */
body:has(.tool-topbar) #siteHeader { display: none; }

/* ── Раскладка: редактор во весь экран ──────────────────
   .tool-page — колонка на всю высоту окна: узкая полоса сверху (фикс),
   фрейм инструмента заполняет остаток. Инструмент внутри (#app) сам
   скроллит свои панели, нижний предпросмотр всегда виден. Подвал сайта —
   ниже .tool-page, доступен прокруткой страницы. */
.tool-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Микрошапка ────────────────────────────────────────── */

.tool-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  min-height: 52px;
  flex-shrink: 0;
  padding: 8px clamp(12px, 3vw, 28px);
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  background: #ffffff;
}

.tool-topbar__home {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.tool-topbar__glyph {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: #1c3f8f;
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
}

[data-theme="dark"] .tool-topbar__glyph {
  background-color: #ffffff;
}

.tool-topbar__brand {
  font-family: "Onest", Arial, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: #1a1a1a;
  white-space: nowrap;
}

/* ── Разделитель в микрошапке ──────────────────────────── */

.tool-topbar__div {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: rgba(128, 128, 128, 0.28);
  flex-shrink: 0;
}

/* ── Крошки-путь (внутри микрошапки) ───────────────────── */

.tool-crumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #1a1a1a;
}

.tool-crumbs__link {
  color: inherit;
  opacity: 0.6;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.tool-crumbs__link:hover {
  opacity: 1;
  color: #2a7af0;
}

.tool-crumbs__sep {
  opacity: 0.35;
  user-select: none;
}

/* ── Заголовок страницы (H1) в микрошапке ──────────────── */

.tool-topbar__title {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
}

/* ── Тумблер темы в микрошапке (справа) ─────────────────── */

.tool-topbar__theme {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tool-topbar__theme:hover {
  color: #2a7af0;
  border-color: #2a7af0;
}

[data-theme="dark"] .tool-topbar__theme {
  color: #a1a1aa;
}

[data-theme="dark"] .tool-topbar__theme:hover {
  color: #5e9aff;
  border-color: #5e9aff;
}

/* ── Фрейм инструмента (во всю ширину) ─────────────────── */

.tool-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Контейнер, который создаёт препаратор (#tool-root) — на всю ширину,
   без внешних отступов: инструмент сам управляет своей внутренней
   раскладкой. */
.tool-frame > .tool-root,
.tool-frame > #tool-root {
  width: 100%;
  height: 100%;
}

/* ── Тёмная тема обёртки ───────────────────────────────── */

[data-theme="dark"] .tool-topbar {
  background: #1a1b1e;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .tool-topbar__brand {
  color: #e8e8ea;
}

[data-theme="dark"] .tool-crumbs {
  color: #d4d4d8;
}

[data-theme="dark"] .tool-topbar__title {
  color: #e8e8ea;
}

[data-theme="dark"] .tool-crumbs__link:hover,
[data-theme="dark"] .tool-topbar__home:hover .tool-topbar__brand {
  color: #5e9aff;
}

/* ── Адаптив ───────────────────────────────────────────── */

@media (max-width: 480px) {
  .tool-topbar {
    gap: 2px 10px;
    padding: 7px clamp(12px, 3vw, 28px);
  }

  .tool-topbar__brand {
    font-size: 14px;
  }

  .tool-topbar__title {
    font-size: 15px;
  }
}