/* ================================================================
   Полные статьи справочника (/spravochnik/<slug>.html)
================================================================ */

/* Герой статьи */
.art-hero{padding-bottom:14px}
.art-hero h1{max-width:960px;font-size:clamp(26px,3.6vw,42px)}

/* Тело статьи */
.art-body{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:34px 38px;margin-bottom:22px;
}
.art-body > :first-child{margin-top:0}
.art-body > :last-child{margin-bottom:0}

.art-body p{
  color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:16px;
}
.art-body p b, .art-body li b{color:var(--text);font-weight:700}
.art-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.art-body a:hover{color:var(--accent-dim)}

.art-body h2{
  font-size:clamp(20px,2.4vw,26px);color:var(--text);
  margin:34px 0 16px;padding-top:8px;
}
.art-body h3{
  font-family:var(--font-d);font-size:17px;text-transform:uppercase;
  color:var(--text);margin:26px 0 12px;
}

.art-body ul, .art-body ol{
  color:var(--muted);font-size:15.5px;line-height:1.75;
  margin:0 0 16px;padding-left:26px;
}
.art-body li{margin-bottom:8px}

.art-body .mono, .art-body code{
  font-family:var(--font-m);font-size:13.5px;color:var(--accent);
  background:var(--surface2);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;
}
.art-body pre{
  font-family:var(--font-m);font-size:13px;line-height:1.6;color:var(--text);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;margin:0 0 18px;
}
.art-body pre code{background:none;border:none;padding:0;color:inherit;font-size:13px}

/* Таблицы (коды ошибок, распиновки, параметры) */
.art-body .tbl-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:10px}
.art-body table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.art-body th{
  font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);text-align:left;
  padding:11px 14px;background:var(--surface2);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.art-body td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.art-body td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.art-body tr:last-child td{border-bottom:none}
.art-body tbody tr:hover td{background:var(--surface2)}

/* Выноска-вывод */
.art-body .callout{
  border-left:3px solid var(--accent);background:var(--surface2);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 18px;
}
.art-body .callout p{margin:0;font-size:15px;color:var(--text)}

/* Свои иллюстрации */
.art-body figure{margin:0 0 20px}
.art-body figure img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:10px;
}
.art-body figcaption{
  font-family:var(--font-m);font-size:12px;color:var(--faint);
  margin-top:8px;text-align:center;letter-spacing:.03em;
}

/* Блок атрибуции и возврата */
.art-note{
  border:1px dashed var(--line-strong);border-radius:var(--r);
  padding:18px 22px;margin-bottom:22px;
}
.art-note p{color:var(--faint);font-size:13px;line-height:1.65;margin-bottom:10px}
.art-note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.art-note a:hover{color:var(--accent)}
.art-back{
  font-family:var(--font-m);font-size:13px;letter-spacing:.05em;
  color:var(--accent);text-decoration:none;font-weight:700;
}
.art-back:hover{text-decoration:underline}

/* Счётчик возврата подставляется генератором динамически не нужен — текст статичен */

@media(max-width:760px){
  .art-body{padding:22px 18px}
  .art-body p{font-size:15.5px}

  /* Таблицы → компактные боксы-карточки (как в разделе «Прошивки»).
     Подписи колонок проставляет spravochnik.js из <thead> в data-label. */
  .art-body .tbl-wrap{overflow:visible;border:none;background:none;padding:0}
  .art-body table{min-width:0;width:100%;display:block;font-size:14px}
  .art-body thead{display:none}
  .art-body tbody{display:block}
  .art-body tbody tr{
    display:block;border:1px solid var(--line);border-radius:12px;
    background:var(--surface2);padding:12px 14px;margin-bottom:12px;
  }
  .art-body tbody tr:hover td{background:none}
  .art-body td{
    display:block;border:none;padding:5px 0;white-space:normal;
    color:var(--muted);overflow-wrap:anywhere;text-align:left;
  }
  /* первая ячейка — заголовок бокса (перекрываем десктопный nowrap!) */
  .art-body td:first-child{
    color:var(--text);font-weight:700;font-size:15px;
    padding:0 0 9px;margin-bottom:7px;
    border-bottom:1px dashed var(--line);
    white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  }
  /* остальные ячейки — поля с подписью колонки сверху */
  .art-body td + td::before{
    content:attr(data-label);display:block;
    font-family:var(--font-m);font-size:10px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
    margin-bottom:2px;
  }
  .art-body td:last-child{padding-bottom:0}
  /* двухколоночные таблицы: без подписи, значение под заголовком */
  .art-body table.two-col td + td::before{content:none}
  .art-body table.two-col td + td{color:var(--text);font-size:15px;padding-top:8px}
}