/* Раздел «Полезное» — детальная страница статьи.
   Шапка, карточки и метаданные наследуются из стиля списка (poleznoe.list). */
.poleznoe-progress{position:fixed;left:0;top:0;height:3px;z-index:60;width:var(--pz-p,0%);
  background:linear-gradient(90deg,#3d62eb,#f81255);transition:width .08s linear}

/* Шапка статьи использует ОБЫЧНЫЙ контейнер (1200), иначе её левый край
   разъезжается с текстом статьи ниже. Длину строки ограничиваем внутри. */
.poleznoe-hero--article .poleznoe-hero__crumbs,
.poleznoe-hero--article .poleznoe-hero__title,
.poleznoe-hero--article .poleznoe-hero__meta{max-width:860px}
/* Макет детальной задаёт свои размеры шапки — они отличаются от списка. */
.poleznoe-hero--article .poleznoe-hero__body{padding-block:22px 30px}
.poleznoe-hero--article .poleznoe-hero__title{font-size:clamp(27px,4.2vw,42px);
  margin:12px 0 14px;line-height:1.1}
.poleznoe-hero--article .poleznoe-hero__lead{font-size:16.5px;max-width:62ch}
.poleznoe-hero--article .poleznoe-hero__meta{font-size:13.5px;gap:8px 18px}
.poleznoe-article__rubric{display:inline-block;margin:14px 0 0;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;background:#fff;color:#3d62eb;
  padding:7px 12px;border-radius:30px;text-decoration:none}
.poleznoe-hero__meta{margin-top:18px;opacity:0;transform:translateY(12px);
  animation:pzFade .7s cubic-bezier(.16,1,.3,1) .4s forwards}

/* ---------- раскладка: текст и оглавление ---------- */
/* Внешний отступ колонки удлиняет строку сетки ровно до линии над шерингом:
   липкое оглавление останавливается на ней, а не уезжает к подвалу. Именно
   margin, а не padding сетки: элементы кладутся в контентную коробку, и
   padding область липкости не расширяет. */
.poleznoe-article{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:52px;
  padding-block:38px 0;align-items:start}
.poleznoe-article__main{margin-bottom:34px}
/* Отступ над линией даёт padding сетки, поэтому свой margin у шеринга снимаем,
   иначе просвет удвоится. */
.poleznoe-after{max-width:720px}
.poleznoe-after .poleznoe-share{margin-top:0}
/* У сетки ровно два ребёнка: колонка контента и оглавление. Текст, форма и
   шеринг лежат внутри колонки — иначе автораскладка растаскивает их по ячейкам. */
.poleznoe-article__main{min-width:0;max-width:720px}
.poleznoe-article__text{min-width:0}

/* ---------- типографика лонгрида ---------- */
.poleznoe-article__text p{margin:0 0 18px;font-size:17px;line-height:1.68}
.poleznoe-article__text h2{font-size:clamp(21px,2.4vw,27px);font-weight:700;color:#2e2e2e;
  letter-spacing:-.02em;margin:38px 0 14px;line-height:1.22;scroll-margin-top:80px}
.poleznoe-article__text h3{font-size:19px;font-weight:600;color:#2e2e2e;margin:26px 0 10px;
  line-height:1.3;scroll-margin-top:80px}
/* Глобальный сброс сайта ставит list-style:none, из-за этого пропадали
   маркеры и нумерация шагов. Возвращаем. */
.poleznoe-article__text ul,.poleznoe-article__text ol{margin:0 0 20px;padding-left:22px}
.poleznoe-article__text ul{list-style:disc}
.poleznoe-article__text ol{list-style:decimal}
.poleznoe-article__text li{margin-bottom:9px;font-size:17px;line-height:1.62}
.poleznoe-article__text li::marker{color:#3d62eb}
.poleznoe-article__text a{color:#3d62eb;border-bottom:1px solid #d8dffb;text-decoration:none;transition:.15s}
.poleznoe-article__text a:hover{border-bottom-color:#3d62eb;background:#f3f7ff}
.poleznoe-article__text strong{color:#2e2e2e;font-weight:600}
.poleznoe-article__text img{max-width:100%;height:auto;border-radius:10px;margin:6px 0 22px}
.poleznoe-article__text table{border-collapse:collapse;width:100%;min-width:520px}
.poleznoe-article__text table th,.poleznoe-article__text table td{padding:12px 15px;text-align:left;
  border-bottom:1px solid #e3e7ec;font-size:15px;vertical-align:top}
.poleznoe-article__text table thead th{background:#eef1f5;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:#7a8593;font-weight:600}
/* обёртку добавляет скрипт, чтобы широкая таблица скроллилась сама, а не тянула страницу */
.poleznoe-table-scroll{overflow-x:auto;margin:0 0 24px;border:1px solid #e3e7ec;border-radius:10px;background:#fff}

/* ---------- оглавление ---------- */
.poleznoe-toc{position:sticky;top:24px;border-left:2px solid #e3e7ec;padding-left:18px}
.poleznoe-toc__label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a8593;
  margin-bottom:14px;font-weight:600}
.poleznoe-toc__toggle{display:none}
.poleznoe-toc__link{display:block;font-size:14px;line-height:1.4;color:#7a8593;padding:7px 0 7px 18px;
  margin-left:-20px;border-left:2px solid transparent;text-decoration:none;transition:.15s}
.poleznoe-toc__link:hover{color:#3d62eb}
.poleznoe-toc__link.is-active{color:#3d62eb;font-weight:600;border-left-color:#3d62eb}
.poleznoe-toc__link--h3{padding-left:30px;font-size:13.5px}

.poleznoe-related{padding:44px 0 60px}
.poleznoe-related__title{margin:0 0 20px}

@media (width<=1024px){
  .poleznoe-article{grid-template-columns:minmax(0,1fr);gap:0}
  .poleznoe-article__main{max-width:none}
  /* в разметке оглавление идёт после текста ради порядка чтения — поднимаем наверх */
  .poleznoe-toc{order:-1;position:static;border-left:0;padding:0;margin:0 0 28px;
    background:#fff;border:1px solid #e3e7ec;border-radius:10px;overflow:hidden}
  .poleznoe-toc__label{display:none}
  .poleznoe-toc__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;
    gap:10px;font-size:14px;font-weight:600;color:#2e2e2e;background:transparent;border:0;
    padding:15px 18px;cursor:pointer}
  .poleznoe-toc__toggle svg{transition:transform .25s;color:#7a8593}
  .poleznoe-toc.is-open .poleznoe-toc__toggle svg{transform:rotate(180deg)}
  .poleznoe-toc__list{display:none;padding:0 18px 14px}
  .poleznoe-toc.is-open .poleznoe-toc__list{display:block}
  .poleznoe-toc__link{margin-left:0;padding-left:12px;border-left:2px solid #e3e7ec}
}
@media (width<=768px){
  .poleznoe-article__text p,.poleznoe-article__text li{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .poleznoe-progress{transition:none}
  .poleznoe-hero__meta{opacity:1!important;transform:none!important}
}