/* qa-tools — /hash: строки со значениями хешей. */

/* Строка на алгоритм: имя, значение, кнопка копирования. Таблицей
   .claims это не набирается — там третья колонка отдана пояснению и
   зафиксирована в 38%, а здесь всю ширину должно занимать само
   значение: 128 знаков SHA-512 иначе переносятся вчетверо.
   Разметка статическая, а не собирается кодом: у кнопок копирования
   тогда были бы новые обработчики после каждого пересчёта, а общий
   wireCopyButtons вешает их один раз при загрузке. */
.hashrow{display:flex;align-items:flex-start;gap:var(--space-5);
  padding:var(--space-5) 0;border-bottom:1px solid var(--border-hairline);
  transition:border-color var(--dur-theme) var(--ease-theme)}
.hashrow:first-child{padding-top:0}
.hashrow:last-child{padding-bottom:0;border-bottom:0}

/* Ширина в ch, а не в пикселях: 76px хватало при обычном кегле и не
   хватало при крупном — регулятор текста в шапке умножает все кегли, и
   «SHA-256» ломалось на «SHA-» и «256» двумя строками. Единица ch
   считается от самого шрифта, поэтому колонка растёт вместе с ним.
   nowrap оставлен вторым рубежом: перенос имени алгоритма читается как
   две разные строки таблицы. */
.hashrow__name{flex:0 0 9ch;white-space:nowrap;
  font:var(--fw-semibold) var(--text-body-sm)/1.6 var(--font-mono);
  color:var(--text-faint)}
.hashrow__val{flex:1;min-width:0;
  font:var(--fw-regular) var(--text-body-sm)/1.6 var(--font-mono);
  color:var(--text-heading);overflow-wrap:anywhere}

/* Сошедшийся с ожидаемым алгоритм подсвечивается: иначе ответ на главный
   вопрос страницы («какой из четырёх совпал») приходится искать глазами,
   сверяя по знакам две строки из шестидесяти четырёх. Вердикт называет
   его словами, а подсветка показывает, где смотреть. */
.hashrow--hit .hashrow__name{color:var(--ok-fg)}
.hashrow--hit .hashrow__val{color:var(--ok-fg)}

@media (max-width:640px){
  /* На узком экране имя алгоритма и значение в одну строку не встают:
     значение получает сорок пикселей и рассыпается в столбик по букве. */
  .hashrow{flex-wrap:wrap;gap:var(--space-4)}
  .hashrow__val{flex:1 0 100%;order:3}
}
