/* ============================================================================
   ДЛИННЫЕ ПУБЛИЧНЫЕ СТРАНИЦЫ — static/css/pages/long.css (18.10.2026)
   Хабы /dlya/, образцы /obrazcy/, витрина и статьи /obuchenie/, главная. На телефоне они были по 13–35 экранов,
   главное действие уходило далеко вниз. Текст — то, за чем приходят из поиска, поэтому он весь остаётся в HTML;
   сокращается подача: оглавление, свёрнутые разделы (<details>), «Читать дальше», «Показать все» у длинных
   списков, кнопки в конце длинных разделов и плотнее отступы на телефоне. Скрипт — static/js/long-pages.js.
   Подключается после public.css / learning.css и только на этих страницах — кабинет не затронут.
   ========================================================================== */

/* ---------- 1. Оглавление «На странице» ---------- */
.pub-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; min-width: 0; }
.pub-toc__label { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); margin-right: 2px; }
.pub-toc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink-2); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.pub-toc__link:hover { border-color: var(--ui-primary-line); color: var(--ui-ink); text-decoration: none; }
.pub-toc__link:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.pub-toc__link--accent { border-color: var(--ui-primary-line); background: var(--ui-primary-tint); color: var(--ui-primary-deep); font-weight: 600; }

/* ---------- 2. Свёрнутый раздел: заголовок раздела виден, тело — по нажатию ---------- */
.pub-fold { min-width: 0; }
.pub-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; list-style: none; }
.pub-fold > summary::-webkit-details-marker { display: none; }
.pub-fold > summary:hover { border-color: var(--ui-primary-line); color: var(--ui-primary-deep); }
.pub-fold > summary:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.pub-fold__chevron { flex: none; margin-left: auto; color: var(--ui-muted); transition: transform .15s ease; }
.pub-fold[open] > summary { margin-bottom: var(--ui-s4); }
.pub-fold[open] > summary .pub-fold__chevron { transform: rotate(180deg); }
.pub-fold__body { display: grid; gap: var(--ui-s3); min-width: 0; }
.pub-section--band .pub-fold > summary { background: var(--ui-paper); }

/* Свёрнуто только на телефоне и планшете (data-open-wide): на компьютере раздел раскрыт, строки «Показать …» нет —
   страница выглядит как до 18.10.2026. Браузеры с ::details-content (Chrome 131+, Safari 18.4+) показывают содержимое
   стилем сразу, без скрипта — вступление в первом экране не «прыгает» при загрузке; остальные раскрывает long-pages.js. */
@media (min-width: 901px) {
  details[data-open-wide][open] > summary { display: none; }
  @supports selector(::details-content) {
    details[data-open-wide] > summary { display: none; }
    details[data-open-wide]::details-content { content-visibility: visible; }
  }
}

/* ---------- 3. «Читать дальше»: первый абзац виден, остальные — по нажатию, кнопка после этого прячется ---------- */
.pub-more { min-width: 0; }
.pub-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ui-link); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.pub-more > summary::-webkit-details-marker { display: none; }
.pub-more > summary:hover { text-decoration: underline; }
.pub-more > summary:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; border-radius: 6px; }
.pub-more > summary .ui-icon { width: 16px; height: 16px; }
.pub-more[open] > summary { display: none; }
.pub-more__body { display: grid; gap: var(--ui-s4); min-width: 0; outline: none; }
.pub-more__body > p { margin: 0; }
.pub-prose > .pub-more { margin-top: calc(-1 * var(--ui-s2)); }
/* «Читать раздел» сразу под шапкой раздела — без лишнего зазора шапки (32px). */
.pub-head + .pub-more { margin-top: calc(-1 * var(--ui-s5)); }

/* ---------- 4. «Показать все» (кнопку вставляет long-pages.js) ---------- */
.pub-limit-more { margin-top: var(--ui-s3); }
.pub-limit-more::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pub-limit-more + * { margin-top: var(--ui-s3); }

/* Обёртка блока документов в хабе (для «Показать все»): секция внутри — как прямая секция колонки, без своих 64px. */
.pub-layout__main > .pub-promo-wrap { min-width: 0; }
.pub-promo-wrap > .pub-section { padding: 0; }

