/* ─── Пороги отбора на экране «Ещё» ──────────────────────────────────────
   Владелец файла — thresholds.js. Сводка оформляется в more.css.

   Ни одного нового цвета и ни одного нового кегля: всё из tokens.css. Опасное
   действие тут ЕСТЬ (порог решает, доедет лот до канала или нет), и выглядеть
   оно обязано опасным — но за счёт уже существующих `--danger`/`--warn`, а не
   новой краски: своя палитра на одном экране читается как чужая вставка.

   ГЕОМЕТРИЯ повторяет карточку ленты (`--r`, `--shadow`, подложка `--bg`):
   переход между разделами не должен спотыкаться.

   ШИРИНА. Список живёт внутри `.more`, который центрует себя сам. А вот экран
   одного параметра — полноэкранный слой поверх всего (иначе редактирование
   порога тонет в прокрутке сводки), поэтому он центрует содержимое сам, теми же
   `--content-max`.
   ──────────────────────────────────────────────────────────────────────── */

.thr { display: flex; flex-direction: column; gap: var(--sp-2); }

.thr-card {
  background: var(--bg);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Карточка-список: строки сами себе плитки, разделяют их линии — внутренние
   отступы и зазор здесь только мешали бы. */
.thr-card.rows { padding: 0; gap: 0; }

.thr-card h3 {
  margin: 0; font-size: var(--fs-ui); font-weight: 600; letter-spacing: -.01em;
}
.thr-note { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.4; }

/* Предупреждение про «когда подействует» стоит НАД списком, а не под ним:
   человек должен прочитать его до того, как что-то трогать, а не после. */
.thr-when {
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft);
}
.thr-when b { color: var(--ink); font-weight: 600; }

/* ─── список порогов ────────────────────────────────────────────────────── */

.thr-group { display: flex; flex-direction: column; gap: 2px; }
.thr-gtitle {
  margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft);
  padding: 0 var(--sp-1);
}
.thr-gnote {
  margin: 0 0 var(--sp-1); font-size: var(--fs-meta); color: var(--ink-soft);
  line-height: 1.4; padding: 0 var(--sp-1);
}

/* Строка порога — кнопка: тап открывает экран ОДНОГО параметра. Менять скопом
   нельзя (требование юзера), поэтому здесь принципиально нет ни полей ввода, ни
   переключателей: со списка ничего изменить невозможно. */
.thr-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-2);
  width: 100%;
  text-align: left;
  border: 0; background: var(--bg);
  padding: 10px var(--sp-3);
  font: inherit; color: var(--ink);
  cursor: pointer;
}
.thr-row:first-of-type { border-radius: var(--r) var(--r) 0 0; }
.thr-row:last-of-type { border-radius: 0 0 var(--r) var(--r); }
.thr-row:only-of-type { border-radius: var(--r); }
.thr-row + .thr-row { box-shadow: inset 0 1px 0 var(--line); }
.thr-row:active { background: var(--surface); }

.thr-lab { font-size: var(--fs-ui); line-height: 1.3; min-width: 0; }
/* Значение — главное, что человек ищет глазами, поэтому справа и жирным.
   Табличные цифры: числа стоят столбцом, и без них правый край «дышит». */
.thr-val {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-ui); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.thr-unit { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-meta); }
.thr-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.4;
}

/* Метка «этот порог сейчас не читается» — предупреждение, а не украшение:
   крутить ручку, не подключённую к пайплайну, хуже, чем не иметь ручки. */
.thr-flag {
  display: inline-block; margin-right: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--warn); background: var(--warn-soft);
  border-radius: 4px; padding: 1px 5px; vertical-align: 1px;
}
.thr-flag.own { color: var(--accent-strong); background: var(--accent-soft); }

/* Порог, который нынешний пайплайн не читает. Гасим ЗНАЧЕНИЕ: крупное жирное
   число справа — первое, что ловит глаз, и в полную силу оно врёт «столько
   сейчас и действует». Плашка при этом остаётся яркой: убрать оба сигнала —
   значит спрятать строку, а она полезна ровно как ответ «почему не подействовало». */
.thr-row.dead .thr-val { color: var(--ink-soft); font-weight: 400; }

/* Плашка «изменено вами» с откатом в один тап. Живёт прямо в строке списка —
   искать, что ты вчера накрутил, по журналу человек не будет. */
