/* ═══════════════════════════════════════════════════════════════════
   PPKLink — витрина. ТЕЛЕФОНЫ И ПЛАНШЕТЫ.
   Подключается ПОСЛЕ sections.css (и device.css на главной) и только
   дополняет базовый набор. Десктоп (шире 1024 px и с мышью) остаётся
   прежним: правила либо спрятаны за медиазапросом по ширине, либо не
   меняют раскладку вовсе.
   Разбор по местам — комментарии ниже: каждое правило чинит то, что
   реально ломалось на снимках 320 · 360 · 390 · 430 · 768 · 1024.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. ЯКОРЯ ПОД ЛИПКОЙ ШАПКОЙ ──────────────────────────────────
   Шапка высотой 62 px закреплена сверху, и переход по пункту меню
   прятал заголовок раздела ПОД неё. Раскладку правило не трогает. */
section[id],div[id]{scroll-margin-top:76px}

/* ─── 2. ЧТО ПРОКРУЧИВАЕТСЯ ВБОК, ТО И ВЫГЛЯДИТ ПРОКРУЧИВАЕМЫМ ────
   Мнемосхема линии шире телефона (min-width 860 px) и ездит внутри
   своего блока. Понять это можно было только случайным движением
   пальца. Теперь у правого борта лежат тень и шеврон, и оба
   ИСЧЕЗАЮТ САМИ, когда докрутили до конца.
   ⚠ Приём на двух видах background-attachment: слой local едет
   вместе с содержимым и закрывает собой слой scroll, приклеенный к
   самому блоку. JS не нужен, и на широком экране (прокрутки нет)
   слои совпадают — подсказка не показывается вообще.
   ⚠ Шеврон стоит В ПОЛЕ отступа, а не поверх рисунка: фон рисуется
   ПОД содержимым, и на схеме он читался бы как грязь. */
.line-scroll{--sc:var(--surface);--sc-sh:rgba(16,18,26,.3)}
.cfg-line{--sc:var(--canvas)}
html[data-theme="dark"] .line-scroll{--sc-sh:rgba(0,0,0,.75)}
.line-scroll{
  background-image:
    linear-gradient(90deg,var(--sc) 45%,transparent),
    linear-gradient(270deg,var(--sc) 62%,transparent),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' fill='none' stroke='%238b8e99' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l3 3-3 3M9 2l3 3-3 3M16 2l3 3-3 3'/%3E%3C/svg%3E"),
    linear-gradient(270deg,var(--sc-sh),transparent),
    linear-gradient(90deg,var(--sc-sh),transparent);
  background-position:left center,right center,right 7px bottom 1px,right center,left center;
  background-size:24px 100%,46px 100%,22px 10px,34px 100%,20px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll,scroll;
  overscroll-behavior-x:contain}
@media(max-width:1000px){
  /* полоска под шеврон, чтобы он не лёг на рисунок */
  .line-scroll{padding-right:24px}
}

/* ─── 3. ШАПКА: всё помещается, до телефона можно дотянуться ──────
   Кнопки были 38 px при норме касания 44. Блок кнопок на телефоне
   висел слева посреди пустоты — прижат к правому краю, как на
   десктопе. Телефон на узком экране — кнопка вызова (значок). */
@media(max-width:1024px){
  .icon-btn{width:44px;height:44px}
  .lang-btn{width:auto;min-width:66px;padding:0 12px}
  .brand{padding:8px 0}
}
@media(max-width:1000px){
  /* меню скрыто — кнопки прижимаем вправо, как на десктопе; до правки
     они висели сразу за логотипом посреди пустой шапки */
  .tools{margin-left:auto;gap:8px}
  .tel-icon{margin-left:0}
}
@media(max-width:400px){
  .top .wrap{gap:8px}
  .tools{gap:5px}
  .lang-btn{min-width:0;padding:0 9px;gap:5px}
}

