/* qa-tools — /contrast: пипетка в поле и образец пары цветов.
   Значения только из токенов; исключение — сами проверяемые цвета,
   они приходят из ввода и выставляются кодом.
   Класс .pick повторяет приём из /time (календарь в поле): там же
   объяснение, почему нужен волосок-разделитель слева. */

.pick{flex:0 0 auto;width:32px;height:24px;padding:0;
  background:none;border:0;outline:0;cursor:pointer;
  border-left:1px solid var(--border-subtle);padding-left:var(--space-5);
  transition:border-color var(--dur-theme) var(--ease-theme)}
.pick::-webkit-color-swatch-wrapper{padding:0}
.pick::-webkit-color-swatch{border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.pick::-moz-color-swatch{border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.pick:focus-visible{outline:2px solid var(--border-accent);outline-offset:2px}

/* Образец. Смысл в том, чтобы увидеть пару глазами рядом с числом:
   4.5:1 ничего не говорит, пока не посмотришь. Два кегля намеренно —
   ровно те, между которыми проходит граница «крупного» текста. */
.ct-demo{padding:var(--space-7) var(--space-6);border-radius:var(--radius-md);
  border:1px solid var(--border-hairline)}
/* Кегль этих двух строк выставляет JS и НЕ берёт из токенов — редкий
   законный случай. 24px и 18.66px это не размеры оформления, а пороги
   из WCAG: ровно с них текст считается крупным, и ему хватает 3:1
   вместо 4.5:1. Пройди они через --text-*, регулятор текста в шапке
   двигал бы их вместе со страницей, и образец начал бы врать — крупным
   назывался бы текст, который по стандарту крупным не является.
   Тот же довод, по которому и сам регулятор задан в px (см. HANDOFF).
   Числа живут в contrast.js рядом с порогами, которые они показывают. */
.ct-demo__lg{margin:0 0 var(--space-5);font-weight:var(--fw-semibold);
  line-height:1.3;font-family:var(--font-ui)}
.ct-demo__bold{margin:0 0 var(--space-5);font-weight:var(--fw-bold);
  line-height:1.35;font-family:var(--font-ui)}
.ct-demo__sm{margin:0 0 var(--space-5);font-weight:var(--fw-regular);
  line-height:1.6;font-family:var(--font-ui);font-size:var(--text-body-sm)}
/* Подпись с шестнадцатеричными значениями — тем же цветом, что и текст
   образца: она часть образца, а не подпись под ним. Приглушать её
   отдельным токеном нельзя — он не знает, на каком фоне окажется. */
.ct-demo__hex{margin:0;opacity:.75;
  font:var(--fw-regular) var(--text-micro)/1 var(--font-mono)}