/* Ведение Яндекс Директа (yv-). Основа — style_page_audit_site.css
   (body.audit-site) и хаб style_page_yandex_direct.css (body.yandex-direct):
   первый экран, кнопки, работы с ценой, кейсы, этапы, цена, FAQ и форма
   общие. Здесь своё: журнал ведения в первом экране, лист отчёта, доводы и условия.
   Цвета — только токены палитры. */

/* ---------- Ведение ---------- */

/* Первый экран: журнал недели, цена заявки по неделям и сводка в Telegram. */
.yd-vedenie .yv-art { position: relative; width: 100%; aspect-ratio: 1.04; isolation: isolate; }
.yd-vedenie .yv-log { position: absolute; z-index: 2; left: 0; top: 6%; width: 60%; padding: 24px 26px; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 22px 40px -28px var(--k-muted-soft); transform: rotate(-3deg); }
.yd-vedenie .yv-log__head { display: flex; flex-direction: column; margin-bottom: 14px; font: 300 13px/1.4 Roboto, sans-serif; color: var(--k-muted); }
.yd-vedenie .yv-log__head b { font: 400 22px/1.2 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--k-ink); }
.yd-vedenie .yv-log ul { margin: 0; padding: 0; list-style: none; }
.yd-vedenie .yv-log li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--k-line-soft); font: 300 15px/1.4 Roboto, sans-serif; color: var(--k-ink-2); }
.yd-vedenie .yv-log li i { flex: none; min-width: 44px; font: 400 20px/1 Oswald, sans-serif; font-style: normal; color: var(--k-ink); }
.yd-vedenie .yv-cpl { position: absolute; z-index: 3; right: 0; top: 40%; width: 54%; padding: 22px 24px; border-radius: 16px; background: var(--k-dark); color: var(--k-on-dark); box-shadow: 0 22px 40px -26px var(--k-muted); transform: rotate(3deg); }
.yd-vedenie .yv-cpl__label { display: block; margin-bottom: 10px; font: 300 13px/1.4 Roboto, sans-serif; color: var(--k-on-dark-2); }
.yd-vedenie .yv-cpl svg { display: block; width: 100%; height: auto; overflow: visible; }
.yd-vedenie .yv-cpl__grid { stroke: var(--k-dark-soft); stroke-width: 1; }
.yd-vedenie .yv-cpl__line { stroke: var(--k-accent-on-dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.yd-vedenie .yv-cpl circle { fill: var(--k-dark); stroke: var(--k-accent-on-dark); stroke-width: 2; }
.yd-vedenie .yv-cpl circle.yv-cpl__now { fill: var(--k-accent-on-dark); }
.yd-vedenie .yv-cpl__value { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font: 300 13px/1.4 Roboto, sans-serif; color: var(--k-on-dark-2); }
.yd-vedenie .yv-cpl__value b { font: 300 34px/1 Oswald, sans-serif; color: var(--k-on-dark); }
.yd-vedenie .yv-ping { position: absolute; z-index: 4; left: 6%; bottom: 4%; display: flex; align-items: center; gap: 14px; max-width: 62%; padding: 14px 18px; background: var(--k-overlay); border: 1px solid var(--k-line); border-radius: 14px; box-shadow: 0 18px 34px -24px var(--k-muted); transform: rotate(-1.5deg); }
.yd-vedenie .yv-ping i { flex: none; font-size: 28px; color: var(--k-accent-ink); }
.yd-vedenie .yv-ping span { display: flex; flex-direction: column; font: 400 14px/1.35 Roboto, sans-serif; color: var(--k-ink); }
.yd-vedenie .yv-ping small { font-size: 12px; color: var(--k-muted); }

/* Что входит: у каждой работы — как часто она делается. */
.yd-vedenie .yv-when { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--k-line); border-radius: 20px; font: 400 12px/1.3 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }

/* Отчёт: лист с итогами месяца слева, метрики справа. */
.yd-vedenie .yv-report { padding-top: 40px; }
.yd-vedenie .yv-report__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.yd-vedenie .yv-sheet { margin: 0; padding: 32px 34px; background: var(--k-sheet); border: 1px solid var(--k-line); border-radius: 18px; box-shadow: 0 30px 50px -40px var(--k-muted); }
.yd-vedenie .yv-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.yd-vedenie .yv-sheet__head > span:first-child { display: flex; flex-direction: column; font: 300 14px/1.4 Roboto, sans-serif; color: var(--k-muted); }
.yd-vedenie .yv-sheet__head b { font: 400 26px/1.2 Oswald, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--k-ink); }
.yd-vedenie .yv-sheet__stamp { flex: none; padding: 4px 12px; border: 1px dashed var(--k-muted-soft); border-radius: 6px; font: 400 12px/1.3 Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); transform: rotate(4deg); }
.yd-vedenie .yv-sheet__kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 26px; padding: 0; list-style: none; border: 1px solid var(--k-line); border-radius: 12px; overflow: hidden; }
.yd-vedenie .yv-sheet__kpi li { display: flex; flex-direction: column; padding: 14px 16px; background: var(--k-surface); }
.yd-vedenie .yv-sheet__kpi li + li { border-left: 1px solid var(--k-line); }
.yd-vedenie .yv-sheet__kpi span { font: 400 12px/1.3 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.yd-vedenie .yv-sheet__kpi b { margin: 4px 0 2px; font: 300 27px/1.1 Oswald, sans-serif; color: var(--k-ink); white-space: nowrap; }
.yd-vedenie .yv-sheet__kpi i { font: 400 13px/1.3 Roboto, sans-serif; font-style: normal; color: var(--k-muted); }
.yd-vedenie .yv-sheet__kpi i.is-good { color: var(--k-accent-ink); }
.yd-vedenie .yv-sheet__kpi i.is-bad { color: var(--k-bad); }
.yd-vedenie .yv-sheet__table { width: 100%; margin-bottom: 26px; border-collapse: collapse; font: 300 15px/1.4 Roboto, sans-serif; }
.yd-vedenie .yv-sheet__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yd-vedenie .yv-sheet__table th, .yd-vedenie .yv-sheet__table td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--k-line-soft); color: var(--k-ink-2); }
.yd-vedenie .yv-sheet__table thead th { font: 400 12px/1.3 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); background: var(--k-sunken); border-bottom-color: var(--k-line); }
.yd-vedenie .yv-sheet__table th:first-child { text-align: left; }
.yd-vedenie .yv-sheet__table tbody th { font-weight: 400; color: var(--k-ink); }
.yd-vedenie .yv-sheet__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.yd-vedenie .yv-sheet__notes h3 { margin: 0 0 8px; font: 400 13px/1.4 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.yd-vedenie .yv-sheet__notes p { margin: 0; font: 300 15px/1.55 Roboto, sans-serif; color: var(--k-ink-2); }
.yd-vedenie .yv-metrics { margin: 0 0 28px; }
.yd-vedenie .yv-metrics div { padding: 20px 0; border-top: 1px solid var(--k-line); }
.yd-vedenie .yv-metrics div:first-child { padding-top: 0; border-top: 0; }
.yd-vedenie .yv-metrics dt { margin-bottom: 6px; font: 300 36px/1.1 Oswald, sans-serif; color: var(--k-ink); }
.yd-vedenie .yv-metrics dd { margin: 0; font: 300 17px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }

/* После чужой настройки: этапы и ссылки на аудит и настройку. */
.yd-vedenie .yv-takeover { padding-top: 60px; }
.yd-vedenie .yv-takeover__links { max-width: 900px; margin-top: 56px; padding: 26px 30px; border-left: 3px solid var(--k-accent); background: var(--k-tray); }
.yd-vedenie .yv-takeover__links p { margin: 0; font: 300 18px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }
.yd-vedenie .yv-takeover__links a, .yd-vedenie .ma-title > p a { color: var(--k-accent-ink); }
.yd-vedenie .yv-cases__note { max-width: 900px; margin: 30px auto 0; text-align: center; }

/* Почему частный директолог: четыре довода под номерами. */
.yd-vedenie .yv-why { padding-top: 40px; }
.yd-vedenie .yv-why__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; counter-reset: why; }
.yd-vedenie .yv-why__list li { position: relative; padding-top: 30px; border-top: 1px solid var(--k-line); counter-increment: why; }
.yd-vedenie .yv-why__list li::before { content: counter(why); position: absolute; top: -17px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--k-line); border-radius: 50%; background: var(--k-paper); color: var(--k-ink-2); font: 400 15px/1 Oswald, sans-serif; }
.yd-vedenie .yv-why__list h3 { margin: 0 0 12px; font: 400 22px/1.3 Roboto, sans-serif; }
.yd-vedenie .yv-why__list p { margin: 0; font: 300 16px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }

