/* Стили экрана разбора — общие для главной и страницы сохранённого разбора.
 *
 * Почему отдельным файлом. До 16.09.2026 стили разбора жили двумя копиями — в landing.html
 * и в report.html, — и каждая новая деталь экрана означала две правки, одну из которых
 * рано или поздно забывают. Новые блоки продающего разбора описаны здесь один раз;
 * старые правила обеих страниц остались на месте, чтобы не трогать работающее.
 *
 * Токены цвета берутся из :root страницы (одинаковые на обеих). Партнёрская страница
 * (wl-embed.html) задаёт ещё четыре — --font-ui, --font-num, --accent-dark, --link-hover:
 * у неё свои шрифты и свой акцент, у наших страниц их нет, и работает запасное значение.
 * Шрифты — по дизайн-системе:
 * Unbounded только у одной акцентной цифры карточки правки и в калькуляторе у итоговых
 * сумм; выводы, заголовки блоков и весь текст — Raleway.
 */

/* ---------- вывод ---------- */
.exp-v{padding:22px 24px 18px;background:var(--canvas)}
.exp-v h3{margin:0 0 6px;font-family:var(--font-ui,Raleway),system-ui,sans-serif;font-size:22px;font-weight:700;
  line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.exp-v p{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.exp-v-meta{margin-top:10px;font-size:13px;line-height:1.45;color:var(--text-cap)}
.exp-v-meta b{font-weight:600;color:var(--text-dim)}

/* ---------- карточка бесплатной правки ---------- */
.exp-fix{margin:18px 24px 6px;padding:18px 20px;border:1px solid var(--brand-15);
  border-radius:14px;background:var(--brand-05)}
.exp-fix-lb{font-size:14.5px;font-weight:700;color:var(--accent-dark,#9e3606)}
.exp-fix-row{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:6px}
.exp-fix-num{font-family:var(--font-num,Unbounded),Raleway,sans-serif;font-size:34px;font-weight:700;
  letter-spacing:-.015em;line-height:1.1;color:var(--text)}
.exp-fix-cap{flex:1 1 220px;min-width:0;font-size:15px;font-weight:600;line-height:1.4}
.exp-fix p{margin:10px 0 0;font-size:15.5px;line-height:1.55}
.exp-fix ul{margin:10px 0 0;padding-left:20px;font-size:15.5px;line-height:1.55}
.exp-fix li{margin:6px 0}
.exp-fix .exp-fix-more{font-size:14.5px;color:var(--text-cap)}
.exp-fix .exp-fix-note{font-size:12.5px;line-height:1.45;color:var(--text-cap)}

/* ---------- что разобрали ---------- */
.exp-got{padding:12px 24px 16px;font-size:14px;line-height:1.5;color:var(--text-dim)}

/* ---------- данные самого Авито ---------- */
.exp-market{padding:16px 24px 8px;border-top:1px solid var(--sep-light)}
.exp-market>b{display:block;font-size:15.5px;margin-bottom:2px}

/* ---------- таблица набора: подпись и метки ---------- */
.exp-tbl-head{padding:18px 24px 10px;border-top:1px solid var(--sep-light)}
.exp-tbl-head b{display:block;font-size:15.5px}
.exp-tbl-head span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--text-cap)}
.exp-flag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:12px;
  font-weight:600;line-height:1.6;white-space:nowrap;vertical-align:1px;
  background:var(--surface);color:var(--text-dim)}
.exp-flag.twin{background:var(--brand-05);color:var(--accent-dark,#9e3606)}

/* ---------- свёрнутые подробности ---------- */
.exp-more{border-top:1px solid var(--sep-light)}
.exp-more>summary{padding:16px 24px;cursor:pointer;font-size:15px;font-weight:600;color:var(--text)}
.exp-more>summary:hover{color:var(--link)}
.exp-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.exp-more[open]>summary{padding-bottom:6px}
/* У одного объявления в подробностях два блока, у набора — три: пустая треть справа
   выглядела бы как недогрузившийся блок. Два класса перекрывают правило страницы. */
.exp-more .exp-res{border-top:0}
.exp-res.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.exp-more .rp-calc{padding:4px 24px 22px}

/* ---------- заявка: роль ---------- */
.exp-lead-role{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--text-dim);cursor:pointer}
.exp-lead-role input{width:auto;margin:0}

/* ---------- «что снаружи не видно» ---------- */
.exp-lock-intro{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-cap)}

/* ---------- вторая дверь ---------- */
.exp-door{padding:14px 24px 18px;border-top:1px solid var(--sep-light)}
.exp-door a{font-size:15px;font-weight:600;color:var(--link)}
.exp-door a:hover{color:var(--link-hover,#36269e)}
.exp-door span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--text-cap)}

/* ---------- два пути для профиля ---------- */
.exp-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--sep-light)}
.exp-path{padding:18px 24px;min-width:0}
.exp-path+.exp-path{border-left:1px solid var(--sep-light)}
.exp-path>b{display:block;font-size:15.5px}
.exp-path>p{margin:6px 0 14px;font-size:14.5px;line-height:1.55;color:var(--text-cap)}
.exp-path .exp-lead{padding:0;border-top:0}

/* ---------- калькулятор ---------- */
.rp-calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.rp-calc-f{display:block;min-width:0}
.rp-calc-f span{display:block;margin-bottom:5px;font-size:14px;font-weight:600;line-height:1.35}
.rp-calc-f input{box-sizing:border-box;width:100%;padding:11px 13px;border:1px solid var(--sep);
  border-radius:10px;background:var(--bg);font-family:var(--font-ui,Raleway),system-ui,sans-serif;font-size:16px;
  color:var(--text);outline:0}
.rp-calc-f input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--brand-05)}
.rp-calc-f input::placeholder{color:var(--text-cap)}
.rp-calc-hint{margin:12px 0 0;font-size:13.5px;color:var(--text-cap)}
.rp-calc-note{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-cap)}
.rp-calc-out{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}
.rp-calc-o{min-width:0}
.rp-calc-o span{display:block;font-size:13px;line-height:1.35;color:var(--text-cap)}
.rp-calc-o b{display:block;margin-top:4px;font-family:var(--font-num,Unbounded),Raleway,sans-serif;font-size:17px;
  font-weight:600;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.rp-calc-o:last-child b{color:var(--accent-dark,#9e3606)}

/* Порог — как у страниц (800 px): иначе на планшете две колонки с разделителем сверху. */
@media (max-width:800px){
  .exp-res.n2{grid-template-columns:1fr}
}

@media (max-width:720px){
  .exp-v h3{font-size:19px}
  .exp-fix{margin:16px 16px 6px;padding:16px}
  .exp-fix-num{font-size:28px}
  .exp-paths{grid-template-columns:1fr}
  .exp-path+.exp-path{border-left:0;border-top:1px solid var(--sep-light)}
  .rp-calc-fields{grid-template-columns:1fr}
  .rp-calc-out{grid-template-columns:repeat(2,minmax(0,1fr))}
}
