/* qa-tools — /diff: подсветка вставок и удалений. */

/* Вывод — сплошной поток текста с цветными фрагментами. Отдельный блок,
   а не наложение на поле ввода, — по той же причине, что у /regex:
   переносы в textarea и в разметке не совпадают. */
.df-out{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:70vh;overflow:auto;
  transition:background-color var(--dur-theme) var(--ease-theme),
             border-color var(--dur-theme) var(--ease-theme)}

/* ins/del со своей семантикой: скринридер и копирование без стилей
   всё равно сохранят смысл. Подчёркивание и зачёркивание браузера
   заменяем фоном: зачёркнутый JSON нечитаем. */
.df-add{text-decoration:none;border-radius:var(--radius-sm);padding:1px 0;
  background:var(--ok-bg);color:var(--ok-fg);
  box-shadow:0 0 0 1px var(--ok-br)}
.df-del{text-decoration:none;border-radius:var(--radius-sm);padding:1px 0;
  background:var(--bad-bg);color:var(--bad-fg);
  box-shadow:0 0 0 1px var(--bad-br)}

/* Строка опций под вердиктом (.pane__row) уехала в общий tool.css,
   когда понадобилась второму инструменту (/sql). */

/* Вердикт и опции — строка состояния ПОД полем «Стало», а не над ним:
   над полем ввода вердикт отнимает место у набора, и общая проверка это
   ловит (правило из HANDOFF про вердикт). Раньше они жили в отдельной
   панели «Различия». */
.df-bottom{border-top:1px solid var(--border-hairline)}

/* Построчный режим: строка — блок на всю ширину, подсветка тянется до
   краёв, как в git. В пословном и посимвольном режимах вывод остаётся
   сплошным потоком с цветными фрагментами. */
.df-out--lines{padding:var(--space-4) 0}
/* Строка на всю ширину, как в просмотре MR: добавленная — зелёная полоса
   с зелёной кромкой слева, удалённая — красная. Кромка нужна тем, кто
   различает цвета плохо; плюс и минус в начале строки — вторая опора. */
.df-l{display:block;padding:0 var(--space-6);border-left:3px solid transparent}
.df-l--add{background:var(--ok-bg);border-left-color:var(--ok-fg)}
.df-l--del{background:var(--bad-bg);border-left-color:var(--bad-fg)}
.df-l .df-add,.df-l .df-del{background:transparent;box-shadow:none;padding:0}
.df-l--add .df-add{color:var(--ok-fg)}
.df-l--del .df-del{color:var(--bad-fg)}
/* Горячий кусок внутри пары строк — сами изменённые знаки поверх
   строчной заливки: плотнее фон и жирнее, иначе в тонированной строке
   его не найти. Видимые пробелы (.df-ws) — те же цвета, полупрозрачные,
   чтобы читались как служебный знак, а не как буква. */
.df-hot{font-weight:var(--fw-bold);border-radius:var(--radius-sm);padding:0 1px}
.df-l--add .df-hot{background:color-mix(in srgb,var(--ok-fg) 30%,transparent)}
.df-l--del .df-hot{background:color-mix(in srgb,var(--bad-fg) 30%,transparent)}
.df-ws{font-style:normal;opacity:.8}
.df-l--add::before{content:"+ ";color:var(--ok-fg)}
.df-l--del::before{content:"\2212  ";color:var(--bad-fg)}
.df-l:not(.df-l--add):not(.df-l--del)::before{content:"  "}