.thr-recent {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-1);
  background: var(--accent-soft); border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
  font-size: var(--fs-meta); color: var(--accent-strong);
}
.thr-undo {
  margin-left: auto; border: 0; background: none; padding: 2px 0;
  color: var(--accent-strong); font: inherit; font-size: var(--fs-meta);
  font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ─── экран одного параметра ────────────────────────────────────────────── */

/* Слой поверх всего, включая нижнюю навигацию: пока правишь порог, уйти вбок
   случайным тапом нельзя. */
.thr-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.thr-bar {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.thr-back {
  border: 0; background: none; padding: 4px 6px 4px 0;
  color: var(--accent); font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.thr-step {
  margin-left: auto; font-size: var(--fs-meta); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.thr-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-8) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: 100%; max-width: var(--content-max); margin: 0 auto;
}
.thr-h {
  margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.25;
}
.thr-p { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.thr-p.soft { color: var(--ink-soft); }

/* Текущее значение крупно — с него начинается любой разговор про порог. */
.thr-now {
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--sp-3);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.thr-now .n {
  font-size: var(--fs-display); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.thr-now .u { font-size: var(--fs-small); color: var(--ink-soft); }
.thr-now .src { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-soft); }

.thr-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.thr-field label { font-size: var(--fs-small); color: var(--ink-soft); }
.thr-field input {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 11px var(--sp-3);
  font: inherit; font-size: var(--fs-lead); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.thr-field input:focus { background: var(--bg); }
.thr-field.bad input { border-color: var(--danger); background: var(--danger-soft); }
.thr-err { font-size: var(--fs-small); color: var(--danger); }
.thr-limits { font-size: var(--fs-meta); color: var(--ink-soft); }

/* Тумблер: два состояния кнопками, а не переключателем. Переключатель меняет
   значение мгновенно от одного касания — ровно то, чего на этом экране быть не
   должно: выбор здесь ещё ничего не сохраняет. */
.thr-switch { display: flex; gap: var(--sp-2); }
.thr-switch button {
  flex: 1; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 10px; font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.thr-switch button[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-strong); font-weight: 600;
}

/* ─── экран последствий ─────────────────────────────────────────────────── */

.thr-diff {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-sm); padding: var(--sp-3);
  font-size: var(--fs-display); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.thr-diff .was { color: var(--ink-soft); text-decoration: line-through; }
.thr-diff .arr { color: var(--ink-soft); font-size: var(--fs-title); }
.thr-diff .u { font-size: var(--fs-small); font-weight: 400; color: var(--ink-soft); }

/* Направление сдвига — словами и цветом сразу. Одного цвета мало: строгий отбор
   не «плохой», он просто другой, и в чёрно-белом виде смысл должен остаться. */
.thr-dir {
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body); line-height: 1.45;
  background: var(--surface);
}
.thr-dir.stricter { background: var(--warn-soft); color: var(--warn); }
.thr-dir.looser { background: var(--ok-soft); color: var(--ok); }

.thr-words { margin: 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.5; }
.thr-words li + li { margin-top: var(--sp-1); }

/* Прикидка на истории. Два числа рядом — это сравнение, а не «показатель»:
   важно не «сколько», а «во сколько раз меньше станет». */
.thr-est { display: flex; flex-direction: column; gap: var(--sp-2); }
.thr-est-pair { display: flex; gap: var(--sp-2); }
.thr-est-cell {
  flex: 1; background: var(--surface); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 1px;
}
.thr-est-cell.new { background: var(--accent-tint); }
.thr-est-cell .n {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.thr-est-cell .l { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.35; }
.thr-est-foot { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.4; }

/* «Оценка недоступна» — с причиной. Без причины это читается как поломка. */
.thr-noest {
  background: var(--surface); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45;
}
.thr-noest b { color: var(--ink); font-weight: 600; }

/* ─── подтверждение ─────────────────────────────────────────────────────── */

/* Единственное место, где цвет опасности заливает блок целиком: дальше —
   запись в боевой конфиг. */
.thr-danger {
  background: var(--danger-soft); border-radius: var(--r-sm);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.thr-danger .thr-h { font-size: var(--fs-lead); color: var(--danger); }

/* ─── кнопки шага ───────────────────────────────────────────────────────── */

.thr-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.thr-btn {
  border: 0; border-radius: var(--r-sm);
  padding: 13px var(--sp-4);
  font: inherit; font-size: var(--fs-ui); font-weight: 600;
  background: var(--accent); color: var(--on-accent);
  cursor: pointer;
}
.thr-btn[disabled] { opacity: .45; cursor: default; }
.thr-btn.ghost { background: var(--surface); color: var(--ink); font-weight: 400; }
.thr-btn.danger { background: var(--danger); color: var(--on-accent); }

/* Итог сохранения. Держится до ухода с экрана: «применить сейчас» надо
   предложить ровно тогда, когда порог уже записан, а процессы ещё старые. */
.thr-done {
  background: var(--ok-soft); border-radius: var(--r-sm); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-body); line-height: 1.45;
}
.thr-done b { color: var(--ok); }
.thr-done .thr-btn.ghost { background: var(--bg); }

/* На широком экране слой не растягивается на всю ширину монитора: строка в
   1200 px читается хуже, а не лучше — та же причина, что у ленты. */
@media (min-width: 760px) {
  .thr-bar { max-width: var(--content-max); margin: 0 auto; width: 100%; }
  .thr-actions { flex-direction: row-reverse; justify-content: flex-end; }
  .thr-actions .thr-btn { min-width: 180px; flex: none; }
}