/* ===========================================================================
 * S4 «Крипто-проверка» — собственная вёрстка.
 * Общее с сеткой — только packages/tokens (палитра, Geologica, шкала кеглей).
 * Всё остальное здесь написано под этот сайт: одна узкая колонка,
 * пошаговый поток с соединительной линией, смешанные радиусы, префикс chk-.
 * Состояния берутся из aria-атрибутов, а не из модификаторов классов.
 * ========================================================================= */

:root {
  /* Своя колонка и свой вертикальный ритм: шаг 48, внутри шага 12. */
  --chk-rail: 640px;
  --chk-gutter: 18px;
  --chk-step-gap: 48px;
  --chk-inner: 12px;
  --chk-band: 40px;

  /* Смешанные радиусы по назначению — это своя система, а не единый радиус. */
  --chk-r-step: 14px;
  --chk-r-tick: 4px;
  --chk-r-act: 9999px;
  --chk-r-verdict: 24px;
  --chk-r-note: 8px;

  /* Читательская типографика: 17 px, интерлиньяж 1.62, колонка ~66 знаков. */
  --chk-text: 17px;
  --chk-lh: 1.62;

  --chk-line: #0b102a1f;
  --chk-hair: 1px solid var(--chk-line);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Инверсия относительно erub.site: фон страницы серый, карточки белые. */
  background: var(--color-bg-section-alt);
  color: var(--color-text-primary);
  font-size: var(--chk-text);
  line-height: var(--chk-lh);
  overflow-wrap: break-word;
}

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

a { color: var(--color-blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-blue-700); }

:focus-visible {
  outline: 2px solid var(--color-blue-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Полоса прогресса: тонкая, 3 px, прижата к верху окна ---------------- */

.chk-gauge {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 20;
  pointer-events: none;
}

.chk-gauge > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-blue-600);
  transition: width 0.18s ease-out;
}

/* --- Каркас страницы ----------------------------------------------------- */

.chk-rail {
  width: 100%;
  max-width: calc(var(--chk-rail) + var(--chk-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chk-gutter);
}

.chk-top {
  background: var(--color-white);
  border-bottom: var(--chk-hair);
}

.chk-top .chk-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding-block: 14px;
}

.chk-mark {
  font-weight: var(--fw-semibold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
}

.chk-mark:hover { color: var(--color-blue-600); }

.chk-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-inline-start: auto;
  font-size: 15px;
}

.chk-ways a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-block: 6px;
}

.chk-ways a:hover,
.chk-ways a[aria-current="page"] { color: var(--color-blue-600); }

/* --- Хлебные крошки: ровно два уровня ------------------------------------ */

.chk-trail {
  font-size: 14px;
  color: var(--color-text-mono);
  padding-block: 18px 0;
}

.chk-trail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chk-trail li::after {
  content: "→";
  padding-inline-start: 6px;
  color: var(--color-gray-300);
}

.chk-trail li:last-child::after { content: none; }
.chk-trail a { color: var(--color-text-secondary); text-decoration: none; }
.chk-trail a:hover { color: var(--color-blue-600); }

/* --- Заголовочный блок --------------------------------------------------- */

.chk-head { padding-block: 24px var(--chk-band); }

.chk-head h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.chk-lede {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.chk-meta {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--color-text-mono);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* --- Основной текст ------------------------------------------------------ */

.chk-body { padding-bottom: var(--chk-band); }

.chk-body h2 {
  margin: var(--chk-band) 0 var(--chk-inner);
  font-size: 25px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
}

.chk-body h3 {
  margin: 28px 0 var(--chk-inner);
  font-size: 19px;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
}

.chk-body p { margin: 0 0 var(--chk-inner); }
.chk-body p:last-child { margin-bottom: 0; }

.chk-body ul,
.chk-body ol { margin: 0 0 var(--chk-inner); padding-inline-start: 22px; }
.chk-body li { margin-bottom: 6px; }

.chk-body strong { font-weight: var(--fw-semibold); }

.chk-body hr {
  border: 0;
  border-top: var(--chk-hair);
  margin-block: var(--chk-band);
}

/* --- Кнопка-действие: единственная форма на сайте ------------------------ */

.chk-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--chk-r-act);
  background: var(--color-blue-600);
  color: var(--color-text-inverse);
  font: inherit;
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, filter 0.15s;
}

.chk-act:hover { background: var(--color-blue-700); color: var(--color-text-inverse); }
.chk-act[data-quiet] { background: transparent; color: var(--color-blue-600); box-shadow: inset 0 0 0 1px var(--chk-line); }
.chk-act[data-quiet]:hover { background: var(--color-bg-surface-highlight); color: var(--color-blue-700); }

.chk-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chk-inner);
  margin-top: 24px;
}

/* --- Пошаговый поток: карточки на соединительной линии -------------------- */

