/* ══════════════════════════════════════════════════════════════════
   Автопроверка сайта на /pochemu-net-zayavok/ — ковровая светлая тема.
   Статусы: bad = madder (критично), warn = тёмная охра, ok = глубокий
   зелёный. Все три с контрастом ≥ AA на поле #e9e0cb.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --audit-ok: #2f6b34;   /* глубокий зелёный, ~4.8:1 на #e9e0cb */
  --audit-warn: #8a5a12; /* тёмная охра для текста (сам --ochre для текста слишком светлый) */
  --audit-bad: var(--madder);
}

.audit {
  margin-top: 22px;
}

/* ── Форма ввода ─────────────────────────────────────────────────── */
.audit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.audit-field {
  flex: 1 1 240px;
  min-width: 0;
}
.audit-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--indigo);
  font-family: var(--font-mono, var(--font-body));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.audit-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; /* 16px: iOS не зумит при фокусе */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.audit-field input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.audit-field input:focus-visible {
  outline: none;
  border-color: var(--madder);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.audit-field input[aria-invalid="true"] { border-color: var(--madder); }

.audit-form button[type="submit"] {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: var(--btn-fill);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 120ms ease, opacity 160ms ease;
}
.audit-form button[type="submit"]:active { transform: scale(0.97); }
.audit-form button[type="submit"]:focus-visible { outline: 2px solid var(--madder); outline-offset: 4px; }
.audit-form button[type="submit"]:disabled { opacity: .6; cursor: default; }

.audit-fielderror {
  margin: 8px 0 0;
  color: var(--madder);
  font-size: 14px;
}

/* ── Статус (загрузка / ошибка) ──────────────────────────────────── */
.audit-status,
.audit-honest {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.audit-status[data-tone="error"] { border-color: color-mix(in srgb, var(--madder) 40%, var(--line)); }
.audit-status[data-tone="loading"] { display: flex; align-items: center; gap: 10px; }

.audit-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--madder) 30%, transparent);
  border-top-color: var(--madder);
  border-radius: 50%;
  animation: audit-spin 700ms linear infinite;
  flex: 0 0 auto;
}
@keyframes audit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .audit-spinner { animation-duration: 1800ms; }
}

/* ── Результат ───────────────────────────────────────────────────── */
.audit-result { margin-top: 20px; }
.audit-result:focus-visible { outline: none; }

.audit-verdict {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: var(--card-grad);
  margin-bottom: 18px;
}
.audit-verdict[data-tone="bad"] { border-left-color: var(--audit-bad); }
.audit-verdict[data-tone="warn"] { border-left-color: var(--ochre); }
.audit-verdict[data-tone="ok"] { border-left-color: var(--audit-ok); }
.audit-verdict__text {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.6vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.audit-verdict__counts { display: flex; gap: 16px; }
.audit-count {
  font-family: var(--font-mono, var(--font-body));
  font-size: 15px;
  font-weight: 700;
}
.audit-count[data-status="bad"] { color: var(--audit-bad); }
.audit-count[data-status="warn"] { color: var(--audit-warn); }
.audit-count[data-status="ok"] { color: var(--audit-ok); }

/* ── Строки проверок ─────────────────────────────────────────────── */
.audit-rows {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.audit-row { padding: 14px 16px; border-top: 1px solid var(--line); }
.audit-row:first-child { border-top: 0; }
.audit-row__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.audit-row__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
}
.audit-row[data-status="bad"] .audit-row__icon { background: var(--audit-bad); }
.audit-row[data-status="warn"] .audit-row__icon { background: var(--ochre); }
.audit-row[data-status="ok"] .audit-row__icon { background: var(--audit-ok); }
.audit-row__label {
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}
.audit-row__prio {
  margin-left: auto;
  font-family: var(--font-mono, var(--font-body));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.audit-row__prio[data-status="bad"] { color: var(--audit-bad); }
.audit-row__prio[data-status="warn"] { color: var(--audit-warn); }
.audit-row__prio[data-status="ok"] { color: var(--audit-ok); }
.audit-row__detail {
  margin: 8px 0 0;
  padding-left: 32px;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  font-size: 15px;
  line-height: 1.55;
}

/* ── Блок скорости ───────────────────────────────────────────────── */
.audit-speed:not(:empty) { margin-top: 18px; }
.audit-speed__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

/* ── CTA после результата ────────────────────────────────────────── */
.audit-cta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.audit-cta__note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.audit-cta__line {
  margin: 0 0 16px;
  line-height: 1.6;
  color: var(--ink);
}
.audit-cta__line a { color: var(--madder); }
.audit-cta__btn,
.audit-honest .audit-cta__btn {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--btn-fill);
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 120ms ease;
}
.audit-cta__btn:active { transform: scale(0.98); }
.audit-cta__btn:focus-visible { outline: 2px solid var(--madder); outline-offset: 4px; }

.audit-honest { margin-top: 20px; }
.audit-honest__msg { margin: 0 0 14px; line-height: 1.6; }

/* Экранным читалкам, но не глазам (если ещё не объявлено на странице). */
.audit .sr-only,
.audit-result .sr-only,
.audit-verdict .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}