/* Парсинг сайтов. Основа — style_page_audit_site.css (body.audit-site): первый экран,
   заголовки, «обо мне», FAQ и форма; из хаба style_page_yandex_direct.css
   (body.yandex-direct) — только кнопки первого экрана. Свои блоки говорят языком
   «страница → таблица»: первый экран — плитки каталога по очереди берутся в рамку,
   и в таблице появляется их строка (единственная анимация страницы); «что собирается» —
   шапка таблицы с буквами колонок; форматы — расширение файла крупно; разово / по
   расписанию — один лист и стопка; цена — прайс с отточиями; этапы — полоса, сколько
   каталога собрано. Цвета — только токены палитры. Зелёный — цена и собранное. */

.ps-parsing { --ps-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Roboto Mono', monospace; }
.ps-parsing .ma-hero h1 { margin: 0 0 30px; font-size: clamp(46px, 5.4vw, 80px); }
.ps-parsing .ps-nowrap { white-space: nowrap; }

/* Первый экран: окно сайта поставщика и таблица поверх. */
.ps-parsing .ps-art { position: relative; width: 100%; aspect-ratio: 1.04; isolation: isolate; }
.ps-parsing .ps-browser { position: absolute; top: 5%; left: 2%; width: 78%; overflow: hidden; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-overlay); transform: rotate(-2deg); box-shadow: 0 30px 50px -36px var(--k-muted); font: 400 12px/1.3 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-browser__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--k-line); background: var(--k-sunken); }
.ps-parsing .ps-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-line); }
.ps-parsing .ps-browser__bar span { flex: 1; margin-left: 10px; padding: 3px 10px; overflow: hidden; border-radius: 6px; background: var(--k-surface); white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1.3 var(--ps-mono); color: var(--k-muted); }
.ps-parsing .ps-browser__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.ps-parsing .ps-tile { display: flex; flex-direction: column; gap: 3px; padding: 7px; border-radius: 10px; outline: 2px dashed var(--k-accent); outline-offset: 1px; animation: ps-pick .9s ease-out both; animation-delay: calc(.4s + var(--i) * .35s); }
.ps-parsing .ps-tile__photo { aspect-ratio: 1.3; margin-bottom: 5px; border-radius: 7px; background: var(--k-sunken); }
.ps-parsing .ps-tile b { font-weight: 500; font-size: 13px; color: var(--k-ink); }
.ps-parsing .ps-sheet { position: absolute; z-index: 2; right: 0; bottom: 7%; width: 70%; padding: 14px 16px 16px; border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-overlay); transform: rotate(1.5deg); box-shadow: 0 28px 48px -28px var(--k-muted); font: 400 12px/1.3 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-sheet__bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 12px/1.3 var(--ps-mono); color: var(--k-muted); }
.ps-parsing .ps-sheet__bar i { font-size: 15px; color: var(--k-accent-ink); }
.ps-parsing .ps-sheet__grid { display: grid; grid-template-columns: .9fr 1.9fr .8fr .8fr; border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); }
.ps-parsing .ps-sheet__grid span { overflow: hidden; padding: 5px 7px; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ps-parsing .ps-sheet__grid span:nth-child(-n + 4) { background: var(--k-sunken); font-size: 11px; color: var(--k-muted); }
.ps-parsing .ps-row { animation: ps-row .5s ease-out both; animation-delay: calc(.75s + var(--i) * .35s); }
.ps-parsing .ps-art__caption { position: absolute; left: 2%; bottom: 0; margin: 0; font: 400 13px/1.4 Roboto, sans-serif; color: var(--k-muted); }
@keyframes ps-pick { 0% { outline-color: transparent; background: transparent; } 45% { outline-color: var(--k-signal); background: var(--k-accent-pale); } 100% { outline-color: var(--k-accent); background: transparent; } }
@keyframes ps-row { from { opacity: 0; background: var(--k-accent-pale); } to { opacity: 1; } }

/* Что собирается: шапка таблицы, под каждой буквой — что лежит в колонке. */
.ps-parsing .ps-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--k-line); border-radius: 16px; overflow: hidden; background: var(--k-surface); }
.ps-parsing .ps-cols li { padding: 0 22px 28px; }
.ps-parsing .ps-cols li + li { border-left: 1px solid var(--k-line); }
.ps-parsing .ps-cols__letter { display: block; margin: 0 -22px 22px; padding: 10px 0; border-bottom: 1px solid var(--k-line); background: var(--k-sunken); text-align: center; font: 400 14px/1.3 var(--ps-mono); color: var(--k-muted); }
.ps-parsing .ps-cols h3 { margin: 0 0 10px; font: 300 22px/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-cols p { margin: 0; font: 300 15px/1.55 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-fields__where { max-width: 860px; margin: 30px auto 0; text-align: center; font: 300 17px/1.6 Roboto, sans-serif; color: var(--k-muted); }

/* Форматы: расширение файла крупно. */
.ps-parsing .ps-formats { padding-top: 40px; }
.ps-parsing .ps-formats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.ps-parsing .ps-formats__list li { padding-top: 20px; border-top: 1px solid var(--k-ink); }
.ps-parsing .ps-ext { display: block; margin-bottom: 16px; font: 200 52px/1 Oswald, sans-serif; color: var(--k-ink); }
.ps-parsing .ps-formats__list h3 { margin: 0 0 8px; font: 400 19px/1.3 Roboto, sans-serif; color: var(--k-ink); }
.ps-parsing .ps-formats__list p { margin: 0 0 14px; font: 300 16px/1.55 Roboto, sans-serif; color: var(--k-ink-2); }

/* Разово или по расписанию: один лист и стопка листов с датами. */
.ps-parsing .ps-mode__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ps-parsing .ps-mode__card { padding: 36px 40px 34px; border: 1px solid var(--k-line); border-radius: 20px; background: var(--k-surface); }
.ps-parsing .ps-mode__card h3 { margin: 0 0 14px; font: 300 32px/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-mode__card p { margin: 0; font: 300 17px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-mode__card a { color: var(--k-accent-ink); }
.ps-parsing .ps-mode__card .ps-mode__price { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--k-line); font: 300 28px/1.1 Oswald, sans-serif; color: var(--k-accent-ink); }
.ps-parsing .ps-stack { position: relative; width: 120px; height: 92px; margin-bottom: 26px; }
.ps-parsing .ps-stack span { position: absolute; bottom: 0; left: 0; display: flex; align-items: flex-end; width: 84px; height: 72px; padding: 8px 10px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-overlay); background-image: repeating-linear-gradient(var(--k-overlay) 0 13px, var(--k-line-soft) 13px 14px); font: 400 12px/1 var(--ps-mono); color: var(--k-muted); }
.ps-parsing .ps-stack--many span:nth-child(1) { transform: translate(24px, -18px); }
.ps-parsing .ps-stack--many span:nth-child(2) { transform: translate(12px, -9px); }
.ps-parsing .ps-stack span:last-child { border-color: var(--k-accent); color: var(--k-accent-ink); }

/* Цена: прайс с отточиями. */
.ps-parsing .ps-list { max-width: 980px; margin: 0; }
.ps-parsing .ps-list > div { padding: 22px 0; border-bottom: 1px solid var(--k-line); }
.ps-parsing .ps-list > div:first-child { border-top: 1px solid var(--k-line); }
.ps-parsing .ps-list dt { display: flex; align-items: baseline; gap: 14px; font-weight: 300; }
.ps-parsing .ps-list dt span { font: 300 30px/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-list dt::after { content: ''; flex: 1; order: 1; min-width: 30px; border-bottom: 2px dotted var(--k-muted-soft); transform: translateY(-6px); }
.ps-parsing .ps-list dt b { order: 2; flex: none; font: 200 44px/1 Oswald, sans-serif; font-variant-numeric: tabular-nums; color: var(--k-ink); }
.ps-parsing .ps-list dt small { margin-left: 4px; font: 300 18px/1 Roboto, sans-serif; color: var(--k-muted); }
.ps-parsing .ps-list dd { margin: 8px 0 0; font: 300 17px/1.5 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-factors__title { margin: 56px 0 22px; font: 400 16px/1.3 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.ps-parsing .ps-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 0 0 44px; padding: 0; list-style: none; }
.ps-parsing .ps-factors li { font: 300 16px/1.55 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-factors b { display: block; margin-bottom: 4px; font: 400 18px/1.3 Roboto, sans-serif; color: var(--k-ink); }

/* Этапы: полоса — сколько каталога собрано к концу этапа. */
.ps-parsing .ps-steps { padding-top: 40px; }
.ps-parsing .ps-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.ps-parsing .ps-bar { display: block; height: 8px; margin-bottom: 14px; overflow: hidden; border-radius: 4px; background: var(--k-sunken); box-shadow: inset 0 0 0 1px var(--k-line); }
.ps-parsing .ps-bar i { display: block; width: var(--fill); min-width: 0; height: 100%; background: var(--k-accent); }
.ps-parsing .ps-steps__mark { display: block; margin-bottom: 14px; font: 400 13px/1.3 var(--ps-mono); color: var(--k-muted); }
.ps-parsing .ps-steps__list h3 { margin: 0 0 10px; font: 300 28px/1.1 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-steps__list p { margin: 0; font: 300 16px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }

/* Что не собираем. */
.ps-parsing .ps-refuse { padding-top: 20px; }
.ps-parsing .ps-refuse__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 56px; padding: 38px 44px; border: 1px dashed var(--k-muted-soft); border-radius: 20px; }
.ps-parsing .ps-refuse__box h2 { margin: 0; font: 300 clamp(30px, 3vw, 42px)/1.1 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-refuse__box ul { grid-row: span 2; margin: 0; padding: 0; list-style: none; }
.ps-parsing .ps-refuse__box li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--k-line); font: 300 17px/1.45 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-refuse__box li::before { content: ''; position: absolute; top: 21px; left: 4px; width: 14px; height: 1px; background: var(--k-muted); }
.ps-parsing .ps-refuse__box p { margin: 0; font: 300 16px/1.55 Roboto, sans-serif; color: var(--k-muted); }

/* Что дальше. */
.ps-parsing .ps-links { padding-top: 20px; }
.ps-parsing .ps-links__card { padding: 40px 44px; border: 1px solid var(--k-line); border-radius: 20px; background: var(--k-surface); }
.ps-parsing .ps-links__card h2 { margin: 0 0 14px; font: 300 clamp(28px, 2.6vw, 38px)/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ps-parsing .ps-links__card p { max-width: 900px; margin: 0 0 20px; font: 300 18px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }
.ps-parsing .ps-links__card .ps-links__more { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; }
.ps-parsing .ma-faq .ma-title a { color: var(--k-accent-ink); }

:root.pr-dark .ps-parsing :is(.ps-browser, .ps-sheet), :root[data-theme="dark"] .ps-parsing :is(.ps-browser, .ps-sheet) { box-shadow: 0 26px 44px -26px var(--k-dark); }

@media (prefers-reduced-motion: reduce) {
    .ps-parsing :is(.ps-tile, .ps-row) { animation: none; }
}

@media (max-width: 1199px) {
    .ps-parsing .ps-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ps-parsing .ps-cols li:nth-child(4) { border-left: 0; }
    .ps-parsing .ps-cols li:nth-child(n + 4) .ps-cols__letter { border-top: 1px solid var(--k-line); }
    .ps-parsing .ps-formats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-parsing .ps-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 991px) {
    .ps-parsing .ma-hero h1 { font-size: 64px; }
    .ps-parsing .ps-art { max-width: 580px; margin: 10px auto 0; }
    .ps-parsing .ps-mode__grid { grid-template-columns: minmax(0, 1fr); }
    .ps-parsing .ps-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-parsing .ps-refuse__box { grid-template-columns: minmax(0, 1fr); }
    .ps-parsing .ps-refuse__box ul { grid-row: auto; }
}
@media (max-width: 767px) {
    .ps-parsing .ma-hero h1 { font-size: clamp(38px, 11vw, 60px); }
    .ps-parsing .ps-art { aspect-ratio: .92; }
    .ps-parsing .ps-browser { top: 2%; left: 0; width: 88%; font-size: 10px; }
    .ps-parsing .ps-browser__tiles { gap: 8px; padding: 10px; }
    .ps-parsing .ps-tile { padding: 5px; }
    .ps-parsing .ps-tile b { font-size: 11px; }
    .ps-parsing .ps-sheet { width: 84%; padding: 10px 10px 12px; font-size: 10px; }
    .ps-parsing .ps-sheet__grid span { padding: 4px 5px; }
    .ps-parsing .ps-sheet__grid span:nth-child(-n + 4) { font-size: 9px; }
    .ps-parsing .ps-art__caption { left: 0; font-size: 12px; }
    /* Колонки стопкой: буква слева, как номер строки. */
    .ps-parsing .ps-cols { grid-template-columns: minmax(0, 1fr); }
    .ps-parsing .ps-cols li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 18px 0 0; }
    .ps-parsing .ps-cols li + li { border-left: 0; border-top: 1px solid var(--k-line); }
    .ps-parsing .ps-cols li:nth-child(n + 4) .ps-cols__letter { border-top: 0; }
    .ps-parsing .ps-cols__letter { grid-row: span 2; margin: 0; padding: 18px 0 0; border-bottom: 0; border-right: 1px solid var(--k-line); }
    .ps-parsing .ps-cols h3 { margin: 16px 0 6px; font-size: 21px; }
    .ps-parsing .ps-cols p { padding-bottom: 18px; }
    .ps-parsing .ps-fields__where { font-size: 15px; }
    .ps-parsing .ps-formats__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ps-parsing .ps-ext { font-size: 42px; }
    .ps-parsing .ps-mode__card { padding: 26px 22px; }
    .ps-parsing .ps-mode__card h3 { font-size: 27px; }
    .ps-parsing .ps-mode__card p { font-size: 16px; }
    .ps-parsing .ps-list dt { flex-wrap: wrap; gap: 6px 10px; }
    .ps-parsing .ps-list dt span { flex-basis: 100%; font-size: 24px; }
    .ps-parsing .ps-list dt::after { display: none; }
    .ps-parsing .ps-list dt b { font-size: 38px; }
    .ps-parsing .ps-list dd { font-size: 15px; }
    .ps-parsing .ps-factors { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ps-parsing .ps-price__cta { width: 100%; }
    .ps-parsing .ps-steps__list { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .ps-parsing .ps-steps__list h3 { font-size: 24px; }
    .ps-parsing .ps-steps__list p { font-size: 15px; }
    .ps-parsing .ps-refuse__box { padding: 26px 22px; }
    .ps-parsing .ps-refuse__box li { font-size: 16px; }
    .ps-parsing .ps-links__card { padding: 28px 22px; border-radius: 16px; }
    .ps-parsing .ps-links__card p { font-size: 16px; }
}