/* ============================================================
   SON.CSS — стили страницы-лонгрида "Распаковка бессонницы".
   Токены (цвета, шрифты, отступы) — в tokens.css.
   Общая обвязка (шапка, футер, кнопки, стикеры) — в smelost.css.
   Построено по образцу methods.css, расширено под длинный текст,
   интерактивную самопроверку и мем-вставки.
   ============================================================ */

/* Пастельные фоны глав: 10 причин, у каждой свой цвет, чтобы не сливались.
   Тона намеренно бледные: на насыщенной заливке текст тонул. Разделение
   держится не цветом фона, а светлыми подложками блоков внутри главы. */
:root {
  --tint-pink:   #FFEEF7;
  --tint-blue:   #EFF4FE;
  --tint-purple: #F4F1FF;
  --tint-peach:  #FDF2ED;
  --tint-yellow: #FEF7E4;
  --tint-mint:   #EAF5F0;
  --tint-lilac:  #F6F2FF;
  --tint-sky:    #EFF7FE;
  --tint-mauve:  #FAF2F8;
  --tint-lime:   #F5FADE;
}

/* Плавная прокрутка к якорям (уважает "меньше движения" в настройках ОС). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.sl-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 40px 20px;
}

/* ============================================================
   HERO
   ============================================================ */
.sl-hero { position: relative; margin-bottom: 40px; }
.sl-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 16px;
}
.sl-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 76px;
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  max-width: 18ch;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sl-h1 .sl-h1__hand {
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--c-pink);
  display: inline-block;
  transform: rotate(-3deg);
}
.sl-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   ВСТУПЛЕНИЕ-ИСТОРИЯ (личный рассказ Виталины)
   ============================================================ */
.sl-intro { max-width: 68ch; margin: 0 auto 40px; }
.sl-intro__p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0 0 18px;
}
.sl-intro__p em, .sl-intro__p i { font-style: italic; }
.sl-intro__p strong { font-weight: 700; }
/* Крик про сон — крупным дисплейным шрифтом, как эмоциональный пик. */
.sl-shout {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.18;
  color: var(--c-pink);
  letter-spacing: -.01em;
  margin: 26px 0;
  transform: rotate(-1deg);
  max-width: 22ch;
}
/* Врезка "я люблю психотерапию, но еще больше точную диагностику". */
.sl-credo {
  font-family: var(--font-hand);
  font-size: 30px;
  line-height: 1.25;
  color: var(--c-purple);
  text-align: center;
  margin: 30px auto;
  max-width: 24ch;
  transform: rotate(-1.5deg);
}

/* ============================================================
   САМОПРОВЕРКА (интерактивный опрос с галочками)
   ============================================================ */
.sl-check {
  background: var(--tint-purple);
  border-radius: 36px;
  padding: 40px 44px;
  margin-bottom: 44px;
  position: relative;
  overflow: hidden;
}
.sl-check__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 10px;
}
.sl-check__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
  max-width: 24ch;
}
.sl-check__intro {
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 24px;
  max-width: 62ch;
}
.sl-check__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sl-check__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .6);
  border-radius: 16px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.sl-check__item:hover { transform: translateY(-2px); }
/* Отмеченный пункт подсвечивается (:has по состоянию вложенного чекбокса). */
.sl-check__item:has(input:checked) {
  background: var(--c-white);
  box-shadow: 0 0 0 2px var(--c-purple) inset;
}
.sl-check__box {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--c-purple);
  cursor: pointer;
}
.sl-check__label {
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-ink);
  cursor: pointer;
}
/* Живой итог: обновляется скриптом при каждой галочке. */
.sl-check__result {
  font-family: var(--font-hand);
  font-size: 25px;
  line-height: 1.3;
  color: var(--c-ink);
  background: var(--c-white);
  border-radius: 20px;
  padding: 18px 24px;
  margin: 0;
  min-height: 1em;
}