.chk-flow {
  position: relative;
  margin: var(--chk-band) 0 0;
  padding: 0 0 0 40px;
  list-style: none;
}

.chk-flow::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--chk-line);
}

.chk-step {
  position: relative;
  margin-bottom: var(--chk-step-gap);
  padding: 20px 20px 18px;
  background: var(--color-bg-surface);
  border: var(--chk-hair);
  border-radius: var(--chk-r-step);
}

.chk-step:last-child { margin-bottom: 0; }

.chk-step::before {
  content: attr(data-n);
  position: absolute;
  left: -40px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--chk-line);
  color: var(--color-text-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  display: grid;
  place-items: center;
}

.chk-step[aria-current="step"] {
  border-color: var(--color-blue-600);
  box-shadow: 0 12px 32px #0b102a12;
}

.chk-step[aria-current="step"]::before {
  background: var(--color-blue-600);
  border-color: var(--color-blue-600);
  color: var(--color-text-inverse);
}

.chk-step h2,
.chk-step h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
}

.chk-step h2 a,
.chk-step h3 a { color: inherit; text-decoration: none; }
.chk-step h2 a:hover,
.chk-step h3 a:hover { color: var(--color-blue-600); }

.chk-step p { margin: 0 0 var(--chk-inner); }
.chk-step p:last-child { margin-bottom: 0; }

.chk-clock {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text-accent);
  letter-spacing: 0.02em;
}

/* --- Живой чек-лист ------------------------------------------------------ */

.chk-tally {
  position: sticky;
  top: 3px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: var(--chk-band) 0 24px;
  padding: 12px 16px;
  background: var(--color-white);
  border: var(--chk-hair);
  border-radius: var(--chk-r-note);
  font-size: 15px;
}

.chk-tally b {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.chk-tally button {
  margin-inline-start: auto;
  padding: 6px 14px;
  border: var(--chk-hair);
  border-radius: var(--chk-r-act);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.chk-tally button:hover { color: var(--color-blue-600); border-color: var(--color-blue-600); }

.chk-set {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border: var(--chk-hair);
  border-radius: var(--chk-r-step);
  background: var(--color-bg-surface);
  overflow: hidden;
}

.chk-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  min-height: 44px;
}

.chk-item + .chk-item { border-top: var(--chk-hair); }

.chk-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--chk-r-tick);
  background: var(--color-white);
  cursor: pointer;
  position: relative;
}

.chk-item input[type="checkbox"]:checked {
  background: var(--color-blue-600);
  border-color: var(--color-blue-600);
}

.chk-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.chk-item label { cursor: pointer; font-size: 16px; line-height: 1.5; }

.chk-item[aria-checked="true"] label,
.chk-item:has(input:checked) label { color: var(--color-text-mono); }

.chk-block {
  margin: var(--chk-band) 0 0;
}

.chk-block > h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: var(--fw-semibold);
}

.chk-block > p {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-secondary);
}

/* --- Вопрос и ответ ------------------------------------------------------ */

.chk-qa {
  margin: var(--chk-band) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qa;
}

.chk-qa > li {
  padding: 22px 0;
  border-bottom: var(--chk-hair);
}

.chk-qa > li:first-child { border-top: var(--chk-hair); }

.chk-qa h2 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  counter-increment: qa;
}

.chk-qa h2::before {
  content: counter(qa) ". ";
  color: var(--color-text-mono);
  font-weight: var(--fw-medium);
}

.chk-qa p { margin: 0; }

.chk-onward {
  margin-top: 10px !important;
  font-size: 15px;
}

.chk-onward a { text-decoration: none; }
.chk-onward a:hover { text-decoration: underline; }

/* --- Вердикт и выводы ---------------------------------------------------- */

.chk-verdict {
  margin: var(--chk-band) 0 0;
  padding: 26px 24px;
  border-radius: var(--chk-r-verdict);
  background: var(--color-ink-900);
  color: var(--color-text-inverse);
}

.chk-verdict h2 {
  margin: 0 0 var(--chk-inner);
  font-size: 22px;
  font-weight: var(--fw-medium);
  color: var(--color-text-inverse);
}

