/* The two reference pages: /methodology and /sources.
 *
 * Separate from site.css on purpose. That file is a verbatim copy of the
 * stylesheet the Next.js storefront used, down to its checksum, so that any
 * visual difference between the old site and this one is a markup difference
 * and never an argument about who edited what. New pages get new rules here.
 *
 * Everything below borrows the tokens site.css already defines - the six bloc
 * colours, the type scale, the rule colour - so these pages read as part of the
 * same site rather than as an appendix to it.
 */

.ref-group {
  margin-top: 2.5rem;
}

/* The bloc name carries its own colour, the same device the story page uses for
   a source group, so a reader arriving from there recognises it. */
.ref-group__heading {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 0.6rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--voice-colour, var(--rule));
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.ref-group__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Wide content scrolls inside its own container: the page body must never
   scroll sideways on a narrow screen. */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.ref-table th {
  text-align: left;
  padding: 0.4rem 0.9rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.ref-table td {
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  vertical-align: baseline;
}

.ref-table td:last-child,
.ref-table th:last-child {
  padding-right: 0;
}

/* Digits line up in a column so counts can be compared down the page rather
   than read one by one. */
.ref-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A source that is switched off stays legible but recedes: it is context for
   the ones that are read, not competition with them. */
.ref-row--off td {
  color: var(--ink-faint);
}

.ref-mark {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  vertical-align: 0.1em;
}

.ref-note {
  margin-top: 2.5rem;
  max-width: 42rem;
}

.ref-note__heading {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.ref-note p {
  margin: 0 0 0.8rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.ref-note .ref-table {
  margin: 0 0 1rem;
  max-width: 32rem;
}

.ref-note .ref-table td:first-child {
  width: 4.5rem;
  white-space: nowrap;
  color: var(--ink);
}

.ref-foot {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* Footer links to the two reference pages. Sized like the notice above them so
   they read as part of the same small print, not as a second navigation. */
.site-footer__links {
  margin: 0.6rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.site-footer__links a {
  color: var(--ink-soft);
}

/* На телефоне таблица перестаёт быть таблицей.

   Четыре столбца в 386px не помещаются: у .ref-table стоит overflow-x: auto,
   и она честно прокручивалась внутри себя — но без единого признака, что её
   можно листать, а срезался при этом последний столбец, «Последняя». Именно он
   отвечает на вопрос, ради которого страница существует: молчит источник или
   умер. Читатель на телефоне видел обрубок и не знал, что там что-то есть.

   Каждая строка становится блоком: название издания сверху, под ним язык,
   число публикаций и дата одной строкой. Подписи столбцов приезжают из
   data-label, потому что заголовок таблицы здесь скрыт, а «1265 · вчера» без
   них — загадка. У языка подпись пустая: слово «русский» в пояснении не
   нуждается. */
@media (max-width: 34rem) {
  .ref-table,
  .ref-table tbody,
  .ref-table tr,
  .ref-table td {
    display: block;
  }

  .ref-table {
    overflow-x: visible;
  }

  .ref-table thead {
    display: none;
  }

  .ref-table tr {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .ref-table td {
    padding: 0;
    border: none;
  }

  /* Название с его пометками — своей строкой и в полный кегль. */
  .ref-table td:first-child {
    margin-bottom: 0.15rem;
  }

  /* Остальное — одной строкой под ним, помельче и потише. */
  .ref-table td[data-label] {
    display: inline;
    font-size: 0.8rem;
    color: var(--ink-soft);
  }

  .ref-table td[data-label]:not([data-label=''])::before {
    content: attr(data-label) ' ';
  }

  .ref-table td[data-label]:not(:last-child)::after {
    content: ' · ';
    color: var(--ink-faint);
  }

  /* Выключка вправо была нужна, чтобы цифры выстраивались в столбец. Столбца
     больше нет. */
  .ref-table__num {
    text-align: left;
  }
}