/*
 * Seosite: инструменты — общая рамка инструмента и заглушка выключенного.
 * Подключается только на страницах с блоком «Инструмент сайта». Цвета — токены темы (site.css):
 * --paper, --ink, --flow, --signal, --night…, у каждого запасное значение на случай другой темы.
 * Инструмент — светлая карточка в любой зоне страницы: переменные зоны (--bg, --surface, --fg, --line)
 * задаются здесь же, поэтому поля .field и кнопки .btn темы внутри выглядят как в светлой зоне.
 */

.sst-tool {
  --bg: var(--paper, #f3f5f9);
  --surface: var(--paper-2, #fff);
  --surface-2: var(--paper-3, #e9edf4);
  --fg: var(--ink, #121a2b);
  --fg-soft: var(--ink-soft, #4a5470);
  --fg-dim: #5d6783;
  --line: var(--paper-line, #dbe1ec);
  --link: var(--flow-ink, #2f5be0);
  --sst-line-strong: #c6d1ea;
  --sst-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 28px);
  padding: clamp(16px, 2.5vw, 28px);
  font-family: var(--font-text, inherit);
  min-width: 0;
  /* Раскладка инструмента зависит от ширины блока, а не экрана: в разделе «Инструменты» (вариант Б)
     инструмент стоит в правой колонке рядом с панелью, на 1280–1440 px это около 760–900 px. */
  container: sst-tool / inline-size;
}

.sst-tool [hidden] {
  display: none !important;
}

.sst-tool--off {
  padding-block: clamp(14px, 2vw, 20px);
}

.sst-tool-off {
  margin: 0;
  color: var(--fg-soft);
  font-weight: 600;
}