/* Статьи Мотосправочника (импорт пакета 2026-10-11): вступление, оглавление, разделы, рисунки,
   списки проверки, переходы, источники. Перенесено из style.css / obkatka.css / all-articles.css /
   pitbike.css / enduro.css / cross.css пакета с двумя правилами:
   1) ВСЁ ограничено контейнером .article — правила не должны задевать шапку/подвал сайта;
   2) никаких inline-стилей (CSP сайта: style-src 'self') — положение меток узлов задаёт guide-article.js.
   Токены (--line, --surface, --gold, --gold-dim, --text, --muted) — из shop-shared.css. */

html{scroll-behavior:smooth; scroll-padding-top:100px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
.skip{position:fixed; left:12px; top:-60px; z-index:90; padding:12px; background:var(--gold); color:#000;}
.skip:focus{top:12px;}

/* контейнер: ширину и поля уже даёт .gwrap, свои отступы не нужны */
.gwrap > .article{max-width:none; width:100%; min-width:0; margin:0; padding:0;}
.article :focus-visible{outline:2px solid var(--gold); outline-offset:5px;}
.article figure{margin:0; min-width:0;}
.article img{max-width:100%; height:auto;}

.article .back{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; display:inline-block; margin-bottom:36px;}
.article .back:hover{color:var(--gold);}

.article .intro{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;}
.article .eyebrow,.article .section-no,.article .small-label{color:var(--gold); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;}
.article .eyebrow{margin-bottom:18px;}
.article h1{font-size:clamp(30px,3.7vw,46px); line-height:1.14; font-weight:800; letter-spacing:-.045em; margin:0 0 24px; color:var(--text);}
.article h1 span{color:var(--gold);}
.article .lead{font-size:16px; line-height:1.8; color:#cbc8c0; margin:0;}

.article figure img,.article .diagram img{width:100%; display:block; border-radius:14px;}
.article figcaption,.article .caption{font-size:11px; color:var(--muted); line-height:1.6; margin:12px 0 0;}
.article .intro-image img{aspect-ratio:3/2; object-fit:contain; background:#0b0b0c;}
.article .image-detail,.article .image-detail:link,.article .image-detail:visited,
.article .image-detail:hover,.article .image-detail:active{display:block; color:var(--gold); text-decoration:none; margin-top:7px;}
.article .image-detail:focus-visible{outline-color:var(--gold);}

.article .contents{display:flex; flex-wrap:wrap; gap:12px 20px; padding:21px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:36px 0 0; font-size:12px;}
.article .contents span{color:var(--muted);}
.article .contents a{color:var(--text); text-decoration:none; line-height:1.6;}
.article .contents a:hover{color:var(--gold);}

.article section{padding-top:48px; margin-top:6px;}
.article .section-no{margin-bottom:13px;}
.article h2{font-size:28px; letter-spacing:-.035em; line-height:1.25; margin:0 0 20px; color:var(--text); scroll-margin-top:100px;}
.article h3{font-size:17px; line-height:1.4; margin:0 0 10px; color:var(--text);}
.article p{font-size:15px; line-height:1.8; color:#d9d5c9; margin:0 0 16px;}
.article section > p{max-width:770px;}
.article li{color:#d9d5c9; font-size:15px; line-height:1.8; margin-bottom:12px;}
.article .pitbike-body a,.article .source a{color:var(--gold);}

.article .note{background:#151412; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; padding:20px 24px; margin:26px 0;}
.article .note b{font-size:15px;}
.article .note p{margin:8px 0 0; font-size:14px;}
.article .stop-note{border-left-color:#c28b35;}

/* схема с метками узлов (положение меток задаёт guide-article.js из data-x / data-y) */
.article .parts-layout{display:grid; grid-template-columns:1.15fr 1fr; gap:20px; margin-top:25px;}
.article .diagram{position:relative; border:1px solid var(--line); border-radius:14px; align-self:start; overflow:hidden;}
.article .diagram img{aspect-ratio:3/2; object-fit:contain; background:#0b0b0c;}
.article .pin{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); background:#171511; color:var(--gold); border:1px solid var(--gold-dim); border-radius:50%; width:34px; height:34px; cursor:pointer; font-weight:800; box-shadow:0 0 0 4px #0b0b0b80;}
.article .pin.selected{background:var(--gold); color:#171100;}
.article .part-tabs{display:flex; flex-wrap:wrap; gap:6px;}
.article .part-tabs button{padding:9px 11px; background:var(--surface); border:1px solid var(--line); border-radius:7px; color:#aaa79e; font-size:11px; cursor:pointer;}
.article .part-tabs button.selected{color:var(--gold); border-color:var(--gold-dim); background:#201b10;}
.article .part-description{padding:20px 0 0;}
.article .part-description p{font-size:14px; line-height:1.75;}
.article .part-description .look{color:var(--muted); font-size:12px;}

.article .flow{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 0 28px;}
.article .flow span{font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:10px 13px;}
.article .flow i{font-style:normal; color:var(--gold);}
.article .split{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.article .split figure{align-self:start;}
.article .split figure img{aspect-ratio:3/2; object-fit:contain; background:#0b0b0c;}
.article .split p{font-size:14px; line-height:1.8;}
.article .split h3:not(:first-child){margin-top:24px;}
.article .wide-figure{max-width:740px; margin:26px auto;}
.article .wide-figure img{aspect-ratio:3/2; object-fit:contain; background:#0b0b0c;}
.article .control-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin:28px 0;}
.article .control-grid > div{border-top:1px solid var(--line); padding:23px 0 10px;}
.article .control-grid .small-label{display:block; margin-bottom:9px;}
.article .control-grid p{font-size:14px;}
.article .steps{list-style:none; counter-reset:steps; padding:0; margin:26px 0;}
.article .steps li{counter-increment:steps; position:relative; padding:0 0 25px 52px; margin:0;}
.article .steps li:before{content:'0' counter(steps); position:absolute; left:0; top:0; font-size:17px; color:var(--gold); font-weight:700;}
.article .steps b{font-size:15px;}
.article .steps p{font-size:14px; margin:7px 0 0;}
.article .finish{border:1px solid var(--line); border-radius:12px; padding:25px; background:var(--surface);}
.article .finish p{font-size:14px;}
.article .next{display:flex; align-items:center; justify-content:space-between; color:var(--gold); border-top:1px solid var(--line); padding-top:16px; text-decoration:none; font-size:13px; font-weight:700;}

/* график команды (питбайк): карточки не переполняют экран телефона */
.article .service-timeline{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:24px 0;}
.article .service-timeline > div{border:1px solid #695325; border-radius:10px; padding:16px; background:#14120e;}
.article .service-timeline b{display:block; color:#e3ba4d; font-size:23px; margin-bottom:8px;}
.article .service-timeline span{display:block; font-size:13px; line-height:1.5; color:#c9c5bb;}

/* списки проверки: Эндуро / Кросс и скутеры */
.article .enduro-checklist,.article .cross-checklist{border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--surface);}
.article .enduro-checklist label,.article .cross-checklist label{display:flex; align-items:flex-start; gap:12px; line-height:1.7; margin:16px 0; cursor:pointer;}
.article .enduro-checklist input,.article .cross-checklist input{accent-color:var(--gold); margin-top:7px; width:18px; height:18px; flex-shrink:0;}
.article .enduro-checklist label:has(input:checked),.article .cross-checklist label:has(input:checked){color:#a19b88;}
.article .enduro-checklist button,.article .cross-checklist button{background:var(--gold); color:#0b0b0c; padding:10px 16px; border:0; border-radius:6px; font:inherit; cursor:pointer;}
.article .check-progress{font-size:12px; color:var(--muted);}

/* списки проверки Альфы (панель и обкатка) */
.article .check-panel,.article .checklist{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; margin-top:24px;}
.article .check-heading,.article .checklist-head{display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:15px;}
.article .check-heading h3,.article .checklist-head h3{margin:0;}
.article .check-heading span,.article .checklist-head span{font-size:11px; color:var(--gold);}
.article .check-row{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); cursor:pointer; font-size:14px;}
.article .check-row input{accent-color:var(--gold); width:18px; height:18px; flex-shrink:0; margin:2px 0;}
.article .check-row span{line-height:1.6;}
.article .check-row:has(input:checked) span{color:var(--gold);}
.article .check-help{font-size:12px; color:var(--muted); margin-top:10px;}
.article .checklist label{display:flex; align-items:flex-start; gap:15px; border-top:1px solid var(--line); padding:17px 0; cursor:pointer;}
.article .checklist input{accent-color:var(--gold); width:18px; height:18px; margin:2px 0 0; flex-shrink:0;}
.article .checklist b{font-size:14px; line-height:1.4; display:block;}
.article .checklist small{display:block; font-size:12px; line-height:1.7; color:#b9b6ae; margin-top:5px;}
.article .checklist label:has(input:checked) b{color:var(--gold);}
.article .checklist-bottom{border-top:1px solid var(--line); padding-top:15px; display:flex; justify-content:space-between; align-items:center; gap:15px;}
.article .checklist-bottom span,.article #check-result{font-size:12px; color:var(--muted); line-height:1.6;}
.article .checklist-bottom button,.article #check-reset{background:transparent; border:1px solid var(--line); border-radius:7px; padding:9px 11px; color:var(--text); font-size:11px; cursor:pointer; white-space:nowrap;}
.article .checklist-bottom button:hover,.article #check-reset:hover{border-color:var(--gold-dim); color:var(--gold);}
.article .model-example{border:1px solid var(--line); border-radius:12px; padding:25px; background:var(--surface); margin:24px 0;}
.article .example-label{color:var(--gold); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.07em; margin-bottom:12px;}
.article .model-example > p{font-size:14px;}
.article .stage-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0;}
.article .stage-grid > div{border-top:2px solid var(--gold-dim); padding:20px 0 0;}
.article .stage-index{font-size:11px; color:var(--muted);}
.article .stage-grid h3{margin-top:8px; font-size:24px;}
.article .stage-grid p{font-size:14px; margin-bottom:0;}
.article .stage-grid b{color:var(--gold);}
.article .stage-explain{font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:15px; margin-bottom:0;}

/* переходы между статьями и источники */
.article .article-pager{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px;}
.article .article-pager a{display:flex; flex-direction:column; position:relative; border:1px solid var(--line); border-radius:10px; padding:20px 42px 20px 20px; color:var(--text); text-decoration:none;}
.article .article-pager small{color:var(--muted); font-size:11px; margin-bottom:9px;}
.article .article-pager b{font-size:13px; line-height:1.5;}
.article .article-pager span{position:absolute; right:18px; top:50%; color:var(--gold);}
.article .article-pager a:hover{border-color:var(--gold-dim);}
.article .guide-products{margin:36px 0;padding:24px;border:1px solid var(--line);border-radius:12px}
.article .guide-numbers{margin:28px 0;padding:20px;border-left:3px solid var(--gold);background:#1b1b1b}
.article .guide-products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.article .guide-products-grid a{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}
.article .guide-products-grid img{width:76px;height:76px;object-fit:contain}
@media(max-width:600px){.article .guide-products-grid{grid-template-columns:1fr}}
.article .source{border-top:1px solid var(--line); margin-top:26px; padding-top:18px; font-size:11px; line-height:1.8; color:var(--muted);}
.article .source p{font-size:11px; line-height:1.8; color:var(--muted); margin:0 0 6px;}
.article [hidden]{display:none !important;}
.article .art-cta p{margin:0; font-size:13.5px; color:var(--muted); max-width:360px;}

@media(max-width:760px){
  .article .intro,.article .parts-layout,.article .split{grid-template-columns:1fr;}
  .article .intro{gap:22px;}
  .article .intro-image img{max-height:300px;}
  .article .back{margin-bottom:26px;}
  .article .contents{margin-top:25px; gap:13px 17px;}
  .article .contents span{width:100%;}
  .article h1{font-size:34px;}
  .article h2{font-size:25px;}
  .article .lead{font-size:14px;}
  .article .control-grid{grid-template-columns:1fr; gap:0;}
  .article .wide-figure{margin:20px 0;}
  .article section{padding-top:37px;}
  .article .note{padding:17px 18px;}
}
@media(max-width:600px){
  .article .service-timeline{grid-template-columns:repeat(2,minmax(0,1fr));}
  .article .service-timeline b{font-size:20px;}
  .article .check-panel,.article .checklist,.article .model-example{padding:18px;}
  .article .check-heading,.article .checklist-head{align-items:flex-start; flex-direction:column; gap:5px;}
  .article .checklist-bottom{align-items:flex-start; flex-direction:column;}
  .article .stage-grid{gap:14px;}
  .article .stage-grid h3{font-size:21px;}
  .article .stage-grid p{font-size:12px;}
  .article .article-pager{grid-template-columns:1fr;}
}
@media(max-width:359px){
  .article h1{font-size:29px;}
  .article .stage-grid{grid-template-columns:1fr;}
}

/* F-14 (мобильные области нажатия): вид не меняется — область нажатия ≥44px достигается невидимым ::after / padding с компенсирующим margin. Только телефон; десктоп не затронут. */
@media(max-width:760px){
  .article .back{padding:14px 0; margin-top:-14px; margin-bottom:12px;}     /* 16px → 44px, отступ тот же (26px) */
  .article .image-detail,.article .image-detail:link,.article .image-detail:visited,
  .article .image-detail:hover,.article .image-detail:active{padding:13px 0; margin-top:-6px; margin-bottom:-13px;}   /* 18px → 44px */
  .article .contents{gap:0 17px;}
  .article .contents a{display:inline-flex; align-items:center; min-height:44px;}   /* пункты оглавления: 19px → 44px */
  .article .source a{display:inline-block; padding:12px 0; margin:-12px 0;}
  .article .part-tabs button{min-height:44px;}
  .article .pin{overflow:visible;}
  .article .pin::after{content:""; position:absolute; inset:-6px;}          /* метки на схеме: 34px → 44px (рамка 1px) */
  .article .enduro-checklist label,.article .cross-checklist label{padding:9px 0; margin:7px 0;}   /* строка списка: 28px → 46px */
  .article .enduro-checklist button,.article .cross-checklist button,
  .article .checklist-bottom button,.article #check-reset{min-height:44px;}
  .article .next{min-height:44px; box-sizing:border-box;}
}

/* ===== Диагностические статьи «проблема → порядок проверки» (2026-10-26) =====
   Перенесено из diagnostic-article.css / plain-language.css пакета. Всё под .article; токены сайта
   (--surface вместо --panel пакета). Список проверки — .diag-checklist (не пересекается с .checklist Альфы). */
.article .diagnostic-intro{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin:30px 0;}
.article .diagnostic-intro h1{font-size:clamp(30px,3.8vw,45px); letter-spacing:-.03em; margin-bottom:18px;}
.article .diagnostic-intro .lead{font-size:16px; margin-bottom:0;}
.article .model-note,.article .stop,.article .diag-checklist{padding:23px; border:1px solid var(--line); border-radius:9px; background:var(--surface); margin:25px 0;}
.article .model-note strong{color:var(--gold); font-size:13px;}
.article .model-note p{margin:8px 0 0; font-size:14px; color:var(--muted);}
.article .article-contents{display:flex; flex-wrap:wrap; gap:15px; justify-content:flex-start; margin:30px 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.article .article-contents a{font-size:12px; color:var(--text); text-decoration:none; line-height:1.6;}
.article .article-contents a:hover{color:var(--gold);}
.article .before,.article .diagnostic-step,.article .result,.article .related,.article .sources{padding:25px 0; scroll-margin-top:20px;}
.article .diagnostic-step h2{margin:10px 0;}
.article .diagnostic-step p,.article .before p,.article .stop p,.article .result > p{max-width:810px; color:#d3d0c4;}
.article .diagnostic-step figure{max-width:760px; margin:26px auto 5px;}
.article .stop{border-left:3px solid var(--gold);}
.article .stop h2{font-size:19px;}
.article .diag-checklist h3{margin:0 0 6px;}
.article .diag-checklist label{display:flex; gap:12px; align-items:flex-start; margin:0; padding:12px 0; cursor:pointer; line-height:1.6; font-size:14px; color:#d9d5c9;}
.article .diag-checklist input{width:19px; height:19px; accent-color:var(--gold); flex:none; margin-top:3px;}
.article .diag-checklist label:has(input:checked){color:#a19b88;}
.article .diag-checklist button{padding:10px 14px; background:transparent; color:var(--gold); border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; cursor:pointer;}
.article .diag-checklist button:hover{border-color:var(--gold-dim);}
.article .diag-checklist [data-diag-progress]{font-size:13px; color:var(--muted); margin:8px 0 12px;}
.article .related{border-top:1px solid var(--line);}
.article .related > p,.article .sources p{color:var(--muted); font-size:13px;}
.article .related > a,.article .other-problems a{display:block; padding:15px 0; color:var(--gold); border-bottom:1px solid var(--line); text-decoration:none;}
.article .other-problems{display:grid; grid-template-columns:1fr 1fr; gap:0 25px;}
.article .sources{font-size:13px;}
.article .sources h2{font-size:19px;}
.article .sources a{color:var(--gold);}
.article .sources li{font-size:13px; line-height:1.7; color:var(--muted);}

/* пояснения терминов (языковая редактура, scripts/lib/plain-language.mjs) */
.article .guide-terms{margin:24px 0; padding:16px 20px; border:1px solid #38372d; border-radius:8px; background:#151510; color:#d3d0c4;}
.article .guide-terms summary{cursor:pointer; color:#d9b336; font-size:15px; font-weight:600; min-height:24px;}
.article .guide-terms dl{margin:18px 0 0;}
.article .guide-terms dt{font-weight:700; color:#f1efe6; margin:16px 0 5px; font-size:15px;}
.article .guide-terms dd{margin:0; font-size:14px; line-height:1.65; max-width:850px; color:#d3d0c4;}

@media(max-width:700px){
  .article .diagnostic-intro{grid-template-columns:1fr; gap:24px;}
  .article .diagnostic-intro h1{font-size:32px;}
  .article .article-contents{margin-top:20px; gap:0 17px;}
  .article .other-problems{grid-template-columns:1fr;}
  .article .model-note,.article .stop,.article .diag-checklist{padding:18px;}
  .article .diagnostic-step{padding:22px 0;}
  .article .diagnostic-step h2{font-size:23px;}
  /* область нажатия ≥44px (как в F-14), вид не меняется */
  .article .article-contents a{display:inline-flex; align-items:center; min-height:44px;}
  .article .diag-checklist label{min-height:44px; box-sizing:border-box;}
  .article .diag-checklist button{min-height:44px;}
  .article .guide-terms summary{display:flex; align-items:center; min-height:44px;}
  .article .sources a{display:inline-block; padding:12px 0; margin:-12px 0;}
}