/* Блоки — примитивы отображения. Из них собираются три схемы страницы
 * (документ, карточка данных, инструмент). Новый блок заводится только тогда,
 * когда у него минимум два раздела-потребителя: блок ради одного раздела —
 * это обычная вьюха, её и надо написать.
 */

/* === stamp — подпись системы =============================================
 * Строка источника: откуда факт, когда собран, когда проверен, какой статус.
 * Единственное правило, ради которого проект существует, — не выдумывать
 * данные, — и оно вынесено в визуальный характер, а не спрятано в подвал.
 */

.stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--theme);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.stamp__cell { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }

.stamp__key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.stamp__value {
  font-family: var(--ff-data);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* === status — состояние записи ===========================================
 * Форма плюс семантический цвет. Тему сюда не пускаем: пилюля должна читаться
 * одинаково в любом разделе.
 */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--live    { color: var(--ok); }
.status--warn    { color: var(--warn); }
.status--retired { color: var(--bad); }
.status--neutral { color: var(--muted); }

/* === crumbs — хлебные крошки из графа ==================================== */

.crumbs { font-size: var(--fs-sm); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.crumbs li { display: flex; gap: var(--sp-2); align-items: baseline; }
.crumbs li + li::before { content: "›"; color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: var(--fw-medium); }

/* === spec — таблица ключ → значение ====================================== */

.spec {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.spec__key,
.spec__value {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.spec__key { color: var(--muted); font-size: var(--fs-sm); background: var(--surface-2); }
.spec__value { overflow-wrap: anywhere; }
/* Перенос строки внутри значения — это содержимое, а не мусор: строфа
   стихотворения, двустишие пословицы, список форм выпуска у лекарства.
   Слитый в один абзац стих перестаёт быть стихом. */
.spec__value--lines { white-space: pre-line; }
.spec > :nth-last-child(-n + 2) { border-bottom: 0; }

@media (max-width: 560px) {
  .spec { grid-template-columns: 1fr; }
  .spec__key { border-bottom: 0; }
}

/* === facts — плитки-показатели =========================================== */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-3); }

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.fact__value {
  font-family: var(--ff-data);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.fact__label { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }

/* === data-table — таблица данных ========================================= */

.data-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); min-width: 30rem; }
.data-table th, .data-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }

.data-table thead th {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-semi);
  background: var(--surface-2);
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { font-family: var(--ff-data); font-variant-numeric: tabular-nums; text-align: right; }

/* Не переносится ЗНАЧЕНИЕ — время, код, дата. Заголовок переносится: пока
   «Действующее вещество» держалось одной строкой, оно забирало треть таблицы
   и выталкивало остальные колонки за край. */
.data-table td.num, .data-table td.tight { white-space: nowrap; }

/* Заголовок числовой колонки прижимается туда же, куда и значения: иначе
   «ФАДЖР» стоит слева, а 05:42 справа, и глазу нечего связать. */
.data-table thead th.num { text-align: right; }

/* Короткая подпись строки — не колонка данных, ей хватает своей ширины.
   Остаток забирают колонки со значениями, и цифры не расползаются. Длинная
   подпись, наоборот, переносится: у медицинского изделия это стознаковое
   название, и в одну строку оно выпихивало остальные колонки за край. */
.data-table th.tight:first-child, .data-table td.tight:first-child { width: 1%; }

/* === doc — текст документа =============================================== */

.doc { font-family: var(--ff-doc); font-size: var(--fs-md); line-height: var(--lh-loose); max-width: var(--w-prose); }
.doc > * + * { margin-top: var(--sp-4); }
.doc h2 { font-family: var(--ff-ui); font-size: var(--fs-lg); margin-top: var(--sp-6); }
.doc h3 { font-family: var(--ff-ui); margin-top: var(--sp-5); }

.doc blockquote {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}

/* === toc — оглавление ==================================================== */

