/* Документы под вас (этап 4, 26.09.2026): каталог, форма, страница заказа, предпросмотр с водяным знаком.
   Базовые токены и компоненты — ui.css, публичные секции — pages/public.css. */
.docs-steps { margin: 0 0 var(--ui-s6); padding-left: 22px; display: grid; gap: var(--ui-s3); font-size: 16px; line-height: 1.55; max-width: 72ch; }
.docs-steps--compact { font-size: 14.5px; gap: var(--ui-s2); margin: 0; }
.docs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: var(--ui-s8); align-items: start; }
.docs-two--checkout { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 420px); }
.docs-two--files { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 380px); }
.docs-facts h3 { font-size: 17px; margin: var(--ui-s6) 0 var(--ui-s2); }
.docs-facts ul { margin: 0 0 var(--ui-s3); padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ui-ink-2); }
/* Форма документа (17.10.2026, скриншот владельца): раньше — карточка в узкой правой колонке (460px) с рамкой у каждой
   группы: поля по 156px, подписи в три строки, обрезанные подсказки. Теперь форма — основная колонка страницы,
   группы разделены линией без рамок, поля в строке выровнены по подписи, полю и подсказке (subgrid). */
.docs-form .ui-form { display: block; }
.docs-form .ui-form > .ui-notice { margin: 0 0 var(--ui-s4); }
.docs-fieldset { border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; padding: var(--ui-s6) 0; margin: 0; display: grid; gap: var(--ui-s4); min-width: 0; }
/* float — чтобы legend была обычной строкой внутри группы, а не врезкой в рамку. */
.docs-fieldset legend { float: left; width: 100%; padding: 0; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--ui-ink); }
.docs-fieldset__note { margin: -8px 0 0; font-size: var(--ui-fs-sm); line-height: 1.45; color: var(--ui-muted); max-width: 62ch; }
.docs-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s4); }
@media (min-width: 961px) {
  @supports (grid-template-rows: subgrid) {
    /* Подпись, поле, подсказка и ошибка — четыре общих ряда на оба поля строки: поля ввода стоят на одной высоте,
       даже если одна подпись переносится на вторую строку. */
    .docs-form__row { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .docs-form__row > .ui-field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; }
  }
}
.docs-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.docs-form__consent { padding: var(--ui-s4) 0 var(--ui-s2); border-top: 1px solid var(--ui-line); }
.docs-form__consent .ui-check { font-size: 14.5px; color: var(--ui-ink-2); }
.docs-form__submit { padding-top: var(--ui-s3); }
.docs-form__legal { display: block; margin: var(--ui-s3) 0 0; max-width: 62ch; }
.docs-form__sheet { display: none; }

/* Шапка страницы документа и рабочая область «форма + живой лист» (17.10.2026). */
.docs-hero { padding-bottom: var(--ui-s8); }
.docs-hero__copy { max-width: 980px; }
/* «Документ под вас · DOCX + PDF» переносится: на узком телефоне (320px) строка капителью была шире экрана. */
.docs-hero .ui-eyebrow { white-space: normal; }
.docs-hero__facts { display: flex; flex-wrap: wrap; gap: var(--ui-s3) var(--ui-s8); }
.docs-hero__facts dd { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.docs-hero__facts .docs-hero__price dd { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.docs-work { padding-top: var(--ui-s8); }
.docs-work__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--ui-s8) var(--ui-s12); align-items: start; }
.docs-work__main { min-width: 0; max-width: 760px; }
.docs-work__head { padding-bottom: var(--ui-s5); }
.docs-work__head .pub-head__title { margin: 0 0 6px; }
.docs-work__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ui-ink-2); max-width: 62ch; }
.docs-work__main > .ui-notice { margin: 0 0 var(--ui-s5); }
.docs-work__aside { display: grid; gap: var(--ui-s4); min-width: 0; }
/* Ноутбуки 961–1180px: правая колонка уже — основной колонке формы нужна ширина, иначе поля в строке по 240px. */
@media (min-width: 961px) and (max-width: 1180px) { .docs-work__grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--ui-s8); } }
/* Липкая правая колонка — только когда она целиком помещается в экран: на ноутбуке 1366×768 низ колонки с кнопкой
   иначе уходил бы за край. */
