/* qa-tools — /viewport: физические пиксели второй строкой и подсветка
   строки, в которую попало текущее окно.
   Значения только из токенов: своих цветов и кеглей здесь нет. */

/* Физический размер — подпись под основным числом, а не отдельная
   колонка: он нужен для сверки с характеристиками производителя, но
   работают всё-таки с CSS-пикселями, и они должны читаться первыми. */
.vp__wh{white-space:nowrap}
.vp__phys{display:block;font-style:normal;
  font:var(--fw-regular) var(--text-micro)/1.5 var(--font-ui);
  color:var(--text-faint)}

/* Строка, в чью ширину попало окно прямо сейчас. Подсветка фоном, а не
   рамкой: рамка в таблице сдвигает соседние ячейки на пиксель, и при
   изменении размера окна вся таблица подрагивает. */
.vp tr.is-now{background:var(--accent-quiet)}
.vp tr.is-now td:first-child{color:var(--accent-text);font-weight:var(--fw-semibold)}
.vp tr{transition:background-color var(--dur-fast) var(--ease-standard)}