/*
  Страница «Стоимость»: таблица тарифов.

  Единственная таблица на сайте — остальные перечни свёрстаны списками определений
  (.rows). Здесь таблица оправдана: три тарифа сравниваются по одним и тем же
  показателям, и колонка на тариф — единственный способ это показать.

  Визуальный язык тот же, что у .rows: тонкие рамки, красный акцент, системные
  шрифты, нулевое скругление.
*/

.tarify-obertka {
  margin-top: 22px;
  /* На узком экране таблица прокручивается внутри своей рамки, а не тянет
     горизонтальную полосу у всей страницы. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.tarify {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 15px;
  line-height: 1.45;
}

table.tarify th,
table.tarify td {
  border: 1px solid var(--line-strong);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

table.tarify thead th {
  background: var(--panel);
  font-weight: 700;
  white-space: nowrap;
}

table.tarify thead th:first-child {
  white-space: normal;
}

table.tarify tbody th {
  font-weight: 400;
  width: 42%;
}

table.tarify tbody td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Строка со стоимостью — главная в таблице, поэтому крупнее и с акцентом. */
table.tarify tr.tarify-cena th,
table.tarify tr.tarify-cena td {
  font-size: 17px;
  background: var(--panel);
}

table.tarify tr.tarify-cena td b {
  color: var(--accent);
}

/* Подпись таблицы нужна тем, кто слушает страницу, а не смотрит на неё. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  table.tarify { font-size: 14px; }
  table.tarify th, table.tarify td { padding: 8px 10px; }
  table.tarify tr.tarify-cena th, table.tarify tr.tarify-cena td { font-size: 15px; }
}

@media print {
  .tarify-obertka { overflow-x: visible; }
  table.tarify { min-width: 0; font-size: 11pt; page-break-inside: auto; }
  table.tarify tr { page-break-inside: avoid; }
  table.tarify th, table.tarify td { border-color: #000; }
  table.tarify thead th, table.tarify tr.tarify-cena th, table.tarify tr.tarify-cena td {
    background: transparent;
  }
}