/* ─── 4. ПЕРВЫЙ ЭКРАН: код упаковки не тянет страницу ─────────────
   ⚠⚠ Здесь была ЕДИНСТВЕННАЯ причина, по которой на 320 px страница
   уезжала вбок на 39 px: SSCC — 22 знака без пробелов, разорвать их
   браузеру нечем, а рядом стоял штрихкод фиксированной ширины 96 px.
   В сетке 1fr = minmax(auto,1fr), колонка уже своего содержимого не
   становится — и карточка растягивала весь первый экран. */
.last-tx b{overflow-wrap:anywhere}
@media(max-width:430px){
  .last{flex-direction:column;align-items:stretch;gap:11px}
  .last-bars{width:100%;height:26px}
}

/* ─── 5. КОНФИГУРАТОР: переключатель — это кнопка ─────────────────
   Строка была 41 px высотой и без границ: пальцем непонятно, куда
   жать. Теперь это список ощутимых плиток по 48 px. */
@media(max-width:1024px){
  .switches{gap:6px}
  .sw{min-height:48px;padding:11px 13px;gap:14px;border-radius:12px;
      background:var(--canvas);border:1px solid var(--hair)}
  .sw:hover{background:var(--tint)}
  .sw-tx{font-size:15.5px}
  .sw-box{width:46px;height:27px}
  .sw-box::after{top:3px;left:3px;width:21px;height:21px}
  .sw input:checked + .sw-box::after{transform:translateX(19px)}
  .cfg-h{font-size:12px}
}
@media(max-width:640px){
  /* ⚠ Участок и его вес — В ОДНОЙ строке, описание под ними (06.09.2026).
     В одну колонку метка веса вставала отдельной строкой, и список
     распадался на три уровня вместо двух. */
  .cfg-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .cfg-row span{grid-column:1 / -1}
  .cfg-row.empty{grid-template-columns:minmax(0,1fr)}
  .cfg-row b{font-size:14.5px}
  .cfg-note{font-size:14px}
}

/* ─── 6. ЖИВАЯ КАРТОЧКА: код маркировки переносится, а не прячется
   Раньше длинный код на телефоне уезжал в НЕВИДИМУЮ боковую
   прокрутку внутри строки высотой 12 px — попасть в неё пальцем
   нельзя, а видно было полкода. Пусть переносится: это код, рвать
   его по любому знаку не грех. */
@media(max-width:640px){
  .codes-h,.codes-b>div{grid-template-columns:22px 54px minmax(0,1fr);
    gap:9px;padding:9px 11px}
  .codes-h{font-size:12px;letter-spacing:.04em}
  .codes-b{max-height:210px}
  .codes-b>div{font-size:11.5px;line-height:1.5;align-items:start;
    white-space:normal;overflow:visible;text-overflow:clip}
  .codes-b>div span:last-child,.codes-h span:last-child{
    overflow:visible;white-space:normal;overflow-wrap:anywhere;word-break:break-all}
  .pad button{width:100%}
}

/* ─── 7. СОСТАВ: таблица разворачивается в список ─────────────────
   На 390 px три колонки сжимались до 120 px, и каждое описание
   рассыпалось на шесть строк по два слова. Плюс заголовок «КОД»
   оставался, хотя сама колонка была спрятана. */
@media(max-width:760px){
  .mods{display:block;margin-top:22px}
  .mods thead{display:none}
  .mods tbody,.mods tr,.mods td{display:block}
  .mods tr{padding:15px 0;border-bottom:1px solid var(--hair)}
  .mods tr:last-child{border-bottom:none}
  .mods td{width:auto;padding:0;border:none}
  .mods td.k{display:block;font-size:12px;color:var(--faint);
    letter-spacing:.05em;margin-bottom:4px}
  .mods td.t{font-size:15.5px;margin-bottom:5px}
  .mods td:last-child{font-size:14.5px;line-height:1.55}
  .mods tr.head{padding:28px 0 0;border-bottom:none}
  .mods tr.head td{font-size:12px;padding:0}
}

/* ─── 8. ВОПРОСЫ И ФОРМА ──────────────────────────────────────────
   Поля ввода мельче 16 px заставляют iOS зумить страницу при
   касании — и обратно она уже не отъезжает. Согласие ставилось
   галочкой 16 px. */
