/*
 * Скрытый текст (спойлер) в статьях: <span class="b-post-spoiler">…</span>.
 * Разметку ставит кнопка «Спойлер» редактора статьи (sobaka-v2), раскрытие по клику — блок SobakaSpoiler в www/js/Post.js.
 *
 * Скрытие ограничено контейнером статьи .b-post-view (общий для десктопной и мобильной тем): только там подключён Post.js,
 * который умеет раскрывать. В любом другом месте сайта такой span остаётся обычным видимым текстом.
 */
.b-post-view .b-post-spoiler {
  border-radius: 4px;
  transition: color .3s, background-color .3s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* «Пыль» вместо текста, как в Telegram: тайл 64x32 со случайными точками в два слоя разного масштаба, чтобы узор не читался */
.b-post-view .b-post-spoiler:not(.b-post-spoiler--revealed) {
  --b-post-spoiler-dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cg fill='%23222'%3E%3Ccircle cx='39.9' cy='23.7' r='0.84' opacity='0.96'/%3E%3Ccircle cx='47.4' cy='29.5' r='0.42' opacity='0.65'/%3E%3Ccircle cx='60.4' cy='20.8' r='0.9' opacity='0.42'/%3E%3Ccircle cx='30.0' cy='7.9' r='0.7' opacity='0.72'/%3E%3Ccircle cx='0.8' cy='6.9' r='0.55' opacity='0.95'/%3E%3Ccircle cx='49.0' cy='5.1' r='0.84' opacity='0.44'/%3E%3Ccircle cx='39.5' cy='4.1' r='0.4' opacity='0.92'/%3E%3Ccircle cx='13.4' cy='6.9' r='0.94' opacity='0.92'/%3E%3Ccircle cx='18.5' cy='30.8' r='0.7' opacity='0.79'/%3E%3Ccircle cx='13.1' cy='30.1' r='0.78' opacity='0.98'/%3E%3Ccircle cx='57.2' cy='9.6' r='0.6' opacity='0.46'/%3E%3Ccircle cx='9.3' cy='2.1' r='0.57' opacity='0.74'/%3E%3Ccircle cx='0.2' cy='21.7' r='0.59' opacity='0.55'/%3E%3Ccircle cx='52.4' cy='15.4' r='0.57' opacity='0.66'/%3E%3Ccircle cx='45.1' cy='1.8' r='0.94' opacity='0.36'/%3E%3Ccircle cx='48.0' cy='27.0' r='0.41' opacity='0.86'/%3E%3Ccircle cx='23.4' cy='18.5' r='0.4' opacity='0.38'/%3E%3Ccircle cx='11.6' cy='30.6' r='0.51' opacity='0.84'/%3E%3Ccircle cx='59.5' cy='30.1' r='0.59' opacity='0.58'/%3E%3Ccircle cx='33.6' cy='24.8' r='0.46' opacity='0.84'/%3E%3Ccircle cx='51.0' cy='27.5' r='0.42' opacity='0.96'/%3E%3Ccircle cx='5.8' cy='10.9' r='0.74' opacity='0.95'/%3E%3Ccircle cx='21.8' cy='29.6' r='0.7' opacity='0.55'/%3E%3Ccircle cx='20.3' cy='5.7' r='0.44' opacity='0.45'/%3E%3Ccircle cx='44.1' cy='31.9' r='0.49' opacity='0.38'/%3E%3Ccircle cx='63.1' cy='17.1' r='0.62' opacity='0.5'/%3E%3Ccircle cx='38.0' cy='26.4' r='0.65' opacity='0.62'/%3E%3Ccircle cx='3.6' cy='29.3' r='0.42' opacity='0.67'/%3E%3Ccircle cx='53.7' cy='4.2' r='0.8' opacity='0.97'/%3E%3Ccircle cx='40.3' cy='25.2' r='0.46' opacity='0.63'/%3E%3Ccircle cx='9.6' cy='27.0' r='0.56' opacity='0.64'/%3E%3Ccircle cx='64.0' cy='27.3' r='0.94' opacity='0.64'/%3E%3Ccircle cx='31.2' cy='23.3' r='0.66' opacity='0.54'/%3E%3Ccircle cx='25.8' cy='4.7' r='0.61' opacity='0.99'/%3E%3Ccircle cx='61.4' cy='20.1' r='0.67' opacity='0.57'/%3E%3Ccircle cx='5.7' cy='8.7' r='0.83' opacity='0.91'/%3E%3Ccircle cx='23.1' cy='25.2' r='0.83' opacity='0.8'/%3E%3Ccircle cx='42.5' cy='24.3' r='0.6' opacity='0.81'/%3E%3Ccircle cx='18.0' cy='15.5' r='0.82' opacity='0.8'/%3E%3Ccircle cx='18.8' cy='30.3' r='0.76' opacity='0.73'/%3E%3Ccircle cx='0.7' cy='17.5' r='0.54' opacity='0.79'/%3E%3Ccircle cx='29.6' cy='26.1' r='0.76' opacity='0.87'/%3E%3Ccircle cx='22.3' cy='20.6' r='0.81' opacity='0.89'/%3E%3Ccircle cx='22.4' cy='27.0' r='0.88' opacity='0.8'/%3E%3Ccircle cx='62.5' cy='30.6' r='0.68' opacity='0.69'/%3E%3Ccircle cx='10.6' cy='26.8' r='0.92' opacity='0.66'/%3E%3Ccircle cx='44.3' cy='23.0' r='0.8' opacity='0.46'/%3E%3Ccircle cx='49.9' cy='18.6' r='0.77' opacity='0.62'/%3E%3Ccircle cx='39.9' cy='24.8' r='0.75' opacity='0.82'/%3E%3Ccircle cx='1.8' cy='5.1' r='0.64' opacity='0.77'/%3E%3Ccircle cx='14.0' cy='22.0' r='0.75' opacity='0.38'/%3E%3Ccircle cx='30.2' cy='7.2' r='0.43' opacity='0.44'/%3E%3Ccircle cx='20.3' cy='5.8' r='0.51' opacity='0.37'/%3E%3Ccircle cx='29.8' cy='12.2' r='0.74' opacity='0.73'/%3E%3Ccircle cx='15.2' cy='28.9' r='0.4' opacity='0.61'/%3E%3Ccircle cx='17.8' cy='13.1' r='0.46' opacity='0.89'/%3E%3Ccircle cx='23.9' cy='1.2' r='0.74' opacity='0.41'/%3E%3Ccircle cx='34.9' cy='10.9' r='0.72' opacity='0.97'/%3E%3C/g%3E%3C/svg%3E");

  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: rgba(0, 0, 0, .07);
  background-image: var(--b-post-spoiler-dust), var(--b-post-spoiler-dust);
  background-size: 64px 32px, 46px 23px;
  background-position: 0 0, 17px 9px;
}

/* Пока спойлер закрыт, содержимое не должно ни читаться, ни нажиматься (ссылки, жирный и т.п. внутри) */
.b-post-view .b-post-spoiler:not(.b-post-spoiler--revealed),
.b-post-view .b-post-spoiler:not(.b-post-spoiler--revealed) * {
  color: transparent !important;
  text-decoration-color: transparent !important;
}

.b-post-view .b-post-spoiler:not(.b-post-spoiler--revealed) * {
  pointer-events: none;
}

.b-post-view .b-post-spoiler:not(.b-post-spoiler--revealed) img {
  filter: blur(16px);
}

.b-post-view .b-post-spoiler:focus-visible {
  outline: 2px solid #ca0f09; /* $primary-brand-color */
  outline-offset: 2px;
}