/* Подсказка "с каких глав начать": появляется после галочек. */
.sl-check__count { display: block; }
.sl-check__jump {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-45);
  margin-top: 16px;
}
.sl-check__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sl-check__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
  background: var(--tint-purple);
  border-radius: 999px;
  padding: 8px 14px;
  transition: transform .16s var(--ease-bounce, ease);
}
.sl-check__link:hover { transform: translateY(-2px) rotate(-2deg); }

/* ============================================================
   ОГЛАВЛЕНИЕ (что разберем)
   ============================================================ */
.sl-nav { margin-bottom: 40px; }
.sl-nav__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 14px;
}
.sl-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--c-white);
  border: 2px solid var(--c-ink-12);
  transition: transform .16s var(--ease-bounce, ease);
}
.sl-chip:hover { transform: translateY(-3px) rotate(-2deg); }
.sl-chip__dot { width: 9px; height: 9px; border-radius: 3px; transform: rotate(12deg); background: var(--c-ink-45); }

/* ============================================================
   ГЛАВА-ПРИЧИНА (карточка)
   ============================================================ */
.sl-ch {
  position: relative;
  border-radius: 36px;
  padding: 44px 52px;
  margin-bottom: 30px;
  overflow: hidden;
  scroll-margin-top: 90px; /* чтобы якорь не уезжал под липкую шапку */
  background: var(--ch-tint, var(--c-white));
}
/* Цвет главы задается парой переменных: фон карточки + акцент (номер, иконки). */
.sl-ch--1  { --ch-tint: var(--tint-pink);   --ch-accent: var(--c-pink);   }
.sl-ch--2  { --ch-tint: var(--tint-blue);   --ch-accent: var(--c-blue);   }
.sl-ch--3  { --ch-tint: var(--tint-purple); --ch-accent: var(--c-purple); }
.sl-ch--4  { --ch-tint: var(--tint-peach);  --ch-accent: var(--c-red);    }
.sl-ch--5  { --ch-tint: var(--tint-yellow); --ch-accent: var(--c-orange); }
.sl-ch--6  { --ch-tint: var(--tint-mint);   --ch-accent: var(--c-green);  }
.sl-ch--7  { --ch-tint: var(--tint-lilac);  --ch-accent: var(--c-purple); }
.sl-ch--8  { --ch-tint: var(--tint-sky);    --ch-accent: var(--c-blue);   }
.sl-ch--9  { --ch-tint: var(--tint-mauve);  --ch-accent: var(--c-fuchsia);}
.sl-ch--10 { --ch-tint: var(--tint-lime);   --ch-accent: var(--c-green);  }
/* Чтобы чипы-якоря совпадали по цвету с главами. */
.sl-chip--1  .sl-chip__dot { background: var(--c-pink);   }
.sl-chip--2  .sl-chip__dot { background: var(--c-blue);   }
.sl-chip--3  .sl-chip__dot { background: var(--c-purple); }
.sl-chip--4  .sl-chip__dot { background: var(--c-red);    }
.sl-chip--5  .sl-chip__dot { background: var(--c-orange); }
.sl-chip--6  .sl-chip__dot { background: var(--c-green);  }
.sl-chip--7  .sl-chip__dot { background: var(--c-purple); }
.sl-chip--8  .sl-chip__dot { background: var(--c-blue);   }
.sl-chip--9  .sl-chip__dot { background: var(--c-fuchsia);}
.sl-chip--10 .sl-chip__dot { background: var(--c-green);  }

.sl-ch__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sl-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 76px;
  line-height: .8;
  color: var(--ch-accent);
}
.sl-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -.02em;
  color: var(--c-ink);
  max-width: 22ch;
  line-height: 1.02;
  /* Длинные русские слова ("гастроэзофагеальный") иначе не переносятся
     и вылезают за край экрана на узких ширинах. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* "Что это": основной абзац главы. */
.sl-whatis {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-ink);
  margin: 18px 0 26px;
  max-width: 64ch;
}
.sl-whatis strong { font-weight: 700; }
.sl-whatis + .sl-whatis { margin-top: -8px; }

/* Блок внутри главы ("Как заметить", "Что делать").
   Лежит на своей светлой подложке: на однотонной заливке главы текст и списки
   терялись, смена фона внутри карточки возвращает им читаемость. */
