/* qa-tools — /regex: подсветка совпадений и разбор групп. */

/* Подсвеченный текст живёт отдельным блоком, а не поверх поля ввода.
   Наложить разметку на <textarea> нельзя в принципе: пришлось бы класть
   прозрачное поле поверх копии текста и надеяться, что переносы строк в
   обоих совпадут. Они не совпадают — перенос зависит от кегля, а кегль у
   нас переключается регулятором в шапке, — и подсветка уезжала бы на
   соседнюю строку. Два честных блока лучше одного, который иногда врёт. */
.rx-hl{margin:0;padding:var(--space-6);border-radius:var(--radius-md);
  background:var(--surface-app);border:1px solid var(--border-hairline);
  font:var(--fw-regular) var(--text-body-sm)/1.8 var(--font-mono);
  color:var(--text-body);
  white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:340px;overflow:auto;
  transition:background-color var(--dur-theme) var(--ease-theme),
             border-color var(--dur-theme) var(--ease-theme)}

/* Соседние совпадения красятся по очереди двумя цветами. Одним цветом
   «аб» и «аб» подряд слипаются в одно пятно из четырёх букв, и ошибку в
   квантификаторе (взял больше, чем нужно) на глаз не отличить от верного
   результата. */
.rx-m{border-radius:var(--radius-sm);padding:1px 0;
  background:var(--accent-quiet);color:var(--accent-text);
  box-shadow:0 0 0 1px var(--border-accent)}
.rx-m--alt{background:var(--mark-alt-fill);color:var(--mark-alt-text);
  box-shadow:0 0 0 1px var(--mark-alt-line)}

/* Совпадение нулевой длины подсвечивать нечем — в нём ноль знаков, — а
   молчать о нём нельзя: именно оно даёт «совпадений 4» на строке из трёх
   букв, и это выглядит поломкой инструмента. Рисуем засечку ровно в том
   месте, где движок его нашёл. */
.rx-m--empty{display:inline-block;width:2px;height:1em;padding:0;
  vertical-align:text-bottom;border-radius:1px;box-shadow:none;
  background:var(--amber-400)}
[data-theme="light"] .rx-m--empty{background:var(--amber-700)}

/* Группы внутри ячейки таблицы разбора. Значение группы может быть
   пустой строкой (группа совпала с пустотой) или не совпасть вовсе —
   это РАЗНЫЕ вещи, и путать их нельзя: первое означает, что ветка
   сработала, второе — что не сработала. Поэтому пустое значение
   показывается как «пусто», а несовпавшее — как «не совпала». */
.rx-g{display:block;margin-top:var(--space-2)}
.rx-g:first-child{margin-top:0}
.rx-g__name{color:var(--accent-text);font-family:var(--font-mono)}
.rx-g__val{color:var(--text-heading);font-family:var(--font-mono);overflow-wrap:anywhere}
.rx-g__none{color:var(--text-ghost);font-style:italic}

/* Само совпадение — отдельной строкой над группами, поэтому display:block.
   Отступ снизу ставится только когда группы есть: у шаблона без скобок
   он повесил бы пустую полосу под каждой строкой таблицы. */
.rx-val{display:block;
  font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-mono);
  color:var(--text-heading);overflow-wrap:anywhere}
.rx-val + .rx-g{margin-top:var(--space-4)}

/* Колонка с номером и позицией. 52px было мало: «поз. 182» разваливалось
   на «поз.» и «182» двумя строками и читалось как две разные величины.
   nowrap обязателен — без него ширина спасает только до трёхзначных
   позиций, а в логе они шестизначные. */
.rx-table td:first-child{width:84px;white-space:nowrap}
.rx-no,.rx-at{display:block}
/* Вторая колонка забирает всё остальное: у .claims последняя колонка
   по умолчанию фиксирована в 38% под пояснение, а здесь пояснений нет. */
.rx-table td:last-child{width:auto}

/* На узком экране две колонки не помещаются: первая забирает 84px, и
   совпадению со всеми группами остаётся сто с небольшим пикселей —
   почта рвётся на «ivan.petrov@e / xample.com», а значения групп в
   столбик по слову. Замеры при этом чистые: за край ничего не выходит,
   просто читать нельзя. Складываем строку в одну колонку — номер и
   позиция становятся заголовком над совпадением.
   Разбирать надо ВСЮ таблицу: одного
   `display:block` на ячейке мало — строка визуально складывается, а
   ширину ячейка продолжает считать по-табличному и остаётся в 163px из
   283 доступных. Поэтому блочными объявлены и таблица, и строки. */
@media (max-width:640px){
  .rx-table, .rx-table tbody, .rx-table tr, .rx-table td{
    display:block;width:auto}
  .rx-table thead{display:none}
  .rx-table tr{padding:var(--space-5) 0;
    border-bottom:1px solid var(--border-hairline)}
  .rx-table tbody tr:last-child{border-bottom:0;padding-bottom:0}
  .rx-table tbody tr:first-child{padding-top:0}
  .rx-table td{padding:0;border-bottom:0}
  .rx-table td:first-child{padding-bottom:var(--space-3)}
  .rx-no,.rx-at{display:inline}
  .rx-no::after{content:" · "}
}