/* ==========================================================================
   Проверка URL: график распределения и список адресов
   Цвет здесь СТАТУСНЫЙ (хорошо -> критично), а не опознавательный знак серии,
   поэтому оттенки повторяются у категорий одной тяжести, а различает их
   всегда видимая подпись. Оранжевый не используется: он занят брендом под
   управляющие элементы, и статус в нём читался бы как кнопка.
   ========================================================================== */
:root {
  --sev-good: #1e7a3c;
  --sev-warn: #8a6516;
  --sev-bad:  #a4463b;
  --sev-crit: #bc120f;
  --sev-none: #77818e;
}
:root[data-theme="dark"] {
    --sev-good: #6cc98a;
    --sev-warn: #d8b962;
    --sev-bad:  #dd9289;
    --sev-crit: #e57368;
    --sev-none: #8b95a1;
}

.dist { flex: none; margin: 0 16px 12px 0; }
.dist figcaption {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  margin-bottom: 8px;
}
.dist figcaption .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Кнопка сворачивания. Раньше это была стрелка в 16 пикселей - её
   не находили. Теперь это кнопка с подписью, и она первая в заголовке:
   график занимает верх экрана, а разбирают список под ним. */
.dist-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
  font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 600;
  white-space: nowrap;
}
.dist-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Свёрнутый график - заголовок остаётся полосой, по которой видно, что
   он не исчез, а убран */
.dist.collapsed figcaption { margin-bottom: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dist.collapsed .dist-toggle { border-color: var(--accent); color: var(--accent); }
/* Переключатель типа прижат вправо: он не заголовок, а управление */
.dist-kinds { margin-left: auto; }
.dist-kinds .chip { text-transform: none; letter-spacing: 0; }
.dist-bars { display: flex; flex-direction: column; gap: 2px; }
/* Шапка колонок графика. Сетка та же, что у строк, иначе подписи разъедутся
   со значениями - считать их придётся по горизонтали глазами. */
/* Распределение - такая же таблица, как остальные: четыре колонки, шапка
   и строки. Минимум тот же по смыслу: подпись категории, полоса, число
   и доля. Ниже него полоса схлопывается в точку и перестаёт что-либо
   показывать. */
.dist, .dist-head, .dist-row { --table-min: 420px; }
.dist-head {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 60px 54px;
  align-items: end;
  gap: 10px;
  min-width: var(--table-min);
  padding: 0 6px 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.dist-head .dist-count, .dist-head .dist-share { text-align: right; font-weight: 600; }

/* Столбец целиком - кнопка: щелчок оставляет в списке только эту категорию,
   поэтому цель нажатия равна всей строке, а не одной полоске. */
.dist-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 60px 54px;
  align-items: center;
  gap: 10px;
  min-width: var(--table-min);
  width: 100%;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 12px;
  color: var(--text);
}
.dist-row:hover { background: var(--surface-2); }
.dist-row.on { background: var(--accent-soft); }
.dist-label { color: var(--text-2); }
.dist-track { height: 14px; }
.dist-bar {
  display: block; height: 100%;
  /* Скругление только у конца полосы: основание остаётся на общей оси,
     иначе столбцы визуально «отрываются» от неё и длины сравнивать труднее. */
  border-radius: 0 4px 4px 0;
  background: var(--sev-none);
  min-width: 0;
}
.dist-bar.sev-good { background: var(--sev-good); }
.dist-bar.sev-warn { background: var(--sev-warn); }
.dist-bar.sev-bad  { background: var(--sev-bad); }
.dist-bar.sev-crit { background: var(--sev-crit); }
.dist-count { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dist-share { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* В режиме высокой контрастности заливка выключается системой, и разница
   между категориями осталась бы только в подписи - рамка её возвращает. */
@media (forced-colors: active) {
  .dist-bar { border: 1px solid CanvasText; forced-color-adjust: none; }
}

.urow {
  border: 1px solid var(--line);
  border-left: 3px solid var(--sev-none);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 12px;
  margin-bottom: 8px;
}
.urow.sev-good { border-left-color: var(--sev-good); }
.urow.sev-warn { border-left-color: var(--sev-warn); }
.urow.sev-bad  { border-left-color: var(--sev-bad); }
.urow.sev-crit { border-left-color: var(--sev-crit); }
.urow header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.urow, .places { min-width: 0; max-width: 100%; }
.urow .pcount { margin-left: auto; color: var(--text-3); font-size: 11px; }

.tag-good { background: var(--live-bg); border: 1px solid var(--live-line); color: var(--live-text); }
.tag-warn { background: var(--att-bg);  border: 1px solid var(--att-line);  color: var(--att-text); }
.tag-bad  { background: var(--no-bg);   border: 1px solid var(--no-line);   color: var(--no-text); }
.tag-crit { background: var(--no-bg);   border: 1px solid var(--no-line);   color: var(--danger); }
.tag-none { background: var(--free-bg); border: 1px solid var(--free-line); color: var(--free-text); }

.uurl {
  margin-top: 6px; font-size: 12px; word-break: break-all;
  font-family: var(--font-mono);
}
.uurl.final { color: var(--text-3); font-size: 11.5px; }

/* Места, где стоит адрес: главный ответ инструмента - не «сломано», а «где» */
.places { list-style: none; margin: 8px 0 0; padding: 0; }
.place {
  display: grid;
  /* minmax(0, …) во ВСЕХ колонках, включая последнюю: без него 19-значный
     AdId не помещается в свою ячейку и печатается поверх правой панели -
     колонка грид-контейнера по умолчанию не сжимается ниже содержимого. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 170px);
  gap: 10px;
  padding: 3px 0;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}
.place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place .pkind { color: var(--text); }
.place .ppath { color: var(--text-2); }
.place .pid { color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.place.more { color: var(--text-3); grid-template-columns: 1fr; }
/* Быстрая ссылка помечается своим значком: раньше её название приписывалось
   к имени группы вплотную и читалось как одно слово - «Новая группабыстрая». */
.place .ptag {
  margin-left: 6px; padding: 0 5px; border-radius: 3px;
  background: var(--att-bg); color: var(--att-text);
  border: 1px solid var(--att-line); font-size: 10.5px; white-space: nowrap;
}

.side-h { margin: 16px 0 6px; font-size: 12px; }

@media (max-width: 1100px) {
  .cgroup-head, .cgroup header {
    grid-template-columns: 14px minmax(0, 1.6fr) 0 64px 78px 50px;
  }
  .cgroup .ctop, .cgroup-head .ctop { display: none; }
}
@media (max-width: 900px) {
  .dist-row, .dist-head { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 50px 48px; }
  .place { grid-template-columns: minmax(0, 1fr) 90px; }
  .place .ppath { display: none; }
}