/* ============================================================
   Tovian — проверка компании по USCC · fix-uscc-check.css
   Стили блоков, которые появляются ТОЛЬКО после действия человека:
   ожидание, отметка неполноты, копирование оригинала, отсутствующее
   значение, ошибка поля. Все они рисуются скриптом, поэтому в базовой
   вёрстке страницы классов для них не было — и любой такой блок без
   стилей выглядел бы как чужой кусок посреди инструмента.

   Подключается ПОСЛЕДНИМ: файл только дополняет канон страницы
   (тёмный фон, лаймовый акцент, Space Grotesk в подписях) и не
   переопределяет то, что уже описано выше.
   ============================================================ */

/* ---- отсутствующее значение ------------------------------------------
   Пустоту показываем словами и приглушённым начертанием: ноль и прочерк
   на этом месте читались бы как значение, а «не собрано» — не значение. */
.uc-miss {
  color: rgba(238, 241, 232, .42);
  font-style: normal;
}
.uc-row__v .uc-miss { display: inline; }

/* ---- копирование оригинала иероглифами -------------------------------
   Интерфейс остаётся русским, но в договор и в платёжку наименование
   идёт оригиналом — значит, у оригинала должен быть выход наружу. */
.uc-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 11px 5px 9px;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: rgba(238, 241, 232, .55);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  letter-spacing: .03em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.uc-copy svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Внутри строки-сигнала кнопка обязана начинаться с новой строки: инлайн она
   слипается со значением и читается как продолжение наименования. */
.uc-row__v .uc-copy, .uc-flags li .uc-copy { display: flex; width: -moz-fit-content; width: fit-content; }
.uc-copy:hover {
  border-color: rgba(168, 232, 12, .45);
  color: var(--lbli, #b7ee31);
  background: rgba(168, 232, 12, .06);
}
.uc-copy.is-done {
  border-style: solid;
  border-color: rgba(168, 232, 12, .5);
  color: var(--lime, #a8e80c);
  background: rgba(168, 232, 12, .1);
}
.uc-copy.is-fail {
  border-style: solid;
  border-color: rgba(230, 162, 60, .5);
  color: #e6a23c;
  background: rgba(230, 162, 60, .08);
}
.uc-flags li .uc-copy { margin-top: 6px; }

/* ---- отметка «отчёт неполный» ----------------------------------------
   Итог, в котором не хватает слагаемого, выглядит полным — и потому
   опаснее пустоты. Отметка стоит НАД строками, до того как их прочли. */
.uc-incomplete {
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px dashed rgba(230, 162, 60, .45);
  border-radius: 14px;
  background: rgba(230, 162, 60, .05);
}
.uc-incomplete__k {
  display: block;
  margin-bottom: 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: #e6a23c;
}
.uc-card .uc-incomplete p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(238, 241, 232, .68);
}
.uc-card .uc-incomplete p b { color: #e6a23c; font-weight: 500; }
/* Постоянные границы охвата — не тревога, а свойство инструмента: тот же
   блок, но нейтральным тоном, чтобы янтарь означал только настоящий пробел. */
.uc-incomplete--limits {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .02);
}
.uc-incomplete--limits .uc-incomplete__k { color: rgba(238, 241, 232, .45); }

/* Прокрутка к результату не должна прятать верх карточки под шапкой:
   у карточки есть пилюля вердикта, и она обязана быть видна первой. */
#uc-result { scroll-margin-top: 104px; }
@media (max-width: 900px) { #uc-result { scroll-margin-top: 84px; } }

/* ---- ожидание ответа --------------------------------------------------
   Каркас будущей карточки вместо голой строки «загрузка»: видно, куда
   придёт ответ. Полосы ничего не обещают — это пустые места строк. */
.uc-chip--pulse::before { animation: ucPulse 1.15s ease-in-out infinite; }
@keyframes ucPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.uc-skel { margin-top: 18px; display: grid; gap: 12px; }
.uc-skel__row { display: grid; gap: 6px; }
.uc-skel__k, .uc-skel__v {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .05) 90%);
  background-size: 260% 100%;
  animation: ucSkel 1.5s linear infinite;
}
.uc-skel__k { width: 28%; }
.uc-skel__v { width: 72%; height: 13px; }
.uc-skel__row:nth-child(2) .uc-skel__v { width: 58%; }
.uc-skel__row:nth-child(3) .uc-skel__v { width: 81%; }
.uc-skel__row:nth-child(4) .uc-skel__v { width: 46%; }
.uc-skel__row:nth-child(5) .uc-skel__v { width: 66%; }
@keyframes ucSkel { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* Ожидание внутри строки (сверка с витриной) — точка и текст, без сдвига. */
.uc-inline-wait { display: inline-flex; align-items: baseline; gap: 8px; color: rgba(238, 241, 232, .6); }
.uc-inline-wait__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime, #a8e80c);
  animation: ucPulse 1.15s ease-in-out infinite;
  flex: 0 0 auto;
  transform: translateY(-1px);
}

