/* qa-tools — /luhn: пошаговый показ счёта контрольной суммы.
   Это не украшение, а обязательная пояснялка (см. HANDOFF.md): вердикт
   основан на контрольной сумме, значит должно быть видно, как она вышла. */

/* Длинный номер не должен ломать раскладку — прокручиваем сам ряд цифр,
   а не страницу. */
.luhn-steps{overflow-x:auto;margin:var(--space-6) 0 var(--space-5)}
.luhn-steps table{border-collapse:separate;border-spacing:var(--space-2) 0}

.luhn-cell{padding:0;text-align:center;vertical-align:top}
/* Цифра сверху, её вклад в сумму снизу — читается как столбик. */
.luhn-cell b,.luhn-cell i{display:block;min-width:24px;
  font:var(--fw-semibold) var(--text-body-sm)/1.6 var(--font-mono);font-style:normal}
.luhn-cell b{color:var(--text-heading);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:var(--surface-app)}
.luhn-cell i{color:var(--text-muted);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:var(--surface-hover)}

/* Удвоенные — те, что считая справа стоят на чётных местах. */
.luhn-cell.is-doubled b{color:var(--accent-text);background:var(--accent-quiet)}
.luhn-cell.is-doubled i{color:var(--accent-text)}

/* Контрольная цифра — последняя, ради неё всё и считается. */
.luhn-cell.is-check b{background:var(--ok-bg);color:var(--ok-fg);
  box-shadow:inset 0 0 0 1px var(--ok-br)}
.luhn-cell.is-check i{color:var(--ok-fg)}

/* Строка произвольного префикса: два поля рядом, на узком — друг под другом. */
.luhn-custom{display:flex;gap:var(--space-5);flex-wrap:wrap}
.luhn-custom .field{flex:1 1 160px}

/* Флажок с длинной подписью: текст переносится, квадратик остаётся сверху. */
.luhn-extras{display:flex;align-items:flex-start;gap:var(--space-5);cursor:pointer;
  font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);color:var(--text-muted)}
.luhn-extras input{flex:0 0 auto;margin:2px 0 0;width:16px;height:16px;
  accent-color:var(--accent);cursor:pointer}