/**
 * Вкладка «Фарм»: подвкладки, настройки, шаблоны комментариев.
 * Тайтлы и очереди глав — в css/titles.css рядом с js/farm-titles.js.
 *
 * Настройки описываются данными в js/farm.js, поэтому здесь стили не на
 * конкретные поля, а на строку настройки .ctl — сколько бы их ни стало.
 */

/* ── Подвкладки ───────────────────────────────────────────────────────── */
/* Второй уровень навигации нарочно другой: не фиолетовая подсветка, а
   приподнятый сегмент. Фиолетовый в панели значит «ты на этой вкладке»,
   и два таких ряда подряд спорили бы друг с другом. */

.subtabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--s3);
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .35);
}
.fsub {
  height: 24px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.fsub:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.fsub.active { background: var(--bg-3); color: #fff; box-shadow: var(--shadow-1), var(--hairline); }

/* ── Настройки ────────────────────────────────────────────────────────── */
/* Три колонки — комментарии, главы, остальное — с полосой у каждой.
   Раньше все пятнадцать полей лежали одной авто-сеткой, и колонки в ней
   разъезжались при каждом изменении ширины: «пауза между главами» вставала
   рядом с лимитом комментариев, хотя механизмы разные. Полоса слева делает
   границу видимой сразу, без чтения подписей. */

.ctl-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--s5);
  align-items: start;
}

/* Полоса яркая сверху и гаснет книзу: колонки разной длины, и ровная линия
   у короткой «Остальное» выглядела бы обрубленной. Рисуем фоном, а не
   border-image: тот на градиенте ведёт себя непредсказуемо. */
.ctl-group {
  min-width: 0;
  padding-left: var(--s3);
  background:
    linear-gradient(180deg, var(--accent), var(--accent-line) 40%, transparent)
    left top / 2px 100% no-repeat;
}

.ctl-group-head { margin-bottom: var(--s2); }
.ctl-group-head h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: -.01em;
  color: var(--text);
}
.ctl-group-head span { display: block; font-size: 10.5px; color: var(--text-mute); }

.ctl-list { display: grid; gap: var(--s1); }

.ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 6px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  transition: border-color var(--dur), background var(--dur);
}
.ctl:hover { border-color: var(--line-2); }
/* Включённое видно, не читая подписи: строка с поднятым тумблером получает
   фиолетовую кромку. Пятнадцать полей в сетке иначе выглядят одинаково. */
.ctl:has(input:checked) { border-color: var(--accent-line); background: linear-gradient(90deg, var(--accent-dim), transparent 65%), var(--bg-1); }

.ctl-info { min-width: 0; }
.ctl-info b { display: block; font-size: 12px; font-weight: 620; }
.ctl-info span { display: block; font-size: 10.5px; line-height: 1.35; color: var(--text-mute); }
.ctl input[type="number"] { width: 76px; text-align: right; flex: none; }

/* ── Шаблоны ──────────────────────────────────────────────────────────── */

#farmTemplates { min-height: 168px; }

.test-out { margin-top: var(--s2); }
.test-out:empty { display: none; }
.test-line {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  font-size: 12px;
  line-height: 1.5;
}
.test-meta { margin-top: 4px; font-size: 10.5px; color: var(--text-mute); }