/* ============================================================
   A.L.E.X. — карточная свёртка таблиц на узком экране (задача 1153).
   ------------------------------------------------------------
   Зачем: на 390 таблицы в .tbl-wrap уезжали за правый край
   (прокрутка вбок читателем не видна — выглядит как обрезка).
   На ширине ≤ 640 каждая строка таблицы становится карточкой,
   подпись колонки над ячейкой берётся из data-label — его
   проставляет сборщик deploy/build2/build.py из <thead>.
   На 1280 и любом экране шире 640 таблица остаётся таблицей.

   Правило файла — как у hub.css (урок #894): самостоятельный
   модуль, цвета только токенами со значениями-запасными
   var(--x, …) тёмной темы (тёмная — базовая без JS), поэтому
   модуль работает и на слое style2.css, и на старом слое.
   Подключается сборщиком только на страницах, где есть таблица.
   ============================================================ */

@media (max-width: 640px) {
  .tbl-wrap { overflow-x: visible; }
  .tbl-wrap table { display: block; width: 100%; border: 0; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tbody { display: block; }
  .tbl-wrap tbody tr {
    display: block;
    border: 1px solid var(--line, #232A33);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 12px;
  }
  .tbl-wrap tbody tr:last-child { margin-bottom: 0; }
  .tbl-wrap tbody td, .tbl-wrap tbody th {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 10px 0 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .tbl-wrap tbody tr > :first-child { padding-top: 0; }
  .tbl-wrap tbody [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text-2, #9AA5B1);
    margin-bottom: 2px;
  }
}