/* /repair/ — дизайн-система LiAuto Elements */
.rp-sub{color:var(--muted);font-size:15px;margin-bottom:10px}
.rp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.rp-meta span{background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:3px 11px;font-size:12px;color:var(--muted)}
.rp-disc{margin:0 0 24px}                      /* юр. оговорка — красной плашкой, первым блоком */
.rp-disc p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.rp-toc{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);
padding:10px 0;margin-bottom:8px;border-bottom:1px solid var(--line)}
.rp-toc a{white-space:nowrap;font-size:13px;color:var(--muted);text-decoration:none;padding:5px 11px;border:1px solid var(--line);border-radius:100px;background:var(--surface)}
.rp-toc a:hover{color:var(--ink);border-color:var(--ink)}
.rp-cnt{font-size:12px;color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0;margin-left:6px}
.rp-hint{display:block;margin:-6px 0 10px;font-size:12px;color:var(--faint)}   /* пояснение под заголовком */
.rp-warn{background:var(--neg-bg);border:1px solid #F0D4D1;border-left:3px solid var(--neg);border-radius:12px;padding:16px 20px;margin:20px 0}
.rp-warn h2{color:var(--neg);margin:0 0 8px;font-size:13px}
.rp-warn ul{margin:0;padding-left:18px}.rp-warn li{margin:5px 0;font-size:14px;color:var(--ink-soft)}
.rp-note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:14px}
.rp-note b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:6px}
.rp-note ul{margin:0;padding-left:18px}.rp-note li{margin:4px 0}.rp-note p{margin:0}
/* Схема — НЕ растягивать выше нативных 408 px (иначе мыло). На Retina это ровно 2× → чётко. */
.rp-loc figure{display:inline-block;margin:0}
.rp-loc img{width:408px;max-width:100%;height:auto;image-rendering:auto;
border:1px solid var(--line);border-radius:8px;cursor:zoom-in;background:#fff}
.rp-tools,.rp-torques{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px;margin-bottom:8px}
.rp-tools th,.rp-torques th{background:var(--surface-2);text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.rp-tools td,.rp-torques td{padding:10px 12px;border-top:1px solid var(--line-soft);vertical-align:middle}
.rp-tools img{width:110px;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}
.rp-tq{font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap}
.rp-muted{color:var(--muted);font-size:13px}
.rp-prep{margin:0;padding-left:20px}.rp-prep li{padding:4px 0;font-size:14px}
.rp-prep a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rp-prep a:hover{border-color:var(--ink)}
/* пункт без отдельной инструкции в мануале — не ссылка, но и не «битая» */
.rp-book{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rp-book:hover{border-color:var(--ink)}
.rp-src{font-size:11px;color:var(--faint);margin-left:6px;border:1px solid var(--line);
border-radius:100px;padding:1px 7px;white-space:nowrap}
.rp-noref{color:var(--muted)}
.rp-noref:after{content:" — отдельной инструкции в мануале нет";font-size:11.5px;color:var(--faint)}
.rp-prep.rp-fold li:nth-child(n+9){display:none}.rp-prep.rp-open li{display:list-item!important}
.rp-more{margin-top:8px;background:none;border:1px solid var(--line);border-radius:100px;padding:5px 14px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.rp-more:hover{color:var(--ink);border-color:var(--ink)}
.rp-steps{list-style:none;margin:0;padding:0}
.rp-step{display:grid;grid-template-columns:210px 1fr;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px;align-items:start;scroll-margin-top:60px}
.rp-step--nofig{grid-template-columns:1fr}          /* нет схемы — текст во всю ширину */
.rp-fig{margin:0}
.rp-fig img{width:100%;max-width:408px;border:1px solid var(--line);border-radius:8px;
background:#fff;cursor:zoom-in}   /* колонка 210px × DPR2 = 420 ≈ нативные 408 → Retina-чётко */
.rp-n{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:50%;font-size:12px;font-weight:700;margin-bottom:6px}
.rp-body p{margin:0 0 8px;font-size:15px;color:var(--ink)}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px}
.rp-chip{font-size:12px;background:var(--hover);border:1px solid var(--line);border-radius:100px;padding:2px 9px;color:var(--muted)}
.rp-torque{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;font-family:var(--mono)}
.rp-pn{font-family:var(--mono);font-size:11.5px}
.rp-once{background:var(--neg-bg);border-color:#F0D4D1;color:var(--neg);font-weight:600}
/* индекс: карточки-плитки, счётчик справа В ССЫЛКЕ */
.rp-index{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rp-index li{margin:0}
.rp-index a{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 16px;
color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35;height:100%}
.rp-index a:hover{border-color:var(--ink)}
.rp-nm{flex:1}
.rp-ct{flex:none;color:var(--faint);font-size:12px;font-family:var(--mono);
background:var(--hover);border-radius:100px;padding:2px 9px}
@media(max-width:640px){.rp-index{grid-template-columns:1fr}}
.rp-lead{color:var(--muted);margin-bottom:24px}

/* ── ничто не должно растягивать страницу по горизонтали ──
   ВАЖНО: НЕ ставить overflow-x:hidden на html/body — это создаёт новый контекст прокрутки
   и ЛОМАЕТ position:sticky у шапки (она перестаёт липнуть). Ограничиваем ширину точечно. */
/* НЕ трогаем .wrap — его ширину задаёт общий style.css (иначе страница растянется на весь экран) */
.rp-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.rp-toc{max-width:100%}
.rp-chips,.rp-meta{flex-wrap:wrap}                    /* правило проекта: ряды переносятся */
.rp-chip,.rp-meta span{max-width:100%;overflow-wrap:anywhere}

@media(max-width:640px){
  .rp-step{grid-template-columns:1fr}
  .rp-loc img,.rp-loc figure{width:100%;max-width:408px}
  h1{font-size:26px}
  /* навигация: переносим по строкам, не лента со скроллом; на телефоне не липкая —
     иначе 2–3 ряда чипов съедают пол-экрана при прокрутке */
  .rp-toc{position:static;flex-wrap:wrap;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
  .rp-toc a{padding:6px 11px;font-size:12.5px}

  /* таблица инструмента → карточки: 5 колонок на телефон не влезают ни при каком раскладе */
  .rp-tools{border:0;background:none}
  .rp-tools thead{display:none}
  .rp-tools tbody,.rp-tools tr,.rp-tools td{display:block;width:100%}
  .rp-tools tr{background:var(--surface);border:1px solid var(--line);border-radius:12px;
               padding:12px 14px;margin-bottom:10px}
  .rp-tools td{border:0;padding:4px 0;display:flex;gap:10px;align-items:flex-start}
  .rp-tools td:before{content:attr(data-l);flex:0 0 92px;font-size:11px;text-transform:uppercase;
                      letter-spacing:.05em;color:var(--faint);padding-top:2px}
  .rp-tools td figure{flex:1}
  .rp-tools img{width:100%;max-width:200px}

  .rp-torques td:first-child{max-width:none}
  .rp-torques{font-size:13px}
}

.rp-snote{margin-top:10px;background:var(--surface-2);border-left:2px solid var(--faint);border-radius:0 8px 8px 0;padding:9px 13px;font-size:13.5px;color:var(--ink-soft)}
.rp-snote b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:4px;font-weight:600}
.rp-snote ul{margin:0;padding-left:16px}.rp-snote li{margin:3px 0}

/* точечно: длинные строки не рвут разметку (замена глобальному overflow-x:hidden) */
.rp-step,.rp-body,.rp-snote,.rp-note,.rp-warn,.rp-index,.rp-prep{min-width:0;overflow-wrap:anywhere}
.rp-body p,.rp-snote li,.rp-warn li{overflow-wrap:anywhere}

/* хлебные крошки: ссылки должны читаться как ссылки (в общем стиле они серые без подчёркивания) */
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--line)}