/* /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)}
/* Оглавление операций — не липкое: раньше было sticky top:0 под шапкой (z-index ниже),
   висело за шапкой и переменной высотой (до ~120px) забрасывало якоря вглубь. Теперь это
   индекс в начале статьи; постоянная навигация — в левом дереве-сайдбаре. */
.rp-toc{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);
padding:10px 0;margin-bottom:8px;border-bottom:1px solid var(--line)}
/* white-space:normal, а не nowrap: чип с длинным названием операции иначе не помещается ни в
   какую строку и распирает страницу (см. комментарий у .rp-toc>div). Короткие чипы всё равно
   остаются в одну строку — перенос включается, только когда чип шире всей строки. */
.rp-toc a{white-space:normal;max-width:100%;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}
/* Схема — НЕ растягивать выше НАТИВНОГО размера (иначе мыло).
   Было `width:408px` — принудительная ширина, а не ограничение: у L6/L7 родные 408×228
   и всё совпадало, но у L9 родные 204×114 → браузер растягивал вдвое и превращал схему
   в кашу (замечено 19.07.2026). Теперь `width:auto` — каждая картинка показывается в свою
   натуральную величину, потолок 408 px и ширина колонки. Лайтбокс открывает нативный размер. */
.rp-loc figure{display:inline-block;margin:0}
.rp-loc img{width:auto;max-width:min(408px,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:calc(var(--header-h) + 8px)}
.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}
/* Подгруппа (h3) на странице системы: аккуратный подзаголовок над списком деталей */
.rp-sg{font-size:15px;font-weight:600;margin:14px 0 8px;display:flex;align-items:center;gap:10px}
.rp-sg a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rp-sg a:hover{border-color:var(--ink)}
.rp-sg .rp-ct{font-weight:400}
/* Номера иерархии заголовков (1 / 1.1 / 1.1.1) — приглушённые, моноширинные, не сливаются */
.rp-no{font-family:var(--mono);color:var(--faint);font-weight:400;margin-right:2px}

/* ── ничто не должно растягивать страницу по горизонтали ──
   ВАЖНО: НЕ ставить 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 figure{width:100%}
  /* картинку НЕ растягиваем и на мобиле — только вписываем, если шире экрана */
  .rp-loc img{width:auto;max-width:100%}
  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)}

/* ══════════ УКРУПНЕНИЕ (Фаза 1, 06.08.2026): страница-подгруппа + дерево навигации ══════════
   Макет-эталон: frontend/repair_nav_preview.html (утверждён Алексом «сейчас идеально»).
   Цвета — ТОЛЬКО переменные дизайн-системы, своих значений здесь нет. */
.rpx{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
.rpx-main{min-width:0}
/* --- дерево слева --- */
.rpx-tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
position:sticky;top:calc(var(--header-h) + 12px);max-height:calc(100vh - var(--header-h) - 24px);
display:flex;flex-direction:column;overflow:hidden}
.rpx-tree .tree-hd{padding:12px 13px;border-bottom:1px solid var(--line)}
.rpx-tree .tree-hd b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--faint);margin-bottom:8px}
.tree-find{width:100%;font:inherit;font-size:14px;padding:8px 11px;border:1.5px solid var(--line);
border-radius:var(--r-sm);outline:none;background:var(--bg);color:var(--ink)}
.tree-find:focus{border-color:var(--ink)}
.tree-body{overflow:auto;padding:6px 6px 12px;scrollbar-width:thin}
.tree-body .grp{margin:10px 8px 4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--faint);font-weight:700}
/* Текущая система — заголовок уровня «система»: крупнее узлов-подзаголовков и заметнее,
   чтобы иерархия «система → узел → страница» не переворачивалась (родитель > потомок). */
