/* Аналитика: плитки чисел, полоса по дням, разбор по источникам.
 *
 * Отдельным файлом, потому что раздел живёт только в веб-клиенте: `web.html`
 * подключает этот файл, `index.html` — нет. Откат — снять одну строку из
 * `web.html`: экраны собраны из общих карточек и без этого файла останутся
 * рабочими, только теснее.
 *
 * Ничего с `!important`: файл подключается после `app.css` и перекрывает его
 * обычным каскадом.
 */

/* ── Шапка и полки ────────────────────────────────────────────────────────── */

.ins-top {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px;
}

/* Полки среза и срока прокручиваются вбок, а не переносятся: у человека с
 * пятью сообществами перенос съел бы два ряда экрана ещё до первого числа. */
.ins-scopes,
.ins-spans,
.ins-chart-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.ins-scopes::-webkit-scrollbar,
.ins-spans::-webkit-scrollbar,
.ins-chart-tabs::-webkit-scrollbar { display: none; }
.ins-scopes .chip,
.ins-spans .chip,
.ins-chart-tabs .chip { scroll-snap-align: start; flex: none; }

.ins-spans { margin-bottom: 12px; }

/* ── Плитки ───────────────────────────────────────────────────────────────── */

/* Две в ряд на телефоне и четыре на компьютере. `minmax(0, 1fr)` обязателен:
 * без нуля длинное пояснение внутри плитки растягивает столбец, и сетка
 * разъезжается вправо за край экрана. */
.ins-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 720px) {
  .ins-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ins-tile {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.ins-tile-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
}
.ins-tile-name {
  font-size: var(--fs-sm);
  /* Длинное имя показателя переносится, а не режет плитку по ширине. */
  overflow-wrap: anywhere;
}
.ins-tile-num {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xl);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ins-tile-delta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* Цвет — добавка к словам, а не замена им: «+12 %» написано текстом, и
 * человек, не различающий зелёное и красное, читает то же самое. */
.ins-tile-delta.up { color: var(--good); }
.ins-tile-delta.down { color: var(--bad); }
.ins-tile-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* ── Полоса по дням ───────────────────────────────────────────────────────── */

.ins-chart-card { padding: 12px; }

/* Столбики стоят на общей линии и делят ширину поровну. Девяносто столбиков на
 * узком телефоне — это полоска в два пиксела: пусть будет полоска, но вся
 * картина целиком, а не половина месяца с прокруткой вбок. */
.ins-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  margin: 8px 0 0;
  padding-top: 4px;
}
.ins-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.ins-bar i {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transition: height var(--fast) var(--ease);
}
/* Убыль читателей рисуется тем же столбиком, но другим цветом: рисовать её
 * вниз от середины значило бы отдать половину высоты полосы под пустоту в те
 * недели, когда никто не уходил. */
.ins-bar.down i { background: var(--bad); }

/* ── Откуда приходили ─────────────────────────────────────────────────────── */

.ins-src { align-items: flex-start; }
.ins-src-bar {
  height: 6px;
  margin: 4px 0 4px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.ins-src-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Слово «прошлый срок» под полоской — мелкое и приглушённое: это сравнение,
 * а не само число. */
.ins-src small { color: var(--muted); }

.ins-warn { color: var(--bad); }

/* ── Телефон ──────────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  /* Пояснение под числом на узком экране занимает три строки и отодвигает
     соседнюю плитку. Число и разница важнее — пояснение уходит. Оно осталось
     подписью к полосе и в тексте карточек ниже, так что ничего не пропало. */
  .ins-tile-note { display: none; }
  .ins-chart { height: 96px; }
}