/* ---------- 5. Кнопки в конце длинного раздела ---------- */
.pub-section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2) var(--ui-s4); margin: var(--ui-s5) 0 0; }
/* Кнопка предложения переносится по словам, как .pub-offer__btn (иначе «… — 99 ₽» шире экрана телефона). */
.pub-section-cta .ui-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }

/* ---------- 6. Боковая колонка хаба и образца: на телефоне (она там под статьёй) — одной свёрнутой строкой ----------
   Это .pub-fold с data-open-wide: на компьютере колонка липкая и раскрыта, строка свёртки не показывается; без скрипта
   её можно раскрыть нажатием. */
.pub-side-fold__body { display: grid; gap: var(--ui-s5); min-width: 0; }

/* ---------- 7. Телефон: плотнее отступы, карточки и таблицы (только публичные страницы этого файла) ---------- */
@media (max-width: 700px) {
  .pub-toc { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--ui-page-x)); padding: 2px var(--ui-page-x); scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .pub-toc::-webkit-scrollbar { display: none; }
  .pub-toc::after { content: ""; flex: none; width: 16px; height: 1px; }
  .pub-toc__label, .pub-toc__link { flex: none; }
  .pub-toc__link { min-height: 40px; }

  .pub-fold > summary { padding: 10px 14px; font-size: 14.5px; }
  .pub-limit-more { width: 100%; }
  .pub-section-cta { margin-top: var(--ui-s4); }
  .pub-section-cta .ui-btn { flex: 1 1 100%; }

  /* Ритм страницы: секции колонки 24px вместо 32, шапка раздела 16px вместо 24, заголовок раздела 22px. */
  .pub-layout { padding-bottom: var(--ui-s10); gap: var(--ui-s8); }
  .pub-layout__main { gap: var(--ui-s6); }
  .pub-head { gap: 6px; margin-bottom: var(--ui-s4); }
  .pub-head__title { font-size: 22px; }
  .pub-head__text { font-size: 15px; line-height: 1.5; }
  .pub-prose, .pub-prose--lg { font-size: 16px; line-height: 1.55; }
  .pub-prose p { margin-bottom: var(--ui-s3); }
  .pub-layout .pub-layout__main > .pub-section--band, .pub-layout .pub-layout__main > .pub-section.pub-section--band { padding: var(--ui-s4); }
  .pub-layout .pub-layout__main > .pub-section--band .pub-head { margin-bottom: var(--ui-s3); }

  /* Первый экран образца и хаба: лид 16px, XLSX — в одной строке со «Скачать бланк PDF» (раньше — отдельной строкой). */
  .pub-detail__copy { gap: var(--ui-s3); }
  .pub-detail__lead { font-size: 16px; line-height: 1.5; }
  .pub-blank-links { flex-wrap: nowrap; }
  .pub-detail__copy .pub-blank-links .ui-btn--primary { width: auto; flex: 1 1 auto; min-width: 0; }
  .pub-blank-links .ui-btn--ghost { flex: none; }
  .pub-detail__copy .ui-hint, .pub-detail__copy .pub-hero__note { font-size: var(--ui-fs-sm); line-height: 1.45; }
  .pub-hero__actions > .pub-offer { padding: var(--ui-s3); }

  /* «Кто ведёт и как часто», «Что бесплатно» и т. п.: значок слева от заголовка, а не над ним. */
  .pub-features { gap: var(--ui-s4); }
  .pub-features .ui-feature { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
  .pub-features .ui-feature__icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; }
  .pub-features .ui-feature__icon .ui-icon { width: 20px; height: 20px; }
  .pub-features .ui-feature__title { align-self: center; }

  /* Шаги «Как подготовиться к проверке» — номер поменьше, текст плотнее. */
  .pub-steps--list { gap: var(--ui-s4); }
  .pub-steps--list > li { column-gap: 12px; }
  .pub-steps--list .pub-steps__n { width: 28px; height: 28px; font-size: 13px; }
  .pub-steps--list .pub-steps__text { font-size: 15px; line-height: 1.5; }

  .pub-topics { gap: var(--ui-s2); }
  .pub-topic { padding: 12px 14px; gap: 4px; }
  .pub-norms > div { padding: 12px 14px; }
  .pub-who__col { padding: var(--ui-s4); }
  .pub-cta { padding: var(--ui-s5) var(--ui-s4); gap: var(--ui-s4); }
  .pub-faq summary { min-height: 48px; padding: 12px 0; font-size: 15px; }
  .pub-faq__body { font-size: 15px; }
  .pub-side-list .ui-row { min-height: 48px; padding: 6px 12px; }
  .pub-layout__side { gap: var(--ui-s4); }
  .pub-training__links { gap: 0 var(--ui-s5); margin: var(--ui-s3) 0 var(--ui-s2); }
  .pub-training__links .ui-link { min-height: 40px; }
  .pub-training__lesson { grid-template-columns: 96px minmax(0, 1fr); padding: 10px; gap: var(--ui-s3); }
  .docs-grid--compact { gap: var(--ui-s2); }
  .docs-card--mini .ui-card__body { padding: 12px 14px; }
  .docs-card--mini .docs-card__title { font-size: 15px; }

  /* Таблицы-карточки (набор журналов хаба, графы формы, штрафы): подпись — в строку перед значением («Кто ведёт: …»),
     а не колонкой 104px слева. «ПРОЦЕСС ОБЯЗАТЕЛЕН» и «СРОК ХРАНЕНИЯ» в узкой колонке шли в две строки, карточка
     журнала набора занимала 260px, теперь — около 180px. Текст и подписи те же (data-label). */
  .pub-table-wrap .ui-table--cards td { display: block; padding: 2px 14px; font-size: 14px; line-height: 1.45; }
  .pub-table-wrap .ui-table--cards td::before { content: attr(data-label) ": "; display: inline; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-muted); }
  .pub-table-wrap .ui-table--cards td.ui-table__primary { padding-top: 10px; padding-bottom: 4px; font-size: 15px; }
  .pub-table-wrap .ui-table--cards td.ui-table__primary::before { content: none; display: none; }
  .pub-table-wrap .ui-table--cards td[data-label=""]::before { content: none; display: none; }
  .pub-table-wrap .ui-table--cards td .ui-badge { vertical-align: 1px; }
  .pub-table-wrap .ui-table--cards tr { padding: 2px 0 10px; }

  /* Образец заполнения — настоящей таблицей с прокруткой вбок, как у детских страниц хабов (.pub-form-table):
     карточками три записи занимали полтора экрана, а так виден разворот журнала целиком. */
  .pub-sample.ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pub-sample .ui-table--cards { display: table; min-width: 720px; }
  .pub-sample .ui-table--cards thead { display: table-header-group; }
  .pub-sample .ui-table--cards tbody { display: table-row-group; }
  .pub-sample .ui-table--cards tr { display: table-row; padding: 0; border: 0; border-radius: 0; margin: 0; background: transparent; }
  .pub-sample .ui-table--cards th, .pub-sample .ui-table--cards td { display: table-cell; padding: 8px 10px; font-size: 13.5px; line-height: 1.35; vertical-align: top; border-bottom: 1px solid var(--ui-line) !important; }
  .pub-sample .ui-table--cards th { white-space: normal; font-size: 11px; vertical-align: bottom; }
  .pub-sample .ui-table--cards th, .pub-sample .ui-table--cards td { min-width: 104px; }
  .pub-sample .ui-table--cards th:first-child, .pub-sample .ui-table--cards td:first-child { min-width: 0; }
  .pub-sample .ui-table--cards td::before { content: none; display: none; }
  .pub-sample .ui-table--cards td.ui-table__primary { font-size: 13.5px; padding-top: 8px; white-space: nowrap; }
  .pub-sample .ui-table--cards tr.is-bad td { background: var(--ui-bad-bg) !important; }
  .pub-sample .ui-table--cards tr.is-bad { box-shadow: none; }
  .pub-sample .ui-table--cards td.pub-sample__status { white-space: nowrap; }
  /* Последняя графа обычно длинная («Корректирующие действия», «Примечание») — шире, чтобы строка отклонения не
     вытягивалась в десять строк по 70px. */
  .pub-sample .ui-table--cards th:last-child, .pub-sample .ui-table--cards td:last-child { min-width: 220px; }
}