.tree-body .grp-cur{margin:11px 8px 5px;font-size:13.5px;letter-spacing:0;text-transform:none;
color:var(--ink);font-weight:700}
/* Заголовок системы кликабелен и ведёт в её раздел (и в серверном дереве, и в клиентском). */
.tree-body .grp-cur a,.tree-body .sys>summary a.sys-link{color:inherit;text-decoration:none}
.tree-body .grp-cur a:hover,.tree-body .sys>summary a.sys-link:hover{text-decoration:underline}
.tree-body .sys>summary a.sys-link{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-body .unit{margin:9px 10px 3px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
color:var(--faint);font-weight:700}
.tree-body>a,.tree-body .nodes a{display:flex;gap:8px;align-items:center;padding:6px 10px;
border-radius:var(--r-sm);font-size:13.4px;color:var(--ink-soft);text-decoration:none}
.tree-body a:hover{background:var(--hover);color:var(--ink)}
.tree-body a.on{background:var(--ink);color:#fff;font-weight:600}
.tree-body a.on .cnt{color:var(--on-dark-chip)}
.tree-body .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-body .cnt{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:600;flex:0 0 auto}
.tree-body .sys>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600}
.tree-body .sys>summary::-webkit-details-marker{display:none}
.tree-body .sys>summary:hover{background:var(--hover)}
.tree-body .chev{width:14px;height:14px;flex:0 0 auto;transition:transform .15s;color:var(--faint)}
.tree-body .sys[open]>summary .chev{transform:rotate(90deg)}
.tree-body .nodes{padding:2px 0 6px 10px;border-left:1px solid var(--line);margin-left:16px}
.tree-body mark{background:#FFF1C2;color:inherit;padding:0 1px;border-radius:3px}
.tree-body .empty{padding:14px 12px;font-size:13px;color:var(--faint)}
.tree-body .op-hit{font-size:12.6px;color:var(--muted);padding-left:20px}
/* --- сводка параметров узла --- */
.rp-params{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin:0 0 22px;
background:var(--line-soft)}
.rp-params h2{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.rp-sumline{margin:8px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.rp-sumline b{font-weight:600}
.rp-once-line{color:var(--neg)}
/* --- оглавление операций --- */
/* 🔴 Ряд чипов операций — источник горизонтального переполнения на мобильном (найдено 10.08.2026).
   `.rp-toc` — флекс с wrap, поэтому внутренний <div> уезжает на свою строку и СОХРАНЯЕТ ширину
   по содержимому; а сами чипы имеют white-space:nowrap, и длинное название («Компонент левого
   переднего рычага подвески: …») давало чип в 628px при экране 393px. Документ становился шире
   экрана, и следом растягивались ФИКСИРОВАННЫЕ элементы: нижний бар (.mobilebar) и плавающая
   строка комментариев (.lc-bar) — их «разъезд» был симптомом, а не причиной.
   До укрупнения не проявлялось: на странице была одна операция, ряд был коротким. */
.rp-toc>div{flex:1 1 100%;min-width:0}
.rp-toc b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
margin-bottom:8px;width:100%}
.rp-toc>div{display:flex;flex-wrap:wrap;gap:6px}
/* --- операция как блок страницы --- */
/* scroll-margin-top на САМОЙ секции (это она — цель якоря #op-…), а не на дочернем
   заголовке: иначе браузер прокручивает секцию под липкую шапку и заголовок прячется.
   Значение = высота липкой шапки + небольшой зазор. */
.rp-op{border-top:1px solid var(--line);padding:22px 0 4px;margin:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.rp-op-h{display:flex;gap:10px;align-items:baseline;font-size:20px;margin:0 0 6px}
.rp-op-n{flex:0 0 auto;min-width:26px;height:26px;border-radius:var(--r-pill);background:var(--ink);
color:#fff;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
padding:0 8px}
.rp-op-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;font-size:12px;color:var(--muted)}
.rp-op-meta span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px}
.rp-op-src{color:var(--faint)}
.rp-op h3{font-size:15px;margin:18px 0 8px}
.rp-loc-fig{margin:12px 0;display:inline-block}
.rp-loc-fig img{width:auto;max-width:min(408px,100%);height:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.rp-loc-fig figcaption{font-size:12px;color:var(--faint);margin-top:5px}
.rp-up{margin:14px 0 0;font-size:12.5px}
.rp-up a{color:var(--faint);text-decoration:none}.rp-up a:hover{color:var(--ink)}
/* --- применимость и соседи --- */
.rp-peers,.rp-near{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.rp-peers h2,.rp-near h2{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:0 0 10px}
.rp-peers>div,.rp-near>div{display:flex;flex-wrap:wrap;gap:8px}
.rp-peers a,.rp-near a{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;
font-size:13px;background:var(--line-soft);text-decoration:none;color:var(--ink-soft)}
.rp-peers a:hover,.rp-near a:hover{border-color:var(--ink);color:var(--ink)}
/* --- мобильная версия: панель + лист снизу (паттерн композера комментариев) --- */
.rpx-mob{display:none}
.rpx-sheet{display:none}
@media(max-width:900px){
  .rpx{grid-template-columns:1fr}
  .rpx-tree{display:none}
  /* на мобильном под шапкой ещё липнет панель .rpx-mob (~58px) — якоря должны очищать ОБА */
  .rp-op{scroll-margin-top:calc(var(--header-h) + 72px)}
  .rp-step{scroll-margin-top:calc(var(--header-h) + 66px)}
  .rpx-mob{display:flex;gap:8px;position:sticky;top:var(--header-h);z-index:40;background:var(--bg);padding:8px 0}
  .mob-btn{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font:inherit;font-size:14px;
  font-weight:600;color:var(--ink);cursor:pointer}
  .mob-btn small{color:var(--faint);font-weight:500}
  .rpx-sheet{position:fixed;inset:0;z-index:120;background:rgba(11,11,11,.45);display:none;align-items:flex-end}
  .rpx-sheet.open{display:flex}
  .rpx-sheet .sheet-in{background:var(--surface);width:100%;max-height:86vh;border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;overflow:hidden;animation:rpUp .2s ease}
  @keyframes rpUp{from{transform:translateY(24px)}to{transform:none}}
  .rpx-sheet .sheet-hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
  .rpx-sheet .sheet-row{display:flex;align-items:center;gap:10px}
  .rpx-sheet .sheet-row b{font-size:15px}
  .sheet-x{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
  .rpx-sheet .tree-body{overflow:auto;padding:6px 8px calc(20px + env(safe-area-inset-bottom))}
  .rp-op-h{font-size:17px}
}
@media(min-width:901px){.rpx-sheet{display:none!important}}