/*
 * Генератор UTM-меток, вариант «А. Форма и живая ссылка»: форма слева, ссылка справа собирается на лету
 * и раскрашена по меткам. Вид — из макета, классы и токены — темы: поля .field и .field-row, шаблоны —
 * .chips с радиокнопками, кнопки .btn, скрытый текст .visually-hidden. Своё — с префиксом sst-utm-.
 * Раскладка — по ширине блока (контейнерные запросы, контейнер sst-tool в assets/tools.css), а не экрана:
 * в правой колонке раздела «Инструменты» (вариант Б, около 760–900 px) форма и ссылка остаются рядом,
 * а поля формы встают по одному. Уже 680 px внутри рамки — одна колонка, ссылка под формой.
 * На экране до 640 px поля по одному и по правилу .field-row темы. С 320 px без прокрутки вбок.
 */

.sst-utm {
  --sst-c-src: var(--flow-light, #8eabff);
  --sst-c-med: #c9a6ff;
  --sst-c-cmp: #ffb37a;
  --sst-c-cnt: #6fe0b7;
  --sst-c-trm: #ff8cc6;
  --sst-c-own: #ffd166;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px clamp(18px, 3vw, 32px);
  align-items: start;
}

.sst-utm-form {
  display: grid;
  gap: 16px;
  min-width: 0;
  container: sst-utm-form / inline-size;
}

.sst-utm .field,
.sst-utm .field-row {
  min-width: 0;
}

.sst-utm .field label code {
  margin-left: 4px;
  font: 400 12px/1 var(--sst-mono);
  color: var(--fg-dim);
}

.sst-utm .field input {
  min-width: 0;
}

/* Радиокнопка шаблона остаётся внутри своей подписи: фокус не уводит прокрутку к краю блока. */
.sst-utm .chips label {
  position: relative;
}

.sst-utm .hint {
  font-size: var(--step--1, 0.875rem);
  color: var(--fg-dim);
}

.sst-utm-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sst-utm-mac-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sst-utm-mac {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px dashed var(--sst-line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--flow-ink, #2f5be0);
  font: 12.5px/1 var(--sst-mono);
  cursor: pointer;
}

.sst-utm-mac:hover {
  border-style: solid;
}

.sst-utm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--fg-soft);
  cursor: pointer;
}

.sst-utm-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--ink, #121a2b);
}

.sst-utm-out {
  position: sticky;
  top: calc(var(--header-h, 72px) + 16px);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sst-utm-title {
  margin: 0;
  font: 700 15px/1.2 var(--font-display, inherit);
}

.sst-utm-url {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--night, #0b1324);
  color: #dfe6f7;
  font: 14px/1.6 var(--sst-mono);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.sst-utm-url .b { color: #9fb0d4; }
.sst-utm-url .k { opacity: 0.75; }
.sst-utm-url .s { color: var(--sst-c-src); }
.sst-utm-url .m { color: var(--sst-c-med); }
.sst-utm-url .c { color: var(--sst-c-cmp); }
.sst-utm-url .t { color: var(--sst-c-cnt); }
.sst-utm-url .r { color: var(--sst-c-trm); }
.sst-utm-url .x { color: var(--sst-c-own); }

.sst-utm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.sst-utm-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 3px;
}

.sst-utm-legend i.s { background: var(--sst-c-src); }
.sst-utm-legend i.m { background: var(--sst-c-med); }
.sst-utm-legend i.c { background: var(--sst-c-cmp); }
.sst-utm-legend i.t { background: var(--sst-c-cnt); }
.sst-utm-legend i.r { background: var(--sst-c-trm); }

.sst-utm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--fg-dim);
}

.sst-utm-warn {
  display: grid;
  gap: 6px;
}

.sst-utm-warn p {
  max-width: none;
  margin: 0;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Светлые оттенки --leak, --flow и --ok темы: яркие цвета темы рассчитаны на тёмный фон. */
.sst-utm-warn .is-bad { background: #fde9e7; color: #9c2a1f; }
.sst-utm-warn .is-info { background: #e8eeff; color: #233f9e; }
.sst-utm-warn .is-good { background: #e2f6ee; color: #11684a; }

.sst-utm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sst-utm-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: #11684a;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out, ease);
}

.sst-utm-status.is-on {
  opacity: 1;
}

.sst-utm-nojs {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--fg-soft);
}

/* Форма меньше 460 px: в две колонки подписи переносятся по-разному и поля встают вразнобой — ставим по одному. */
@container sst-utm-form (max-width: 460px) {
  .sst-utm .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container sst-tool (max-width: 680px) {
  .sst-utm {
    grid-template-columns: minmax(0, 1fr);
  }

  .sst-utm-out {
    position: static;
  }
}

/* Браузеры без контейнерных запросов (до Safari 16, Chrome 105): по ширине экрана, как в макете. */
@supports not (container-type: inline-size) {
  @media (max-width: 880px) {
    .sst-utm {
      grid-template-columns: minmax(0, 1fr);
    }

    .sst-utm-out {
      position: static;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sst-utm *,
  .sst-utm *::before,
  .sst-utm *::after {
    transition: none !important;
  }

  .sst-utm .btn:hover {
    transform: none;
  }
}