@media(max-width:1024px){
  .field input,.field select{font-size:16px;padding:14px 15px}
  .agree{gap:12px;padding:10px 0}
  .agree input{width:24px;height:24px;margin-top:1px}
  #contact .sec-sub a{display:inline-block;padding:10px 0}
  /* телефон и почта внутри предложения: поля растят область попадания,
     не трогая высоту строки */
  .faq-head .sec-sub a{padding:12.5px 2px}
  summary{padding:17px 0;gap:14px}
}
@media(max-width:640px){
  .btn{font-size:16px;padding:16px 22px}
  details p{font-size:14.5px}
  .agree{font-size:13px}
}

/* ─── 9. ПОДВАЛ: ссылки шириной в палец ───────────────────────────
   Ссылки шли строками по 22 px через 7 px — попасть в соседнюю
   проще, чем в нужную. */
@media(max-width:1024px){
  footer a{padding:12px 0;margin-bottom:0}
  footer .big{padding:8px 0;margin-bottom:2px}
  .copy{gap:12px 16px}
  .copy a{padding:13.5px 0}
}

/* ─── 10. КЕГЛИ И ВОЗДУХ НА ТЕЛЕФОНЕ ──────────────────────────────
   Надписи мельче 12 px (метки разделов, чипы состояния, шапка
   таблицы кодов) на телефоне читаются с трудом. Вертикальные поля
   секций в 64-66 px на экране 844 px съедали целый экран пустоты. */
@media(max-width:1024px){
  /* ⚠ кегль поднят, а разрядка убавлена: на 12 px с прежними .09em
     «ПРОМЫШЛЕННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ» переставало помещаться в
     строку, и метка раздела превращалась в двухэтажную плашку */
  .eyebrow{font-size:12px;letter-spacing:.06em;padding:6px 12px}
  .ui-chip{font-size:12px}
  .codes-h{font-size:12px;letter-spacing:.04em}
  .mods th,.mods tr.head td{font-size:11.5px}
}
@media(max-width:640px){
  .eyebrow{font-size:11.5px;letter-spacing:.05em}
  .lead{font-size:16.5px}
  .sec-sub{font-size:15.5px}
  .ui{padding:17px}
  .areas,.config,.how,.caps,.rely,.form-sec,.faq{padding-top:48px;padding-bottom:48px}
  .two{padding-block:44px;gap:34px}
  .trust{margin-top:34px;gap:8px 18px}
  .trust li{border-left:none;padding:0}
  footer{padding:36px 0 26px}
  footer h4{font-size:12px}
  .how-grid{gap:22px;margin:26px 0 34px}
  .area{padding:18px 19px}
}

/* ─── 11. ПЛИТКА «НАНЕСЕНИЕ»: КОД И ЦЕПОЧКА СТАТУСОВ ДРУГ ПОД ДРУГОМ ──
   На телефоне рядом с DataMatrix цепочке «выдан → … → упакован» оставалось
   ~150 px: статусы вставали столбиком по одному и обрезались фиксированной
   высотой блока (снимок 390, 06.09). Ниже 640 px плитка одна в ряду, ровнять
   высоту с соседями не с кем — блок растёт по содержимому. */
@media(max-width:640px){
  .t-mark .tile-vis{flex-direction:column;align-items:flex-start;height:auto;gap:12px;padding:14px 16px}
  .wdg-steps{gap:6px 7px}
}

/* ─── 12. ПЯТЬ ШАГОВ ПЕРВОГО ЭКРАНА — СТОЛБИКОМ ───────────────────────
   В строку они переносятся вразнобой, стрелки между строками теряют смысл. */
@media(max-width:760px){
  .flow{grid-template-columns:1fr;gap:10px;margin-top:30px}
  .flow li{padding-left:0}
  .flow li+li::before{content:none}
}

/* ─── 13. «КОМУ ПОДХОДИТ»: карточки и шаги в один столбец ─────────── */
@media(max-width:640px){
  .who-grid,.who-how{grid-template-columns:1fr}
  .who-how{gap:12px}
}