.toc { font-size: var(--fs-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.toc a { color: var(--theme); }

/* === link-list — список ссылок на детей ================================== */

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.link-list--cols { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

.link-list a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .link-list a:hover { border-color: var(--theme); }
}

.link-list__meta { display: block; font-size: var(--fs-sm); color: var(--muted); }

/* === prevnext — соседи =================================================== */

.prevnext { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.prevnext__none { visibility: hidden; }

/* === next-up — блок «дальше» из графа ====================================
 * Главный инструмент перелинковки: минимум одна ссылка ведёт в другую тему.
 */

.next-up {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--theme);
  border-radius: var(--r-md);
}

.next-up__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

.next-up__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.next-up__item a { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--ink); text-decoration: none; }
.next-up__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.next-up__label { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }

@media (hover: hover) {
  .next-up__item a:hover .next-up__label { text-decoration-color: var(--theme); }
}

/* Двойник назван так же, как сама страница: «АО «Народный Банк Казахстана»»
   ссылается на «АО «Народный Банк Казахстана»». Подпись отвечает на вопрос,
   который остаётся, — что там с другой стороны. */
.next-up__where { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }

/* Точка домена показывает, что ссылка уводит в другую тему. */
.next-up__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--theme); }
.next-up__item[data-topic] .next-up__dot { background: var(--theme); }

/* === calc — инструмент =================================================== */

.calc { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.calc__fields { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.calc__field { display: flex; flex-direction: column; gap: var(--sp-1); }
.calc__label { font-size: var(--fs-sm); color: var(--muted); }

.calc__input, .calc__select {
  font: inherit;
  font-family: var(--ff-data);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.calc__result { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); background: var(--theme); color: var(--on-hue); border-radius: var(--r-sm); }
.calc__result-label { font-size: var(--fs-sm); opacity: .85; }
.calc__result-value { font-family: var(--ff-data); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }

/* Ответ бывает не одним числом: у кредита это платёж, сумма выплат и
   переплата. Главное число остаётся в цветной плашке, остальные идут
   спокойным списком под ней — иначе три плашки спорят друг с другом. */
.calc__lines { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.calc__row:last-child { border-bottom: 0; padding-bottom: 0; }
.calc__row-label { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
.calc__row-value { margin: 0; font-family: var(--ff-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__note { font-size: var(--fs-xs); opacity: .8; }

/* Чем считаем — под формой, а не над ней: сначала ответ, потом объяснение.
   Человек, пришедший за числом, не должен читать абзац, чтобы до него
   добраться. */
.calc__about { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-sm); }
.calc__about p + p { margin-top: var(--sp-3); }

.button {
  font: inherit;
  font-weight: var(--fw-semi);
  padding: var(--sp-3) var(--sp-5);
  background: var(--theme);
  color: var(--on-hue);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

/* === original — текст на языке источника ================================
 * Для Корана арабский — основной текст, а не сопровождение к переводу.
 * Направление справа налево задаётся разметкой, а не стилем: это свойство
 * содержимого. Начертание — из словаря, --ff-arabic.
 */
.original {
  font-family: var(--ff-arabic);
  font-size: var(--fs-xl);
  line-height: 2;
  margin: 0;
  /* Абсолютная ширина, а не 66ch: ch считается по СВОЕМУ шрифту, и в арабском
     начертании этой кегли 66ch выходит почти в полторы тысячи пикселей —
     текст уезжал к самому краю страницы. */
  max-width: 34rem;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

/* Кнопка стоит в одном ряду с полями, но подписи над ней нет: подпись у
   поля объясняет, что вводить, а у кнопки написано прямо на ней. Поэтому
   её колонка короче соседних, и кнопка прижимается к их низу — иначе она
   растягивается на всю высоту ряда и выглядит вдвое выше полей. */
.calc__field--action { justify-content: flex-end; }
.calc__field--action .button { flex: none; }

/* === notice — состояние источника =========================================
 * Восемь месяцев сайт отдавал отменённый Налоговый кодекс как действующий.
 * Сноска об отмене — не сноска: это первое, что человеку надо знать о
 * странице, и стоит она сразу под заголовком.
 */

.notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  margin: 0;
}

.notice__text { color: var(--muted); flex: 1 1 20rem; min-width: 0; }

/* Сноска источника при статье: она не норма, и выглядеть как норма не должна. */
.doc__note {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}