@media (min-width: 961px) and (min-height: 760px) { .docs-work__aside { position: sticky; top: 84px; } }

/* Живой лист: верх документа на белой бумаге, шрифт документа. Пустое — серым курсивом, введённое — маркером. */
.docs-sheet { margin: 0; display: grid; gap: 10px; }
.docs-sheet__paper { position: relative; background: #fff; border: 1px solid var(--ui-line); border-radius: 3px; padding: 24px 26px 22px; box-shadow: 0 1px 0 rgba(29, 28, 25, .04), 0 18px 32px -24px rgba(29, 28, 25, .45); font-family: "Times New Roman", "Liberation Serif", Georgia, serif; font-size: 13.5px; line-height: 1.45; color: #1d1c19; overflow-wrap: anywhere; }
.docs-sheet__corner { margin: 0 0 14px auto; max-width: 62%; font-size: 12px; line-height: 1.4; }
.docs-sheet__org { margin: 0 0 2px; text-align: center; font-weight: 700; }
.docs-sheet__addr { margin: 0 0 6px; text-align: center; font-size: 12px; }
.docs-sheet__title { margin: 14px 0 6px; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.docs-sheet__date { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 12.5px; }
.docs-sheet__date [data-bind="city"]:empty { display: none; }
.docs-sheet__sub { margin: 0 0 10px; text-align: center; font-weight: 700; }
.docs-sheet__row { margin: 0 0 4px; font-size: 12.5px; }
.docs-sheet__lines { display: grid; gap: 7px; margin: 12px 0 18px; }
.docs-sheet__lines i { display: block; height: 6px; border-radius: 3px; background: #edebe5; }
.docs-sheet__lines i:nth-child(1) { margin-left: 2.2em; }
.docs-sheet__lines i:nth-child(4) { width: 86%; }
.docs-sheet__lines i:nth-child(5) { width: 58%; }
.docs-sheet__grid { display: grid; grid-template-columns: 2fr repeat(5, 1fr); margin: 12px 0 16px; border-top: 1px solid #9a9890; border-left: 1px solid #9a9890; }
.docs-sheet__grid i { height: 15px; border-right: 1px solid #9a9890; border-bottom: 1px solid #9a9890; }
.docs-sheet__grid i:nth-child(-n+6) { background: #f3f2ee; }
.docs-sheet__sign { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 0; font-size: 12.5px; }
.docs-sheet [data-bind]:not(.is-filled) { color: #8b897f; font-style: italic; }
.docs-sheet [data-bind].is-filled { background: linear-gradient(transparent 58%, var(--ui-amber-line) 58%); }
.docs-sheet__cap { font-size: var(--ui-fs-sm); line-height: 1.4; color: var(--ui-muted); }

/* Итог заказа под листом: цена, три шага покупки, кнопка. */
.docs-summary .ui-card__body { display: grid; gap: var(--ui-s3); }
.docs-summary__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.docs-summary__price .ui-price { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.docs-summary .docs-discount-note { margin: 0; }
.docs-summary__note { margin: 0; }
.docs-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: flow; }
.docs-flow li { counter-increment: flow; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; font-size: 14px; line-height: 1.35; }
.docs-flow li::before { content: counter(flow); grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--ui-surface-2); color: var(--ui-ink-2); }
.docs-flow li.is-current::before { background: var(--ui-green); color: #fff; }
.docs-flow li.is-done::before { content: "✓"; background: var(--ui-green-tint); color: var(--ui-green); }
.docs-flow strong { font-weight: 600; }
.docs-flow span { grid-column: 2; color: var(--ui-muted); font-size: 13.5px; }

/* Ниже формы и образца: состав и условия — двумя колонками. */
.docs-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-s8) var(--ui-s12); align-items: start; }
.docs-details .docs-facts h3:first-child { margin-top: 0; }
.docs-form .ui-check, .docs-checkout .ui-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; font-size: 14px; }
/* Обычный текст у галочек (17.10.2026): «.ui-root label { font-weight: 600 }» делал жирными целые абзацы согласий —
   они перекрикивали кнопку. В кабинете галочки остаются полужирными, там это короткие подписи. */
.docs-form .ui-check, .docs-checkout .ui-check, .docs-invoice .ui-check { font-weight: 400; }
.docs-form .ui-check input, .docs-checkout .ui-check input { margin-top: 3px; flex: none; }
.docs-form .ui-textarea { min-height: 120px; }
.ui-req { color: var(--ui-bad); }
.docs-aside { display: grid; gap: var(--ui-s4); position: sticky; top: 84px; }
.docs-checkout__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.docs-checkout__price .ui-price { font-size: 30px; font-weight: 700; }
.docs-checkout .ui-form { display: grid; gap: var(--ui-s3); margin-top: var(--ui-s3); }
.docs-checkout__terms { margin: var(--ui-s4) 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2); display: grid; gap: 6px; }
.docs-actions { display: flex; gap: var(--ui-s3); flex-wrap: wrap; }
.ui-btn--danger { color: var(--ui-bad); border-color: var(--ui-bad); }
.ui-btn--block { width: 100%; justify-content: center; }
.docs-order .ui-page-head__title .ui-icon { width: 28px; height: 28px; vertical-align: -5px; color: var(--ui-primary); }

/* Предпросмотр: лист документа с водяным знаком, текст не выделяется и не печатается. */
.doc-preview { position: relative; background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; max-height: 78vh; overflow-y: auto; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.doc-preview__page { padding: 32px 36px 40px; font-family: "Times New Roman", "Liberation Serif", Georgia, serif; font-size: 15px; line-height: 1.5; color: #1d1c19; }
.doc-preview__wm { position: absolute; inset: 0; pointer-events: none; z-index: 2; display: grid; grid-template-rows: repeat(6, 1fr); }
.doc-preview__wm span { align-self: center; justify-self: center; transform: rotate(-28deg); font: 700 40px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .12em; color: rgba(139, 94, 24, .16); white-space: nowrap; }
.doc-preview__wm span:nth-child(even) { justify-self: start; margin-left: 12%; }
.doc-preview__wm span:nth-child(odd) { justify-self: end; margin-right: 12%; }
.doc-c { text-align: center; margin: 0 0 4px; }
.doc-b { font-weight: 700; }
.doc-title { text-align: center; font-size: 19px; font-weight: 700; margin: 14px 0 8px; letter-spacing: .04em; }
.doc-date { margin-bottom: 16px; }
.doc-h { font-size: 15.5px; font-weight: 700; margin: 14px 0 6px; }
.doc-p { text-indent: 2.2em; text-align: justify; margin: 0 0 6px; }
.doc-p--flat { text-indent: 0; }
.doc-ol { margin: 0 0 8px; padding-left: 2.4em; text-align: justify; }
.doc-ol li { margin-bottom: 5px; }
.doc-sign { display: flex; justify-content: space-between; gap: 16px; margin: 22px 0 8px; flex-wrap: wrap; }
.doc-muted { font-size: 12.5px; color: #555; font-style: italic; margin: 8px 0 4px; }
.doc-table-wrap { overflow-x: auto; margin: 8px 0 10px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th, .doc-table td { border: 1px solid #8a8a8a; padding: 4px 6px; vertical-align: top; text-align: left; }
.doc-table th { background: #f2f2f2; font-weight: 700; }
.doc-frame { border: 1px solid #8a8a8a; padding: 8px 10px; margin: 16px 0 8px; font-size: 12.5px; line-height: 1.45; background: #fafafa; }
.doc-frame strong { display: block; margin-bottom: 4px; }
.doc-frame p { margin: 0; }
.doc-break { border: 0; border-top: 2px dashed var(--ui-line); margin: 28px 0; }
.doc-spacer { height: 14px; }
@media print { .doc-preview { display: none; } }
@media (max-width: 960px) {
  .docs-two, .docs-two--checkout, .docs-two--files { grid-template-columns: minmax(0, 1fr); }
  .docs-aside { position: static; }
  .docs-form__row { grid-template-columns: minmax(0, 1fr); }
  /* Страница документа на телефоне и планшете (17.10.2026): одна колонка; живой лист — внутри формы перед кнопкой,
     правая колонка не нужна; кнопка прилипает к низу экрана, пока видна форма, и отлипает, пока человек печатает
     (иначе на телефоне она висела бы над клавиатурой и закрывала поле). */
  .docs-work__grid, .docs-details { grid-template-columns: minmax(0, 1fr); }
  .docs-work__aside { display: none; }
  .docs-form__sheet { display: block; padding: var(--ui-s4) 0 0; border-top: 1px solid var(--ui-line); }
  .docs-form__submit .ui-btn { width: 100%; justify-content: center; }
  /* Липкой кнопка становится, когда заполнены почта и название (класс is-armed ставит скрипт): над пустой формой она
     была вторым зелёным призывом рядом с «Заполнить данные» и вела на страницу ошибок. */
  .ui-form.is-armed > .docs-form__submit { position: sticky; bottom: 0; z-index: 6; margin: var(--ui-s3) calc(-1 * var(--ui-page-x)) 0; padding: 10px var(--ui-page-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 245, 240, .97); border-top: 1px solid var(--ui-line); }
  .docs-form:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .ui-form.is-armed > .docs-form__submit { position: static; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background: transparent; border-top-color: transparent; }
  /* На телефоне четыре факта — ровной сеткой 2×2, а не «лесенкой» переносов. */
  .docs-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s3) var(--ui-s4); }
  .docs-hero__facts dd { font-size: 15px; }
  .docs-hero__facts .docs-hero__price dd { font-size: 22px; }
  /* Кнопка помощника — над липкой полоской с кнопкой формы или оплаты, а не поверх неё. */
  body:has(.ui-form.is-armed > .docs-form__submit) .ai-assistant, body:has(.docs-paybar) .ai-assistant { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .doc-preview__page { padding: 20px 16px 28px; font-size: 14px; }
  .doc-preview__wm span { font-size: 26px; }
}

/* Оплата по счёту от учреждения (30.09.2026): блок под формой карты и уведомление о выставленном счёте. */
.docs-invoice { margin-top: var(--ui-s3); border-top: 1px solid var(--ui-line); padding-top: var(--ui-s3); }
.docs-invoice > summary { list-style: none; cursor: pointer; }
.docs-invoice > summary::-webkit-details-marker { display: none; }
.docs-invoice[open] > summary { margin-bottom: var(--ui-s2); }
.docs-invoice .ui-form { display: grid; gap: var(--ui-s3); margin-top: var(--ui-s3); }
.docs-invoice .ui-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; font-size: 14px; }
.docs-invoice .ui-check input { margin-top: 3px; flex: none; }
.docs-invoice-hint { margin-top: var(--ui-s2); }
.docs-invoice-note { margin: 0 0 var(--ui-s4); }
.docs-invoice-pending { margin-top: var(--ui-s4); max-width: 560px; }
.docs-invoice-pending .docs-invoice { border-top: 0; padding-top: 0; margin-top: var(--ui-s2); }

/* Бесплатный образец на витрине документа (09.10.2026, documents/partials/free_sample.html): тот же лист, что
   в предпросмотре, но без водяного знака — текст выделяется и копируется. Варианты по типу учреждения — <details>. */
.docs-sample__variant { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); margin: 0 0 var(--ui-s3); }
.docs-sample__variant > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 16px; list-style: none; display: flex; align-items: center; gap: 8px; }
.docs-sample__variant > summary::-webkit-details-marker { display: none; }
.docs-sample__variant > summary::after { content: "▾"; margin-left: auto; color: var(--ui-ink-2); transition: transform .15s ease; }
.docs-sample__variant[open] > summary { border-bottom: 1px solid var(--ui-line); }
.docs-sample__variant[open] > summary::after { transform: rotate(180deg); }
.docs-sample__title { font-size: 16px; margin: var(--ui-s4) 18px var(--ui-s2); }
.doc-sheet { background: #fff; border: 1px solid var(--ui-line); border-radius: 10px; margin: 0 18px 18px; max-height: 72vh; overflow-y: auto; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.docs-sample__cta { margin-top: var(--ui-s4); }
.docs-sample__cta .ui-card__body { display: flex; flex-wrap: wrap; gap: var(--ui-s3) var(--ui-s4); align-items: center; justify-content: space-between; }
.docs-sample__cta-text { margin: 0; flex: 1 1 320px; line-height: 1.5; }
@media (max-width: 960px) {
  .doc-sheet { margin: 0 10px 12px; }
  .docs-sample__title { margin-left: 10px; margin-right: 10px; }
}

/* Посадочные «<журнал> с шапкой вашего учреждения» (documents/views_journal_pages.py, 17.10.2026): лист-макет шапки
   без боковых отступов details-образца, подписи полей и серые курсивом «подставится из формы». */
.docs-landing__sheet { margin: 0; max-height: none; overflow: visible; }
/* Подписи полей — как строки документа, а не шапка таблицы кабинета (.ui-root th делает th капителью серым). */
.docs-landing__fields th, .docs-landing__columns th { font: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; color: #1d1c19; background: #f7f7f7; white-space: normal; }
.docs-landing__fields th { width: 42%; }
.docs-landing__fill { color: #6b6a66; font-style: italic; }
.docs-landing__columns td { height: 26px; }
.docs-landing__columns-text { display: none; }
.docs-landing .docs-facts h3:first-child { margin-top: 0; }
@media (max-width: 700px) {
  /* На телефоне app-public.css раскладывает любые таблицы в столбик (td — сетка «подпись из data-label | значение»,
     thead скрыт): подпись поля — во всю ширину, значение обычным блоком под ней; таблицу граф заменяет строка. */
  .docs-landing__fields th { width: auto; }
  .docs-landing__fields td { display: block; }
  .docs-landing__columns { display: none; }
  .docs-landing__columns-text { display: block; }
}

/* Страница заказа (17.10.2026): шаги покупки строкой под заголовком и полоска «К оплате» на телефоне. */
.docs-flow--inline { grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--ui-s2) var(--ui-s8); margin: 0 0 var(--ui-s5); }
.docs-paybar { display: none; }
@media (max-width: 960px) {
  .docs-flow--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2); }
  .docs-flow--inline li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; font-size: 13px; }
  .docs-flow--inline li::before { grid-row: auto; }
  .docs-flow--inline span { grid-column: 1; font-size: 12px; }
  .docs-order__preview .doc-preview { max-height: 64vh; }
  .docs-paybar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); margin: var(--ui-s3) calc(-1 * var(--ui-page-x)) 0; padding: 10px var(--ui-page-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 245, 240, .97); border-top: 1px solid var(--ui-line); }
  .docs-paybar__price { font-size: 20px; font-weight: 700; }
  .docs-paybar__price .ui-muted { font-size: 13px; font-weight: 400; }
  .docs-checkout { scroll-margin-top: 72px; }
}

/* Кнопка помощника на страницах покупки (17.10.2026): на ноутбуках 1280–1440 плашка «Спросить Агату» ложилась на правую
   колонку — живой лист, итог заказа, кнопку оплаты. Здесь — только значок; подпись остаётся для экранного диктора. */
@media (min-width: 961px) and (max-width: 1499px) {
  body:has(.docs-work__aside, .docs-aside) .ai-assistant-toggle { padding: 10px; }
  body:has(.docs-work__aside, .docs-aside) .ai-assistant-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(.docs-work__aside, .docs-aside) .ai-fab__avatar { margin-left: 0; }
}
@media (max-width: 420px) {
  /* Узкие телефоны (320–420px, 17.10.2026): кнопки шапки переносят текст, а не раздвигают страницу шире экрана. */
  .docs-hero__copy > * { min-width: 0; }
  .docs-hero .pub-hero__actions .ui-btn { white-space: normal; height: auto; min-height: var(--ui-control-h-lg); padding-top: 10px; padding-bottom: 10px; text-align: center; line-height: 1.25; }
}
@media (max-width: 600px) {
  /* Крошки на телефоне (17.10.2026): в три строки они сдвигали форму и предпросмотр вниз. На странице документа —
     без последней крошки (её повторяет заголовок), на странице заказа — без крошек: назад ведёт «Изменить данные». */
  .docs-hero .ui-breadcrumbs li:last-child { display: none; }
  .docs-order .ui-breadcrumbs { display: none; }
}

/* Таблицы документа в предпросмотре и образце (17.10.2026, независимая проверка). На телефоне общее правило
   app-public.css раскладывает любую таблицу в стопку карточек (table, tr, td → block; thead скрыт) — журнал и график
   превращались в список подписей и пустые карточки. Документ — это лист: таблица остаётся таблицей, шире экрана —
   прокрутка вбок внутри .doc-table-wrap. Макеты шапки на посадочных (.docs-landing__sheet) раскладываются по-своему. На компьютере широкие журналы (8–9 граф) не помещались в колонку
   предпросмотра и прятали последние графы — фиксированная раскладка и мелкий шрифт, как на альбомном листе. */
.doc-preview .doc-table, .doc-sheet:not(.docs-landing__sheet) .doc-table { table-layout: fixed; }
.doc-preview .doc-table th, .doc-sheet:not(.docs-landing__sheet) .doc-table th { overflow-wrap: anywhere; hyphens: auto; }
.doc-preview .doc-table th, .doc-preview .doc-table td { font-size: 11.5px; }
/* Шапка граф — как в файле документа: обычным регистром и чёрным. Общее «.ui-root th» (капитель, разрядка, серый) делало
   из листа документа таблицу кабинета, а капитель в узких графах рвалась посреди слова. */
.doc-preview .doc-table th, .doc-sheet:not(.docs-landing__sheet) .doc-table th { text-transform: none; letter-spacing: 0; color: #1d1c19; font-weight: 700; }
@media (max-width: 900px) {
  /* Ширина — по содержимому граф, шире экрана — прокрутка вбок внутри .doc-table-wrap (а не слова, рваные по буквам). */
  .doc-preview table.doc-table, .doc-sheet:not(.docs-landing__sheet) table.doc-table { display: table; table-layout: auto; width: max-content; min-width: 100%; }
  .doc-preview .doc-table th, .doc-sheet:not(.docs-landing__sheet) .doc-table th { overflow-wrap: normal; hyphens: manual; max-width: 160px; }
  .doc-preview .doc-table thead, .doc-sheet:not(.docs-landing__sheet) .doc-table thead { display: table-header-group; }
  .doc-preview .doc-table tbody, .doc-sheet:not(.docs-landing__sheet) .doc-table tbody { display: table-row-group; }
  .doc-preview .doc-table tr, .doc-sheet:not(.docs-landing__sheet) .doc-table tr { display: table-row; border: 0; border-radius: 0; margin: 0; background: none; overflow: visible; }
  .doc-preview .doc-table th, .doc-preview .doc-table td, .doc-sheet:not(.docs-landing__sheet) .doc-table th, .doc-sheet:not(.docs-landing__sheet) .doc-table td { display: table-cell; }
  .doc-preview .doc-table td::before, .doc-sheet:not(.docs-landing__sheet) .doc-table td::before { content: none; }
}
@media (max-width: 600px) {
  /* Выравнивание по ширине в узкой колонке давало дыры между словами. */
  .doc-preview .doc-p, .doc-preview .doc-ol, .doc-sheet:not(.docs-landing__sheet) .doc-p, .doc-sheet:not(.docs-landing__sheet) .doc-ol { text-align: left; }
}
.docs-card-instead { margin-top: var(--ui-s3); }
.docs-card-instead > summary { list-style: none; cursor: pointer; }
.docs-card-instead > summary::-webkit-details-marker { display: none; }

/* Мелочи после независимой проверки (17.10.2026). */
.docs-form__row.is-single { grid-template-columns: minmax(0, 1fr); }
.docs-form__row > .ui-field:only-child { grid-column: 1 / -1; }
.docs-hero .ui-breadcrumbs { margin-bottom: var(--ui-s3); }
.docs-flow--inline li { align-content: start; }
.docs-work + .pub-section--band, .docs-details-section + .pub-section--band { padding-top: var(--ui-s16); }
.docs-radio-group { border: 0; margin: 0; padding: 0; min-width: 0; }
/* «Нужен чек на организацию или ИП?» вместо переключателя «Кто покупает» (18.10.2026); 44px под палец. */
.docs-buyer-toggle { margin: -4px 0 0; }
.docs-buyer-toggle .ui-link-btn { min-height: 44px; padding: 0; font-size: var(--ui-fs-sm); text-align: left; white-space: normal; }
.docs-radio-group > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; }
.docs-ask { margin: var(--ui-s2) 0 0; font-size: var(--ui-fs-sm); }
.docs-ask .ui-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ui-link, var(--ui-green)); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.docs-ask { margin: var(--ui-s1) 0 0; }
.docs-form__prefilled { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--ui-s2); padding: 10px 12px; border: 1px solid var(--ui-amber-line); border-radius: var(--ui-radius); background: var(--ui-amber-tint); font-size: 14px; line-height: 1.45; color: var(--ui-ink); }
.docs-form__prefilled .ui-icon { flex: none; margin-top: 2px; color: var(--ui-amber-text); }
.docs-set-list { margin: 0 0 var(--ui-s5); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.docs-set-list > summary { position: relative; cursor: pointer; padding: 12px 40px 12px 16px; font-weight: 600; font-size: 15px; list-style: none; }
.docs-set-list > summary::-webkit-details-marker { display: none; }
.docs-set-list > summary::after { content: "▾"; position: absolute; right: 16px; top: 12px; color: var(--ui-ink-2); }
.docs-set-list[open] > summary::after { transform: rotate(180deg); }
.docs-set-list__items { margin: 0; padding: 0 16px 14px 36px; columns: 2 260px; column-gap: var(--ui-s8); font-size: 14px; line-height: 1.45; color: var(--ui-ink-2); }
.docs-set-list__items li { break-inside: avoid; margin: 0 0 4px; }
/* Плавающая кнопка помощника на страницах покупки: пока человек печатает в форме или оплате — скрыта; на телефоне,
   планшете и небольших ноутбуках — скрыта совсем, вопрос задают ссылкой «Спросить Агату» у кнопки (она ложилась на
   поля, гарантию возврата и кнопки оплаты). */
body:has(.docs-form :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus, .docs-checkout :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .ai-assistant:not(.is-open) { display: none; }
@media (max-width: 1180px) {
  body:has(.docs-work__aside, .docs-checkout) .ai-assistant:not(.is-open) { display: none; }
}
@media (min-width: 961px) and (max-height: 759px) {
  /* Невысокие экраны ноутбуков (1366×768): шапка короче, а липким остаётся итог с ценой и кнопкой (живой лист уезжает). */
  .docs-hero { padding-top: var(--ui-s6); padding-bottom: var(--ui-s5); }
  .docs-hero .pub-detail__lead { font-size: 16px; }
  .docs-work { padding-top: var(--ui-s5); }
  .docs-work__aside { align-self: stretch; }
  .docs-summary { position: sticky; top: 76px; }
}
@media (max-width: 960px) {
  .docs-work + .pub-section--band, .docs-details-section + .pub-section--band { padding-top: var(--ui-s10); }
}
@media (max-width: 400px) {
  .docs-paybar__price .ui-muted { display: none; }
}

/* ---------- Каталог /dokumenty/ и посадочные «журнал под вас» после проверки вёрстки (17.10.2026) ---------- */
/* Каталог: группы карточек (documents/views.py CATALOG_GROUPS) с заголовком и переходами из первого экрана. */
.docs-jump { margin-top: var(--ui-s2); }
.docs-jump__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ui-radius-pill); background: var(--ui-surface-2); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-variant-numeric: tabular-nums; }
.docs-catalog { padding-top: 0; }
.docs-group { display: grid; gap: var(--ui-s4); scroll-margin-top: calc(var(--ui-topbar-h) + var(--ui-s4)); }
.docs-group + .docs-group { margin-top: var(--ui-s12); }
.docs-group__title { margin: 0; font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; }

/* Посадочная: текст и кнопка слева, макет шапки листа справа — первым экраном. */
.docs-landing-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--ui-s10); align-items: start; }
/* minmax(0, 1fr): таблица граф (до девяти колонок) не распирает колонку макета за край контейнера — если не поместится,
   прокрутится внутри листа. */