.sl-block {
  background: rgba(255, 255, 255, .78);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 16px;
  max-width: 72ch;
  /* Тончайший контур: фон глав стал бледнее, и без него край подложки
     теряется. Именно контур, а не более яркая заливка. */
  box-shadow: 0 0 0 1px rgba(33, 28, 46, .05);
}
/* Внутри подложки ширину держит она сама, отдельный лимит спискам не нужен. */
.sl-block .sl-symptoms,
.sl-block .sl-steps { max-width: none; }
.sl-block__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sl-block__title .sl-ic { color: var(--ch-accent); font-size: 22px; }

/* Симптомы: список с галочками-иконками. */
.sl-symptoms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 64ch;
}
/* Пункт списка НЕ флекс: иначе выделения внутри строки (курсив, жирный,
   зачеркивание) становятся отдельными флекс-элементами и текст рвется.
   Иконка выведена из потока абсолютным позиционированием. */
.sl-symptoms li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-ink);
}
.sl-symptoms .sl-ic {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ch-accent);
  font-size: 20px;
}

/* Что делать: нумерованные шаги с цветным кружком. */
.sl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 64ch;
}
/* Тоже не флекс, по той же причине: внутри шагов есть курсив и жирный. */
.sl-steps li {
  position: relative;
  padding-left: 44px;
  font-size: 16px;
  line-height: 1.5;
  min-height: 30px;
}
.sl-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ch-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Проза внутри блока (не все главы раскладываются в списки). */
.sl-block__p { font-size: 17px; line-height: 1.6; color: var(--c-ink); margin: 0 0 14px; }
.sl-block__p:last-child { margin-bottom: 0; }
/* Абзац после списка не должен липнуть к последнему пункту. */
.sl-symptoms + .sl-block__p,
.sl-steps + .sl-block__p { margin-top: 16px; }

/* Врезка-факт ("интересный факт", "отдельный привет субклиническому..."). */
.sl-fact {
  background: var(--c-white);
  border-left: 6px solid var(--ch-accent);
  border-radius: 20px;
  padding: 20px 26px;
  margin-bottom: 16px;
  max-width: 72ch;
}
.sl-fact__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ch-accent);
  margin: 0 0 8px;
}
.sl-fact p { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.sl-fact p:last-child { margin-bottom: 0; }

/* Способ диагностики внутри блока (у апноэ их три). */
.sl-way { margin-bottom: 18px; }
.sl-way:last-child { margin-bottom: 0; }
.sl-way__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 0 0 8px; }
.sl-way p { font-size: 16px; line-height: 1.55; margin: 0 0 12px; }
.sl-way p:last-child { margin-bottom: 0; }

/* Простой список через тире (перечень препаратов). */
.sl-plain { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sl-plain li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--c-ink); }
.sl-plain li::before { content: "—"; position: absolute; left: 0; color: var(--ch-accent); font-weight: 700; }

/* Реплика-подколка в сторону, рукописным. */
.sl-aside {
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ch-accent);
  margin: 20px 0;
  max-width: 44ch;
  transform: rotate(-1deg);
}

/* Финальная мораль главы. */
.sl-outro {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--c-ink);
  margin: 18px 0 0;
  max-width: 64ch;
}

/* Личная вставка Виталины — рукописным шрифтом на белой плашке. */
.sl-personal {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .78);
  border-radius: 22px;
  padding: 22px 26px;
  margin-top: 26px;
  max-width: 70ch;
}
.sl-personal__icon { color: var(--ch-accent); font-size: 30px; flex: none; margin-top: 2px; }
.sl-personal__text {
  font-family: var(--font-hand);
  font-size: 25px;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0;
}

/* Плашка "черновик" — для главы про ГЭРБ и главы про психику до правок Виталины. */
.sl-draft {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-orange);
  background: rgba(245, 121, 59, .15);
  border-radius: 999px;
  padding: 5px 12px;
  margin-top: 16px;
}

/* ============================================================
   МЕМЫ И ВРЕЗКИ
   ============================================================ */