/* Цена: под карточкой — условия одной рамкой. */
.yd-vedenie .yv-terms { margin-top: 64px; }

:root.pr-dark .yd-vedenie :is(.yv-log, .yv-ping, .yv-sheet), :root[data-theme="dark"] .yd-vedenie :is(.yv-log, .yv-ping, .yv-sheet) { box-shadow: 0 26px 44px -26px var(--k-dark); }

@media (max-width: 1199px) {
    .yd-vedenie .yv-report__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .yd-vedenie .yv-report__side { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
    .yd-vedenie .yv-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .yd-vedenie .yv-log li { font-size: 14px; }
}
@media (max-width: 991px) {
    .yd-vedenie .yv-art { max-width: 580px; margin: 10px auto 0; }
    .yd-vedenie .yv-report__side { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 767px) {
    .yd-vedenie .yv-art { aspect-ratio: .82; }
    .yd-vedenie .yv-log { width: 74%; padding: 16px 16px; border-radius: 12px; }
    .yd-vedenie .yv-log__head b { font-size: 17px; }
    .yd-vedenie .yv-log li { gap: 8px; padding: 6px 0; font-size: 12px; }
    .yd-vedenie .yv-log li i { min-width: 30px; font-size: 15px; }
    .yd-vedenie .yv-cpl { top: 53%; width: 62%; padding: 14px 16px; border-radius: 12px; }
    .yd-vedenie .yv-cpl__label, .yd-vedenie .yv-cpl__value { font-size: 11px; }
    .yd-vedenie .yv-cpl__value b { font-size: 24px; }
    .yd-vedenie .yv-ping { left: 0; bottom: 2%; max-width: 72%; padding: 10px 12px; gap: 10px; }
    .yd-vedenie .yv-ping i { font-size: 22px; }
    .yd-vedenie .yv-ping span { font-size: 12px; }
    .yd-vedenie .yv-ping small { font-size: 10px; }
    .yd-vedenie .yv-sheet { padding: 22px 16px; border-radius: 14px; }
    .yd-vedenie .yv-sheet__head b { font-size: 21px; }
    .yd-vedenie .yv-sheet__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yd-vedenie .yv-sheet__kpi li { border-top: 1px solid var(--k-line); }
    .yd-vedenie .yv-sheet__kpi li + li { border-left: 0; }
    .yd-vedenie .yv-sheet__kpi li:nth-child(-n+2) { border-top: 0; }
    .yd-vedenie .yv-sheet__kpi li:nth-child(even) { border-left: 1px solid var(--k-line); }
    .yd-vedenie .yv-sheet__kpi li:last-child { grid-column: 1 / -1; }
    .yd-vedenie .yv-sheet__table { font-size: 14px; }
    .yd-vedenie .yv-sheet__table th, .yd-vedenie .yv-sheet__table td { padding: 9px 6px; }
    .yd-vedenie .yv-sheet__notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .yd-vedenie .yv-metrics dt { font-size: 30px; }
    .yd-vedenie .yv-metrics dd { font-size: 16px; }
    .yd-vedenie .yv-takeover__links { margin-top: 30px; padding: 20px 18px; }
    .yd-vedenie .yv-takeover__links p { font-size: 16px; }
    .yd-vedenie .yv-why__list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .yd-vedenie .yv-why__list h3 { font-size: 20px; }
    .yd-vedenie .yv-terms { margin-top: 40px; }

}