/* qa-tools — /color: таблица форматов, двойное превью и палитра. */

/* Слайдеры палитры — своя отрисовка поверх appearance:none, как велит
   правило про нативные контролы (вспыхивают при смене темы). Цвет ТРЕКА
   ставит JS градиентом по осям OKLCH — это данные, не оформление;
   рамка, ползунок и фокус — токены. */
.csl__lb{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--space-2);
  font:var(--fw-medium) var(--text-body-sm)/1.4 var(--font-ui);
  color:var(--text-faint)}
.csl__lb b{font:var(--fw-semibold) var(--text-body-sm)/1.4 var(--font-mono);
  color:var(--text-body)}
.csl__in{appearance:none;-webkit-appearance:none;display:block;width:100%;
  height:16px;margin:0;border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);background:var(--surface-input);
  cursor:pointer}
.csl__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-fill);border:2px solid var(--on-accent);
  box-shadow:0 0 0 1px var(--border-subtle)}
.csl__in::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--accent-fill);border:2px solid var(--on-accent);
  box-shadow:0 0 0 1px var(--border-subtle)}
.csl__in:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px}

/* Таблица форматов: имя, значение, кнопка. Значение — моноширинное,
   переносится целиком (oklch с альфой длинный), кнопка не сжимается. */
.fmt{width:100%;border-collapse:collapse}
.fmt th{width:5.5em;text-align:left;vertical-align:top;
  padding:var(--space-3) var(--space-4) var(--space-3) 0;
  font:var(--fw-medium) var(--text-body-sm)/1.5 var(--font-ui);
  color:var(--text-faint)}
.fmt td{vertical-align:top;padding:var(--space-3) 0}
.fmt code{font:var(--fw-regular) var(--text-body-sm)/1.6 var(--font-mono);
  color:var(--text-body);overflow-wrap:anywhere}
.fmt__act{width:1%;white-space:nowrap;text-align:right;
  padding-left:var(--space-4)}
.fmt tr + tr th,.fmt tr + tr td{border-top:1px solid var(--border-hairline)}

/* Превью: два фона рядом, на узком экране — друг под другом.
   Сами цвета фонов и образца ставятся кодом (см. color.js): фоны
   фиксированные по замыслу инструмента, образец — данные пользователя. */
/* Строка контраста в таблице результатов: две записи одна под другой,
   на белом и на тёмном. Моно не берём — это не значение для копирования,
   а вывод словами. */
.fmt__contrast{display:block;font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);
  color:var(--text-muted)}
.fmt__contrast b{color:var(--text-heading);font-weight:var(--fw-semibold)}

.swatches{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:640px){.swatches{grid-template-columns:1fr}}
.swatch{margin:0}
.swatch__bg{display:flex;align-items:center;justify-content:center;
  height:96px;border-radius:var(--radius-md);
  border:1px solid var(--border-subtle)}
/* Без рамки и тени намеренно: белый образец, слившийся с белым фоном, —
   это правдивый ответ превью, а не дефект отрисовки. */
.swatch__chip{width:56px;height:56px;border-radius:var(--radius-md)}
.swatch__cap{margin-top:var(--space-2);text-align:center;
  font:var(--fw-regular) var(--text-caption)/1.4 var(--font-ui);
  color:var(--text-faint)}