/* Shared stylesheet for ALL city reports.
   Изменяется здесь — меняется во всех отчётах сразу.
   Токены (цвета, размеры, отступы) живут в tokens.css.
*/
@import url('tokens.css');

/* ── Reset ──────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
  font-size: var(--fs-md);
  min-height: 100vh;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ── Container ──────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ── Header (синий градиент, общий для всех отчётов) ────────────────── */
.header {
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: #fff;
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.header h1 {
  font-size: var(--fs-2xl);
  color: #fff;
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.header .sub {
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-md);
  font-weight: 500;
}
.header .meta {
  color: rgba(255, 255, 255, .75);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}

/* ── Nav back ───────────────────────────────────────────────────────── */
.nav-back {
  max-width: var(--max-width);
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-4);
  font-size: var(--fs-base);
}
.nav-back a {
  display: inline-block;
  color: var(--brand);
  background: #fff;
  border: 1.5px solid var(--brand);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.nav-back a:hover {
  background: var(--brand);
  color: #fff;
}

/* ── Sections ───────────────────────────────────────────────────────── */
.sec {
  max-width: var(--max-width);
  margin: var(--space-5) auto;
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: var(--space-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.sec h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
  color: var(--brand);
  border-bottom: 2px solid var(--accent-pink);
  padding-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.sec h2 .icon { font-size: 1.3rem; }

/* ── Heroicons wrapper ─────────────────────────────────────────────── */
/* <svg class="hi"><use href="/assets/icons.svg#i-document"/></svg> */
.hi {
  width: 20px; height: 20px;
  color: var(--brand);
  flex-shrink: 0;
  vertical-align: middle;
}
.hi-lg { width: 28px; height: 28px; }
.hi-sm { width: 16px; height: 16px; }
.hi-muted { color: var(--text-muted); }
.hi-accent { color: var(--accent-pink); }
.hi-good { color: var(--good); }
.hi-bad { color: var(--bad); }
.hi-warn { color: var(--warn); }

.section-intro {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
}

/* ── Metric cards grid ──────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  max-width: var(--max-width);
  margin: var(--space-5) auto;
  padding: 0 var(--space-4);
}
.card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: var(--space-4);
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.card .num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand);
}
.card .label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ── Verdict / callout block ────────────────────────────────────────── */
.verdict {
  background: var(--bg-tint);
  border-left: 4px solid var(--accent-pink);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
}
.verdict.good { border-color: var(--good); background: #f0f9f2; }
.verdict.info { border-color: var(--brand); background: var(--bg-tint); }
.verdict.warn { border-color: var(--warn); background: #fff4e6; }

/* ── Post cards ─────────────────────────────────────────────────────── */
.post-card {
  background: var(--bg-tint);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  border-left: 3px solid var(--brand);
}
.post-card.bad { border-color: var(--bad); background: #fff5f6; }
.post-card.good { border-color: var(--good); background: #f0f9f2; }
.post-card .src { color: var(--brand); font-weight: 600; font-size: var(--fs-sm); }
.post-card .txt { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--space-1) 0; font-style: italic; }
.post-card .stats { color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Tables ─────────────────────────────────────────────────────────── */
/* Оборачиваем таблицу в .table-wrap — на узких экранах таблица скроллится
   горизонтально, а не ломает сетку секции. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-2) 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
th {
  background: var(--bg-highlight);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--brand);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: top;
  word-break: break-word;
}
td.num { text-align: right; white-space: nowrap; }
tr:hover { background: var(--bg-soft); }

/* Если таблица не обёрнута в .table-wrap — на узких экранах всё равно
   даём ей скроллить внутри секции. */
.sec { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Color helpers (semantic) ───────────────────────────────────────── */
.c-good { color: var(--good); }
.c-bad { color: var(--bad); }
.c-warn { color: var(--warn); }
.c-muted { color: var(--text-muted); }
.c-brand { color: var(--brand); }

/* Legacy aliases — старые классы в коде */
.red { color: var(--accent-pink); }
.green { color: var(--good); }
.blue { color: var(--brand); }
.orange { color: var(--warn); }
.gray { color: var(--text-muted); }

/* ── Bars / chart primitives ────────────────────────────────────────── */
.bar-wrap { display: flex; align-items: center; gap: .4rem; }
.bar-fill { height: 14px; border-radius: 3px; min-width: 2px; transition: width .3s; }
.bar-label { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

.hbar          { background: var(--accent-pink); }
.hbar-g        { background: var(--good); }
.hbar-b        { background: var(--brand); }
.hbar-o        { background: var(--warn); }
.hbar-gov      { background: var(--c-gov); }
.hbar-media    { background: var(--c-media); }
.hbar-corp     { background: var(--c-corp); }
.hbar-party    { background: var(--c-party); }
.hbar-medical  { background: var(--c-medical); }
.hbar-pod      { background: var(--c-pod); }

/* ── Tags ───────────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-xs);
  margin: 1px;
  font-weight: 500;
}
.tag-gov      { background: #ede7f6; color: var(--c-gov); }
.tag-media    { background: #fde7eb; color: var(--c-media); }
.tag-corp     { background: #f3e5f5; color: var(--c-corp); }
.tag-party    { background: #fff3e0; color: var(--c-party); }
.tag-medical  { background: #e0f2f1; color: var(--c-medical); }
.tag-pod      { background: #e8f5e9; color: var(--c-pod); }
.tag-ppl      { background: #e8f5e9; color: var(--c-pod); }  /* legacy alias */

/* ── Compare / duo grids ────────────────────────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.compare-col {
  background: var(--bg-tint);
  border-radius: var(--r-md);
  padding: var(--space-4);
}
.compare-col h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
  color: var(--brand);
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
@media (max-width: 700px) {
  .compare, .duo { grid-template-columns: 1fr; }
  .header { padding: var(--space-5) var(--space-4); }
  .sec { padding: var(--space-4); margin: var(--space-4) auto; }
  /* На мобильных таблицы могут скроллиться горизонтально, но ячейки
     сохраняют nowrap только у чисел. Остальной текст переносится. */
  table { font-size: var(--fs-xs); }
  th, td { padding: var(--space-1) var(--space-2); }
  .grid { padding: 0 var(--space-2); }
  .card .num { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .header h1 { font-size: 1.4rem; }
  .sec h2 { font-size: var(--fs-md); }
  .card { padding: var(--space-2); }
  .card .num { font-size: 1.15rem; }
}

/* ── 24h time grid ──────────────────────────────────────────────────── */
.time-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin: var(--space-2) 0;
}
.time-cell {
  border-radius: 3px;
  text-align: center;
  font-size: .6rem;
  padding: 2px 0;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.time-label {
  font-size: .65rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-1);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-light);
  font-size: var(--fs-xs);
}

/* ── Expandable details ────────────────────────────────────────────── */
details > summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  list-style: none;
  background: rgba(26, 35, 126, .05);
  color: var(--text);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--brand); }
details[open] > summary::before { content: '▾ '; }
details[open] > summary { background: rgba(26, 35, 126, .1); }

/* ── Utilities ──────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-right { text-align: right; }