/* Страница /proverka/: форма с адресом и карточки результата.
   Отдельный файл, а не блок в style-6.css: стили нужны одной странице,
   и подключаются они только там (поле `стили` в tools/pages-proverka.js).
   Переменные палитры и шрифтов берутся из style-6.css, который загружен
   первым. Кеш у /css/ сутки плюс неделя, поэтому у адреса номер ?v=. */

.proverka { max-width: 860px; }

.proverka__form label {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.proverka__row { display: flex; gap: 12px; align-items: stretch; }
.proverka__row input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 17px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--card);
  color: var(--txt);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.proverka__row input::placeholder { color: rgba(99, 96, 90, 0.55); }
.proverka__row input:focus {
  outline: none;
  border-color: var(--ac-1);
  box-shadow: 0 0 0 4px rgba(205, 58, 32, 0.12);
}
.proverka__row .btn { white-space: nowrap; }
.proverka__note { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 62ch; }
.proverka__form.is-sending .proverka__row { opacity: 0.7; }

/* результат */
.proverka__out { margin-top: 28px; }
.proverka__head { margin-bottom: 16px; }
.proverka__head b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
  margin-bottom: 6px;
}
.proverka__head span { color: var(--muted); font-size: 15px; }
.proverka__head--wait b { color: var(--muted); }

.proverka__list { list-style: none; display: grid; gap: 10px; counter-reset: none; }
.pv {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
}
.pv__mark {
  width: 12px; height: 12px; margin-top: 7px;
  border-radius: 50%;
  background: var(--line-2);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.06);
}
.pv--ok .pv__mark { background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.16); }
.pv--warn .pv__mark { background: #c98a1b; box-shadow: 0 0 0 3px rgba(201, 138, 27, 0.18); }
.pv--bad .pv__mark { background: var(--ac-1); box-shadow: 0 0 0 3px rgba(205, 58, 32, 0.16); }
.pv--bad { border-color: rgba(205, 58, 32, 0.35); }
.pv--warn { border-color: rgba(201, 138, 27, 0.35); }

.pv__name { display: block; font-size: 16px; margin-bottom: 4px; }
.pv__name i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.pv--bad .pv__name i { color: var(--ac-2); }
.pv--warn .pv__name i { color: #8a5f10; }
.pv--ok .pv__name i { color: var(--ok); }
.pv p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.pv__details { margin-top: 8px; display: grid; gap: 4px; padding-left: 18px; }
.pv__details li { font-size: 13.5px; color: var(--muted); font-family: var(--mono); word-break: break-word; }

/* заготовки на время проверки */
.pv--skel .pv__body b, .pv--skel .pv__body p {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-2), var(--card), var(--bg-2));
  background-size: 200% 100%;
  animation: pv-wave 1.4s linear infinite;
}
.pv--skel .pv__body b { width: 38%; margin-bottom: 10px; }
.pv--skel .pv__body p { width: 82%; }
@keyframes pv-wave { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pv--skel .pv__body b, .pv--skel .pv__body p { animation: none; } }

.proverka__facts { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.proverka__after { margin-top: 18px; display: grid; gap: 14px; justify-items: start; }
.proverka__after p { color: var(--muted); font-size: 15px; max-width: 68ch; }
.proverka__after a { color: var(--ac-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .proverka__row { flex-direction: column; }
  .proverka__row .btn { width: 100%; }
  .pv { padding: 14px 16px; gap: 12px; }
}

@media print {
  .proverka__form, .proverka__after { display: none !important; }
  .pv { break-inside: avoid; }
}