/* ============================================================================
   Вкладка «Формы» — ручная очередь форм (templates/forms.html).

   Слева очередь, справа задача по шагам. Всё на токенах: своих цветов нет.
   Список липнет к экрану, пока сотрудник листает длинную задачу, — чтобы
   следующий сайт всегда был под рукой.
   ============================================================================ */

.fq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-4);
}
.fq-today { display: flex; gap: var(--space-6); font-size: var(--text-sm); color: var(--fg-muted); }
.fq-today b {
  display: block;
  color: var(--fg);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}
.fq-done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--ok-fg);
  font-size: var(--text-sm);
}

.fq-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.fq-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.fq-chip:hover { background: var(--bg-hover); color: var(--fg); }
.fq-chip span { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.fq-chip[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg); }
.fq-chip[aria-current="page"] span { color: inherit; }

.fq-board {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-8);
}

/* ------------------------------------------------------------------ очередь */
.fq-list {
  position: sticky;
  top: calc(var(--shell-header) + var(--space-4));
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.fq-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - var(--shell-header) - 160px);
  overflow-y: auto;
}
.fq-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.fq-item:hover { background: var(--bg-hover); color: var(--fg); }
.fq-item[aria-current="true"] { background: var(--accent-soft); }
.fq-item[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.fq-item__domain { font-size: var(--text-sm); font-weight: var(--weight-semi); overflow-wrap: anywhere; }
.fq-item__age { color: var(--fg-muted); font-size: var(--text-xs); white-space: nowrap; }
.fq-item__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ------------------------------------------------------------------- задача */
.fq-task { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.fq-task__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-7) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.fq-task__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}
.fq-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-xs);
}
.fq-task__meta b { color: var(--fg-soft); font-weight: var(--weight-semi); }
.fq-task__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.fq-step {
  display: grid;
  align-items: start;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--line);
}
.fq-notes { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-7) 0; }
.fq-note {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--fg-soft);
  font-size: var(--text-sm);
}
.fq-note .icon { color: var(--fg-muted); transform: translateY(2px); }
.fq-note--bad { color: var(--danger-fg); }
.fq-note--bad .icon { color: var(--danger); }
.fq-step__n {
  margin-top: 4px; /* по центру кнопки высотой 36px */
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
}
.fq-step__body { display: grid; gap: var(--space-3); min-width: 0; align-content: center; min-height: 28px; }
.fq-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.fq-row--tight { gap: var(--space-2); }
.fq-small { font-size: var(--text-sm); }
.fq-text { color: var(--fg-soft); font-size: var(--text-sm); max-width: 80ch; }
.fq-url { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }

.fq-fields { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fq-field {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--motion-base) var(--ease-out);
}
.fq-field:last-child { border-bottom: 0; }
.fq-field.is-next { background: var(--accent-soft); }
.fq-field__cap { color: var(--fg-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.fq-field__val { color: var(--fg); overflow-wrap: anywhere; }
.fq-field__val--msg {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
}
.fq-field__act { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--fg-soft); font-size: var(--text-sm); }
.fq-field__act--own { color: var(--warn-fg); }
.fq-field__skip { color: var(--fg-muted); font-size: var(--text-sm); }
.fq-tick { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--fg-muted); border-radius: 4px; }
.fq-copy { gap: var(--space-2); }
.fq-copy.is-copied { color: var(--ok-fg); border-color: var(--ok); }

.fq-fail { position: relative; }
.fq-fail > summary { list-style: none; }
.fq-fail > summary::-webkit-details-marker { display: none; }
.fq-fail[open] > summary { background: var(--bg-active); }
.fq-fail__form {
  display: grid;
  gap: var(--space-3);
  width: min(560px, calc(100vw - var(--space-8)));
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.fq-fail__note { min-height: 56px; resize: vertical; }


@media (max-width: 900px) {
  .fq-board { grid-template-columns: 1fr; }
  .fq-list { position: static; }
  .fq-list__items { max-height: 260px; }
}
@media (max-width: 600px) {
  .fq-step { grid-template-columns: 1fr; padding: var(--space-5); }
  .fq-step__n { display: none; }
  .fq-task__top { padding: var(--space-5); }
  .fq-field { grid-template-columns: 1fr auto; }
  .fq-field__cap { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-field { transition: none; }
}

/* ------------------------------------------- карточка лида: вкладка «Форма»
   Строка статуса над текстом: заголовок, детали, адрес формы справа. */
.composer__to--form b { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.composer__to--form .spinner { width: 12px; height: 12px; }
.composer__to-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.composer__to-link:hover { color: var(--accent-fg); }

/* ------------------------------------------ список лидов: пачка через форму */
.fbulk__groups { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.fbulk__groups li { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--text-sm); }
.fbulk__groups em { font-style: normal; color: var(--fg-muted); }
.fbulk__n {
  min-width: 28px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  color: var(--fg-muted);
}
.fbulk__n--ok { color: var(--ok-fg); }
.fbulk__n--warn { color: var(--warn-fg); }