.chk-verdict p { margin: 0 0 var(--chk-inner); color: #d8dce8; }
.chk-verdict p:last-child { margin-bottom: 0; }
.chk-verdict a { color: #9dc0ff; }

/* --- Врезки: оговорка, предупреждение, редакционная заметка -------------- */

.chk-note {
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: var(--chk-r-note);
  background: var(--color-bg-surface);
  border: var(--chk-hair);
  border-left: 3px solid var(--color-gray-300);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.chk-note[data-kind="pravo"] { border-left-color: var(--color-blue-600); }
.chk-note[data-kind="risk"] { border-left-color: var(--color-danger-600); background: #fff8f8; }
.chk-note[data-kind="redakciya"] { border-left-color: var(--color-success-600); background: #f7fbf8; }

.chk-note p { margin: 0 0 8px; }
.chk-note p:last-child { margin-bottom: 0; }
.chk-note b { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* --- Блок «Позиция проекта» и история правок ----------------------------- */

.chk-reply {
  margin: var(--chk-band) 0 0;
  padding: 20px;
  background: var(--color-bg-surface-highlight);
  border: 1px solid #bcd4ff;
  border-radius: var(--chk-r-step);
}

.chk-reply h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: var(--fw-semibold);
}

.chk-reply p { margin: 0 0 8px; font-size: 16px; }
.chk-reply p:last-child { margin-bottom: 0; }

.chk-log {
  margin: var(--chk-band) 0 0;
  padding: 18px 20px;
  border: var(--chk-hair);
  border-radius: var(--chk-r-note);
  background: var(--color-bg-surface-soft);
  font-size: 15px;
}

.chk-log h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: var(--fw-semibold);
}

.chk-log ol { margin: 0; padding-inline-start: 18px; color: var(--color-text-secondary); }
.chk-log li { margin-bottom: 6px; }
.chk-log time { color: var(--color-text-mono); }

/* --- Таблица: на узком экране разбирается в карточки --------------------- */

.chk-tab {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--color-bg-surface);
  border: var(--chk-hair);
  border-radius: var(--chk-r-step);
  overflow: hidden;
}

.chk-tab th,
.chk-tab td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--chk-hair);
}

.chk-tab th {
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-soft);
}

.chk-tab tr:last-child td { border-bottom: 0; }

.chk-weight {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--chk-r-act);
  font-size: 13px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.chk-weight[data-w="stop"] { background: var(--color-danger-050); color: var(--color-danger-700); }
.chk-weight[data-w="vesko"] { background: #fff2d9; color: #8a5300; }
.chk-weight[data-w="utochnit"] { background: var(--color-bg-surface-muted); color: var(--color-text-secondary); }

/* --- Переход к следующему шагу ------------------------------------------- */

.chk-next {
  display: block;
  margin: var(--chk-band) 0 0;
  padding: 18px 20px;
  border: 2px solid var(--color-blue-600);
  border-radius: var(--chk-r-step);
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
}

.chk-next:hover { background: var(--color-bg-surface-highlight); color: inherit; }
.chk-next span { display: block; font-size: 13px; color: var(--color-text-accent); letter-spacing: 0.04em; text-transform: uppercase; }
.chk-next b { display: block; margin-top: 4px; font-size: 19px; font-weight: var(--fw-semibold); }

/* --- Подвал: светлый, одноколоночный ------------------------------------- */

.chk-foot {
  margin-top: var(--chk-band);
  padding-block: 28px 36px;
  background: var(--color-white);
  border-top: var(--chk-hair);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.chk-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 16px;
  border-bottom: var(--chk-hair);
  margin-bottom: 16px;
}

.chk-foot nav a { color: var(--color-text-secondary); text-decoration: none; padding-block: 4px; }
.chk-foot nav a:hover { color: var(--color-blue-600); }

.chk-foot p { margin: 0 0 10px; line-height: 1.55; text-wrap: pretty; }
.chk-foot p:last-child { margin-bottom: 0; }

/* --- Черновик: видимая пометка на неопубликованных страницах ------------- */

.chk-raw {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--chk-r-note);
  background: #fff5e6;
  border: 1px solid #f0d8b0;
  font-size: 14px;
  color: #7a5210;
}

/* --- Мобильная раскладка -------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --chk-gutter: 16px;
    --chk-band: 28px;
    --chk-step-gap: 36px;
  }

  .chk-flow { padding-left: 30px; }
  .chk-flow::before { left: 10px; }
  .chk-step::before { left: -30px; width: 22px; height: 22px; font-size: 11px; top: 20px; }
  .chk-step { padding: 18px 16px 16px; }

  .chk-ways { margin-inline-start: 0; width: 100%; }

  .chk-tab,
  .chk-tab tbody,
  .chk-tab tr,
  .chk-tab td { display: block; width: 100%; }

  .chk-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .chk-tab tr {
    border-bottom: var(--chk-hair);
    padding: 6px 0;
  }

  .chk-tab tr:last-child { border-bottom: 0; }

  .chk-tab td { border-bottom: 0; padding: 6px 14px; }

  .chk-tab td[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-mono);
    margin-bottom: 2px;
  }
}

/* Счётчик отмеченного уезжает на левое поле, когда для него есть место. */
@media (min-width: 1100px) {
  .chk-tally {
    position: fixed;
    top: 96px;
    left: calc(50% - 560px);
    width: 220px;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .chk-tally button { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chk-gauge > i { transition: none; }
}

@media print {
  .chk-top, .chk-ways, .chk-gauge, .chk-tally button, .chk-next { display: none; }
  body { background: #fff; }
  .chk-set, .chk-step { break-inside: avoid; }
}