/* CarDir · страницы кодов OBD (/obd/{code}/) и симптомов P6 — редизайн 23.10 (results/2026-10-23-ux, prototypes/obd-code.html).
   Только токены :root из site.css (с запасными значениями). Грузится из шаблонов code_obd.html и page_symptom.html. */

/* --- раскладка OBD: статья + колонка паспорта --- */
.obdp{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin:6px 0 30px}
@media (min-width:1000px){.obdp{grid-template-columns:minmax(0,1fr) 320px;gap:36px}.obdp-s{position:sticky;top:var(--top,16px);align-self:start}}
.obdp-a>section{margin-top:26px}
.obdp-a h2{font-size:clamp(22px,4vw,27px);margin:0 0 12px}

/* --- первый экран: бейдж кода + расшифровка + анатомия --- */
.obd-hero{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:8px}
.obd-badge{font:800 clamp(34px,9vw,54px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;
  background:var(--hdr,#101316);color:#fff;border-radius:var(--r2,18px);padding:16px 20px;font-variant-numeric:tabular-nums;flex:none}
.obd-hero-b{flex:1;min-width:250px}
.obd-hero .eyebrow{margin:0 0 6px}
.obd-hero .obd-h1{display:block;margin:0;font-size:clamp(24px,5vw,34px);line-height:1.15}
.obd-hero .obd-code{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* код — в бейдже, в H1 для поисковика */
.obd-hero .obd-dec{font:inherit;color:var(--ink,#121417)}
.obd-en{margin:8px 0 0;color:var(--ink3,#5c646e);font-size:14px}
.obd-anat{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:12px 0 0}
.obd-anat li{border:1px solid var(--line,#e1e4e8);background:var(--card,#fff);border-radius:9px;padding:5px 10px;font-size:13px;color:var(--ink2,#3f464e)}
.obd-anat b{font:700 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--brand,#d42a2a);margin-right:6px}

/* --- «светофор»: можно ли ехать --- */
.verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:20px!important}
.vcell{border-radius:var(--r,12px);padding:13px 15px 13px 17px;border:1px solid var(--line,#e1e4e8);background:var(--card,#fff);position:relative;overflow:hidden}
.vcell:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.vcell b{display:flex;align-items:center;gap:8px;font-size:15.5px;line-height:1.25;margin-bottom:4px}
.vcell b:before{content:"";width:11px;height:11px;border-radius:50%;flex:none}
.vcell span{display:block;font-size:14px;line-height:1.45;color:var(--ink2,#3f464e)}
.vcell.red{background:color-mix(in srgb,var(--bad,#c23434) 7%,var(--card,#fff))}.vcell.red:before,.vcell.red b:before{background:var(--bad,#c23434)}
.vcell.amber{background:var(--warn-bg,#fdf1dc)}.vcell.amber:before,.vcell.amber b:before{background:var(--or,#dc6516)}
.vcell.green{background:var(--ok-bg,#e3f3e6)}.vcell.green:before,.vcell.green b:before{background:var(--ok,#1f7334)}
.obd-note{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:11px 14px;border-radius:var(--r,12px);background:var(--cream,#faf5ea);
  border:1px solid var(--cream2,#f0e5cf);color:var(--ink2,#3f464e);font-size:14px}
.obd-note .ic{flex:none;margin-top:2px;color:var(--or,#dc6516)}

/* --- код на вашей машине --- */
.obd-car{border:1.5px dashed var(--line2,#cfd4da);border-radius:var(--r2,18px);padding:16px 18px;background:var(--bg2,#f4f5f7)}
.obd-car h2{margin-bottom:4px!important}
.om-sub{margin:0 0 12px;color:var(--ink3,#5c646e);font-size:14.5px}
.om-sel select{width:100%;max-width:360px;min-height:46px;border:1.5px solid var(--line2,#cfd4da);border-radius:999px;padding:0 16px;
  font:500 16px var(--ff,system-ui);background:var(--card,#fff);color:var(--ink,#121417)}
.om-hot{margin:10px 0 0;font-size:14px;color:var(--ink3,#5c646e);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.om-hot a{border:1px solid var(--line2,#cfd4da);border-radius:999px;padding:4px 12px;background:var(--card,#fff);color:var(--ink,#121417);font-weight:600}
.om-list{display:grid;gap:8px;margin-top:12px}
.js .om-list .om-b{display:none}.js .om-list .om-b.on{display:block}
.om-b{border:1px solid var(--line,#e1e4e8);border-radius:var(--r,12px);background:var(--card,#fff)}
.om-b summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
.om-b summary::-webkit-details-marker{display:none}
.om-b summary small{color:var(--ink3,#5c646e);font-weight:400;margin-left:6px}
.om-b ul{list-style:none;margin:0;padding:0 10px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.om-b li a{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:var(--bg2,#f4f5f7);text-decoration:none!important;min-height:44px;justify-content:center}
.om-b li a b{color:var(--ink,#121417);font-weight:600;font-size:14.5px}
.om-b li a small{color:var(--acc,#0a7571);font-size:12.5px}
.om-b li a:hover{background:var(--acc-bg,#e2f2f0)}
.om-b .more{display:inline-block;margin:0 14px 12px}

/* --- шаги, тонкая сноска --- */
.obdp-a .steps{margin-bottom:10px}
.obd-fine{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink3,#5c646e);margin:0}
.obd-fine .ic{flex:none;margin-top:2px}

/* --- чипы кодов --- */
.ochips{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.ochips a{display:flex;flex-direction:column;gap:1px;padding:9px 13px;border:1px solid var(--line,#e1e4e8);border-radius:var(--r,12px);background:var(--card,#fff);
  text-decoration:none!important;min-height:44px;justify-content:center}
.ochips a:hover{border-color:var(--acc,#0a7571)}
.ochips b{font:700 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink,#121417)}
.ochips small{font-size:12.5px;color:var(--ink3,#5c646e);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ochips.sm{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.ochips.sm a{align-items:center;padding:7px 8px}
.obd-near{margin-top:10px}.obd-near summary{cursor:pointer;color:var(--acc,#0a7571);font-weight:600;padding:6px 0}
.obd-near .ochips{margin-top:8px}
.obd-more{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0}

/* --- колонка: паспорт кода --- */
.ocard{border:1px solid var(--line,#e1e4e8);border-radius:var(--r2,18px);background:var(--card,#fff);padding:15px 17px;margin-bottom:14px}
.ocard-h{display:flex;align-items:center;gap:8px;font:700 13px var(--ff,system-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ok,#1f7334);margin:0 0 10px}
.okv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:14px}
.okv dt{color:var(--ink3,#5c646e)}.okv dd{margin:0;color:var(--ink,#121417)}
.ocard-n{font-size:13px;color:var(--ink3,#5c646e);margin:10px 0 0}
.ocard .src{font-size:13px}

/* --- P6 симптомы: «светофор» и «следующий шаг» --- */
.p6-verdict{margin-top:14px!important}
.p6-next{margin:18px 0 6px}
.p6-next h2{font-size:clamp(19px,3.4vw,22px);margin:0 0 10px}
.p6-next ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.p6-next a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:var(--r,12px);border:1.5px solid var(--line2,#cfd4da);
  background:var(--card,#fff);color:var(--ink,#121417);font-weight:600;text-decoration:none!important;min-height:48px}
.p6-next a:hover{border-color:var(--acc,#0a7571);color:var(--acc,#0a7571)}
.p6-next a .ic{color:var(--acc,#0a7571)}

@media (max-width:600px){
  .obd-hero{gap:12px}.obd-badge{padding:10px 14px}
  .verdict{grid-template-columns:1fr;gap:8px}
  .obd-car{padding:14px}
  .ochips{grid-template-columns:1fr}
  .ochips.sm{grid-template-columns:repeat(4,1fr)}
}
@media print{.obd-car,.obd-go,.obdp-s .ochips{display:none}}