.sl-meme { max-width: 560px; margin: 0 auto 34px; }
.sl-meme img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--sh-2, 0 10px 28px rgba(33, 28, 46, .12));
}
.sl-meme__cap {
  font-family: var(--font-hand);
  font-size: 20px;
  text-align: center;
  color: var(--c-ink-70);
  margin-top: 10px;
  transform: rotate(-1deg);
}
/* Слот-заглушка под мем, который подставим из каталога после верстки. */
.sl-meme--slot {
  min-height: 170px;
  border: 3px dashed var(--c-ink-12);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  color: var(--c-ink-45);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

/* Мем-твит, воссозданный версткой (без картинки, self-contained). */
.sl-tweet {
  max-width: 540px;
  margin: 0 auto 34px;
  background: var(--c-white);
  border-radius: 22px;
  padding: 24px 26px;
  box-shadow: var(--sh-2, 0 10px 28px rgba(33, 28, 46, .1));
  border: 2px solid var(--c-ink-12);
}
.sl-tweet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sl-tweet__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--grad-dusk, linear-gradient(135deg, var(--c-lilac), var(--c-sky)));
  flex: none;
}
.sl-tweet__name { font-weight: 700; font-size: 15px; color: var(--c-ink); }
.sl-tweet__handle { font-size: 14px; color: var(--c-ink-45); }
.sl-tweet__text { font-size: 19px; line-height: 1.5; color: var(--c-ink); margin: 0; }
.sl-tweet__note { font-size: 12px; color: var(--c-ink-45); margin: 12px 0 0; }

/* ============================================================
   ДИСКЛЕЙМЕР (я психолог, не врач)
   ============================================================ */
.sl-disclaimer {
  max-width: 70ch;
  margin: 10px auto 44px;
  background: var(--tint-yellow);
  border-radius: 24px;
  padding: 24px 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink);
}
.sl-disclaimer strong { font-weight: 700; }
.sl-disclaimer .sl-disclaimer__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 10px;
}

/* ============================================================
   ФИНАЛ + ПРИЗЫВ В КАНАЛ
   ============================================================ */
.sl-closing { text-align: center; padding: 20px 20px 40px; }
.sl-closing__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--c-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 20ch;
  margin: 0 auto 24px;
}
.sl-closing__text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 54ch;
  margin: 0 auto 28px;
}
.sl-signature {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--c-ink-70);
  margin-top: 28px;
}

/* ============================================================
   КАРТОЧКА АВТОРА (фото Виталины перед финалом)
   ============================================================ */
.sl-author {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 62ch;
  margin: 0 auto 40px;
  background: var(--c-white);
  border-radius: 32px;
  padding: 26px 32px;
  box-shadow: var(--sh-2, 0 10px 28px rgba(33, 28, 46, .08));
}
.sl-author__photo {
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
}
.sl-author__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.sl-author__role { font-size: 16px; line-height: 1.5; color: var(--c-ink-70); margin: 0; }
.sl-author__hand {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.25;
  color: var(--c-pink);
  margin: 12px 0 0;
  transform: rotate(-1.5deg);
}

/* ============================================================
   АДАПТИВ (по образцу methods.css)
   ============================================================ */
@media (max-width: 1040px) {
  .sl-h1 { padding-right: 0; }
}
@media (max-width: 760px) {
  .sl-main { padding-left: 20px; padding-right: 20px; }
  .sl-h1 { font-size: 52px; }
  .sl-num { font-size: 60px; }
  .sl-title { font-size: 28px; }
  .sl-ch { padding: 30px 22px; }
  .sl-check { padding: 30px 22px; }
  .sl-closing__quote { font-size: 32px; }
  .sl-author { flex-direction: column; text-align: center; gap: 18px; padding: 26px 22px; }
}
@media (max-width: 420px) {
  .sl-h1 { font-size: 40px; }
  .sl-num { font-size: 52px; }
  .sl-title { font-size: 24px; }
  .sl-ch { padding: 26px 18px; }
  .sl-chips { flex-direction: column; align-items: stretch; }
  .sl-closing__quote { font-size: 26px; hyphens: manual; }
}