/*
 * RU: Стили раздела «Сайт-визитка» (БП2, подписка для бизнеса) нового кабинета /biz/app/. Правила — внутри body.bt-page и на
 *     токенах сайта (--k-*), без литералов цвета (храповик check:theme). Файл свой у каждой фазы — потоки не правят один файл.
 *     Раскладка: редактор слева, предпросмотр справа и липкий; уже 1100 px — одна колонка, предпросмотр под редактором.
 * EN: Styles of the "Сайт-визитка" section (БП2, business subscription) of the new /biz/app/ cabinet. Rules sit inside
 *     body.bt-page and use site tokens (--k-*), no colour literals (the check:theme ratchet). One file per phase. Layout: the
 *     editor left, a sticky preview right; below 1100 px one column with the preview under the editor.
 */

/* RU: Атрибут hidden сильнее display полей (.fld — grid): иначе скрытое поле ссылки оставалось бы видно (память «hidden проигрывает display»). EN: hidden beats the fields' display (.fld is grid): otherwise the hidden link field would stay visible. */
body.bt-page .st [hidden] {
  display: none !important;
}

/* RU: Экран — столбик карточек с отступом под липкую панель сохранения. EN: The screen is a stack of cards with room for the sticky save bar. */
body.bt-page .st {
  display: grid;
  gap: var(--k-s-4);
  padding-bottom: var(--k-s-8);
}

/* RU: Адреса визитки: подпись, ссылка, кнопка копирования. EN: The mini-site addresses: caption, link, copy button. */
body.bt-page .st-urls {
  display: grid;
  gap: var(--k-s-2);
}

/* RU: Строка адреса; длинная ссылка переносится, а не выталкивает кнопку. EN: An address row; a long link wraps rather than pushing the button out. */
body.bt-page .st-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2);
}

/* RU: Ссылка адреса. EN: The address link. */
body.bt-page .st-url a {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--k-brand-ink);
  font-weight: 600;
}

/* RU: Редактор и предпросмотр. EN: The editor and the preview. */
body.bt-page .st-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: var(--k-s-4);
  align-items: start;
}

/* RU: Колонка редактора. EN: The editor column. */
body.bt-page .st-main {
  display: grid;
  gap: var(--k-s-4);
  min-width: 0;
}

/* RU: Предпросмотр липнет к верху при прокрутке длинного редактора. EN: The preview sticks to the top while the long editor scrolls. */
body.bt-page .st-side {
  position: sticky;
  top: 72px;
  min-width: 0;
}

/* RU: Список разделов. EN: The section list. */
body.bt-page .st-secs {
  display: grid;
  gap: var(--k-s-1);
  margin: var(--k-s-2) 0 0;
  padding: 0;
}

/* RU: Строка раздела: галочка с подписью и стрелки порядка. EN: A section row: a labelled tick and order arrows. */
body.bt-page .st-sec {
  display: flex;
  align-items: center;
  gap: var(--k-s-2);
  padding: var(--k-s-2);
  border: 1px solid var(--k-border-soft);
  border-radius: var(--k-r-2);
  background: var(--k-surface);
}

/* RU: Подпись раздела занимает всё место. EN: The section label takes the space. */
body.bt-page .st-sec-l {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--k-s-2);
  cursor: pointer;
}

/* RU: Название и пояснение раздела в две строки. EN: The section name and hint on two lines. */
body.bt-page .st-sec-l > span {
  display: grid;
}

/* RU: Стрелки порядка. EN: The order arrows. */
body.bt-page .st-sec-a {
  display: flex;
  gap: var(--k-s-1);
}

/* RU: Палитры плитками. EN: Palettes as tiles. */
body.bt-page .st-pal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-2);
}

/* RU: Плитка палитры: радиокнопка, образец цвета, название. EN: A palette tile: a radio, a colour sample, a name. */
body.bt-page .st-sw {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-2);
  min-height: 40px;
  padding: 0 var(--k-s-3);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-pill);
  cursor: pointer;
  font-weight: 600;
}

/* RU: Выбранная палитра обведена фирменным цветом. EN: The chosen palette is outlined in the brand colour. */
body.bt-page .st-sw:has(input:checked) {
  border-color: var(--k-brand);
  box-shadow: 0 0 0 1px var(--k-brand);
}

/* RU: Образец цвета: значение приходит из theme.js (swatch) переменной --st-sw в атрибуте style. EN: The colour sample: the value comes from theme.js (swatch) as the --st-sw variable in the style attribute. */
body.bt-page .st-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--k-r-pill);
  background: var(--st-sw, var(--k-brand));
}

/* RU: Свой раздел в редакторе. EN: A custom section in the editor. */
body.bt-page .st-block {
  display: grid;
  gap: var(--k-s-2);
  padding: var(--k-s-3);
  border: 1px solid var(--k-border-soft);
  border-radius: var(--k-r-2);
}

/* RU: Рамка предпросмотра: фрейм рисуется в настоящей ширине и уменьшается масштабом (--st-scale задаёт site.js). EN: The preview box: the frame renders at its real width and is scaled down (site.js sets --st-scale). */
body.bt-page .st-frame {
  position: relative;
  overflow: hidden;
  height: 760px;
  margin-top: var(--k-s-2);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-3);
  background: var(--k-bg);
}

/* RU: Сам фрейм: высота с запасом под масштаб, начало масштаба — левый верхний угол. EN: The frame itself: height with room for the scale, scaled from the top-left corner. */
body.bt-page .st-frame iframe {
  display: block;
  width: 390px;
  height: 760px;
  border: 0;
  transform: scale(var(--st-scale, 1));
  transform-origin: 0 0;
  background: var(--k-bg);
}

/* RU: Компьютер: выше, чтобы уменьшенная страница показывала больше. EN: Desktop: taller so the scaled page shows more. */
body.bt-page .st-frame.is-desk iframe {
  height: 900px;
}

/* RU: Панель сохранения прилипает к низу экрана: кнопка «Сохранить» видна с любого места длинного редактора. EN: The save bar sticks to the bottom: "Save" is visible from anywhere in the long editor. */
body.bt-page .st-bar {
  position: sticky;
  bottom: var(--k-s-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2);
  padding: var(--k-s-3) var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-3);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-2);
}

/* RU: Уже 1100 px — одна колонка: предпросмотр под редактором и без липкости. EN: Below 1100 px — one column: the preview under the editor, not sticky. */
@media (max-width: 1100px) {
  body.bt-page .st-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.bt-page .st-side {
    position: static;
  }
}