.docs-landing-hero__sheet { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-s3); min-width: 0; }
.docs-landing-hero__head { display: grid; gap: 4px; }
.docs-landing-hero__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.docs-landing-hero__text { margin: 0; font-size: var(--ui-fs-sm); line-height: 1.45; color: var(--ui-ink-2); }
.docs-landing-hero__sheet .docs-landing__sheet { box-shadow: 0 1px 2px rgba(29, 28, 25, .06), 0 18px 40px -24px rgba(29, 28, 25, .35); }
.docs-landing-hero__sheet .doc-preview__page { padding: 20px 20px 22px; font-size: 14px; }
.docs-landing-hero__sheet .doc-title { font-size: 17px; margin-top: 0; }
.docs-landing-hero__sheet .doc-table { font-size: 12px; }
.docs-landing-hero__sheet .docs-landing__columns th { font-size: 11px; padding: 3px 4px; line-height: 1.25; }
/* Факты под заголовком в узкой колонке: «сразу после оплаты» и «до оплаты» мельче цены — иначе средний факт
   переносился на две строки и ряд выглядел лесенкой. */
.docs-landing-hero .pub-facts { column-gap: var(--ui-s6); }
.docs-landing-hero .pub-facts div + div dd { font-size: 18px; }
/* Состав файла и «как получите» — двумя колонками. */
.docs-landing__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s4) var(--ui-s10); }
.docs-landing__facts .docs-facts h3:first-child { margin-top: 0; }
/* Карточки «Бесплатно рядом» и «Другие журналы» — сколько поместится в ряд, без одинокой карточки во втором ряду. */
.docs-landing__topics { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 1180px) {
  .docs-landing-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ui-s6); }
  .docs-landing-hero__sheet { max-width: 640px; }
}
@media (max-width: 700px) {
  /* Каталог на телефоне: переходы к группам — одной строкой с прокруткой вбок (столбиком они занимали полэкрана) и после
     фактов; в карточке — описание, цена и кнопка, а состав документа — на его странице: 11 карточек со списками
     растягивали каталог на 12 экранов. */
  .docs-catalog-hero .pub-facts dd { font-size: 18px; }
  .docs-jump { order: 4; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--ui-page-x)); padding: 2px var(--ui-page-x); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .docs-jump::-webkit-scrollbar { display: none; }
  .docs-jump .ui-filter-chip { flex: none; white-space: nowrap; }
  .docs-catalog .docs-card__list { display: none; }
  /* Посадочная на телефоне: последняя крошка повторяет заголовок и занимала третью строку — как на странице документа,
     её не показываем; факты «файлы» и «предпросмотр» — мельче цены, без переноса «сразу после / оплаты». */
  .docs-landing-hero .ui-breadcrumbs li:last-child { display: none; }
  .docs-landing-hero .pub-facts div + div dd { font-size: 16px; }
  .docs-group + .docs-group { margin-top: var(--ui-s8); }
  .docs-landing__facts { grid-template-columns: minmax(0, 1fr); }
  .docs-landing__topics { grid-template-columns: minmax(0, 1fr); }
  .docs-landing-hero__sheet .doc-preview__page { padding: 16px 14px 18px; }
}