/* ---- таблица разбора кода --------------------------------------------
   Четыре колонки на 390px сжимаются до столбиков по слову в строке, поэтому
   таблице задан минимум ширины, а прокрутка живёт ВНУТРИ обёртки: страница
   от неё горизонтально не едет. Верхний отступ убран — над таблицей уже
   стоит подпись блока, и второй отступ читался как пустое место. */
.uc-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
  border-radius: 16px;
}
.uc-tablewrap .uc-table { margin-top: 0; min-width: 560px; }

/* На узком экране прокрутка вбок прячет самое ценное: «расшифровка» — четвёртая
   колонка, и на 390px её не видно вовсе, а признака прокрутки у контейнера нет.
   Читатель уверен, что видит таблицу целиком, и не узнаёт причину отказа кода.
   Поэтому ниже 560px строка таблицы разворачивается в карточку: подпись слева,
   значение справа, ничего не спрятано и прокручивать нечего. Правило нарочно
   привязано к .uc-tablewrap: подписи ячеек берутся из data-label, а он есть
   только у таблицы, которую рисует скрипт разбора. */
@media (max-width: 560px) {
  .uc-tablewrap { overflow-x: visible; }
  .uc-tablewrap .uc-table { min-width: 0; }
  /* Шапка не нужна — её слова стоят у каждой ячейки; убираем из потока,
     но оставляем в разметке для чтения с экрана. */
  .uc-tablewrap .uc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uc-tablewrap .uc-table tbody tr { display: block; padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .uc-tablewrap .uc-table tbody tr:last-child { border-bottom: 0; }
  .uc-tablewrap .uc-table tbody tr.hot { background: rgba(168, 232, 12, .07); }
  .uc-tablewrap .uc-table td { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; padding: 3px 0; border: 0; }
  .uc-tablewrap .uc-table tr.hot td { background: none; }
  .uc-tablewrap .uc-table td::before {
    content: attr(data-label);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px; letter-spacing: .06em; text-transform: lowercase;
    color: rgba(238, 241, 232, .42);
  }
}

/* Кнопка внутри строки-сигнала — с новой строки и с отступом: инлайн она
   налезает на текст объяснения, который стоит ровно перед ней. */
.uc-row__act {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 12px;
}

/* ---- мягкая стена регистрации ----------------------------------------
   Единственный блок отчёта, который не про компанию, а про доступ:
   лаймовая рамка отделяет его от карточек с данными. */
.uc-card--wall {
  border-color: rgba(168, 232, 12, .3);
  background:
    radial-gradient(120% 90% at 12% -30%, rgba(168, 232, 12, .09), transparent 60%),
    linear-gradient(160deg, #121316, #0b0c0f);
}

/* ---- ошибка ввода / подтверждение под полем ---------------------------
   Появляется после нажатия кнопки, поэтому оформлена как часть консоли,
   а не как строка текста, повисшая под формой. */
.uc-err.is-on {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(230, 162, 60, .34);
  border-radius: 999px;
  background: rgba(230, 162, 60, .08);
  color: #e6a23c;
}
.uc-err.is-on.is-ok {
  border-color: rgba(168, 232, 12, .34);
  background: rgba(168, 232, 12, .08);
  color: var(--lime, #a8e80c);
}

/* ---- узкий экран ------------------------------------------------------
   На 390px правая пилюля категории отжимает текст в колонку шириной в
   два слова: строка становится нечитаемой ровно там, где её и читают.
   Поэтому категория уходит НАД значением, а значение получает всю ширину. */
@media (max-width: 560px) {
  /* Подпись и категория остаются в одной строке (они обе короткие), а
     значение уходит под них во всю ширину. Так значение читается целиком,
     и при этом над ним не оказывается двух серых подписей подряд. */
  .uc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
  }
  .uc-row__l { display: contents; }
  .uc-row__k { grid-column: 1; grid-row: 1; }
  .uc-row__cat { grid-column: 2; grid-row: 1; align-self: start; }
  .uc-row__v { grid-column: 1 / -1; grid-row: 2; }
  .uc-row--main { padding: 13px 14px; }
  .uc-copy { width: 100%; justify-content: flex-start; }
  .uc-incomplete { padding: 12px 13px; }
}