/* ---------- 8. Витрина обучения /obuchenie/ ---------- */
/* Три цены с оплатой под кнопками героя: команда — к калькулятору, сертификат и Личный курс — на оформление. */
.lr-quick { display: grid; margin-top: var(--ui-s1); max-width: 560px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); overflow: hidden; }
.lr-quick__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 14px; min-height: 52px; padding: 8px 14px; border-top: 1px solid var(--ui-line); color: var(--ui-ink); text-decoration: none; }
.lr-quick__row:first-child { border-top: 0; }
.lr-quick__row:hover { background: var(--ui-surface-2); color: var(--ui-ink); text-decoration: none; }
.lr-quick__row:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: -3px; }
.lr-quick__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lr-quick__price { font-size: 14px; font-weight: 600; color: var(--ui-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-quick__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ui-link); white-space: nowrap; }
.lr-quick__row:hover .lr-quick__cta { text-decoration: underline; }
.lr-quick--end { margin-top: var(--ui-s5); }
.lr-fold > summary { background: var(--ui-surface); }
.lr-fold[open] > summary { margin-bottom: var(--ui-s4); }
.lr-page .pub-limit-more { justify-self: start; }

@media (max-width: 700px) {
  .lr-quick__row { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding: 8px 12px; }
  .lr-quick__price { grid-column: 1; grid-row: 2; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
  .lr-quick__cta { grid-column: 2; grid-row: 1 / span 2; }

  /* Ритм витрины, статей и посадочных обучения: заголовок первого экрана и лид — чуть меньше, разделы — плотнее. */
  .lr-page > * + * { margin-top: var(--ui-s6); }
  .lr-hero .ui-display, .lr-landing-head .ui-display { font-size: 26px; line-height: 1.15; }
  .lr-hero .ui-lead, .lr-landing-head .ui-lead { font-size: 16px; line-height: 1.5; }
  .lr-hero__copy { gap: var(--ui-s3); }
  .lr-page .ui-section__title { font-size: 21px; }
  .lr-section-lead { font-size: 15px; line-height: 1.5; }
  .lr-door { gap: 4px 12px; }
  .lr-door__text { font-size: 14px; line-height: 1.45; }
  .lr-pcard { padding: var(--ui-s4); gap: var(--ui-s3); }
  .lr-included li { font-size: 14px; }
  .lr-cat { padding: 12px 14px; gap: 8px 12px; }
  .lr-plan__head { padding: var(--ui-s4) var(--ui-s4) var(--ui-s2); }
  .lr-plan__prices { padding: 0 var(--ui-s4) var(--ui-s3); }
  .lr-plan__limit { padding: 8px var(--ui-s4); }
  .lr-plan__actions { padding: var(--ui-s3) var(--ui-s4) var(--ui-s4); }
  .lr-plan__price .ui-price { font-size: 24px; }
  .lr-faq summary { min-height: 48px; }
  .lr-value__card { padding: var(--ui-s4); }
  /* «Что входит в обучение» — значок слева от заголовка, как «Кто ведёт» на образцах. */
  .lr-page .ui-grid--4 > .ui-feature { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .lr-page .ui-grid--4 > .ui-feature .ui-feature__icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; }
  .lr-page .ui-grid--4 > .ui-feature .ui-feature__icon .ui-icon { width: 20px; height: 20px; }
  .lr-page .ui-grid--4 > .ui-feature .ui-feature__title { align-self: center; }
  .lr-page .ui-grid--4 { gap: var(--ui-s4); }
  .lr-value__price { font-size: 26px; }
}

/* ---------- 9. Главная для гостя ---------- */
@media (max-width: 700px) {
  /* «Как это работает» — значок слева от шага, как признаки (52px-значок над каждым шагом давал по 200px на шаг). */
  .pub-steps:not(.pub-steps--list) { gap: var(--ui-s5); }
  .pub-steps:not(.pub-steps--list) > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
  .pub-steps:not(.pub-steps--list) .pub-steps__icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; }
  .pub-steps:not(.pub-steps--list) .pub-steps__icon .ui-icon { width: 22px; height: 22px; }
  .pub-steps:not(.pub-steps--list) .pub-steps__title { align-self: center; }
  .pub-steps:not(.pub-steps--list) .pub-steps__text { font-size: 15px; line-height: 1.5; }
  .pub-makers { gap: var(--ui-s5); }
  .pub-makers > div { padding-top: var(--ui-s3); }
  .pub-hero .pub-hero__text { font-size: 16px; }
  .pub-hub-list .ui-row__meta { font-size: var(--ui-fs-sm); line-height: 1.4; }
}