/* Виджет «Экспресс-проверка сайта» (.xc). Подключается чанком _glob_/blocks/checkWidget.php.
   Самодостаточный: все правила под .xc, цвета и радиусы — свои переменные с запасными значениями,
   поэтому одинаково выглядит и на страницах инструментов (tools/style.css), и на остальных страницах сайта. */

.xc {
  --xc-bg: #f6f7fa;
  --xc-line: #dcdcdc;
  --xc-muted: #5b5b5b;
  --xc-ink: #000;
  --xc-accent: #ffd900;
  --xc-accent-hover: #ffe94d;
  --xc-danger: #8a1c14;
  --xc-danger-line: #c0392b;
  --xc-danger-bg: #fdf1f0;
  box-sizing: border-box;
  background: var(--xc-bg);
  border: 2px solid var(--xc-accent);
  border-radius: 8px;
  padding: 24px;
  margin: 32px 0 0;
  color: var(--xc-ink);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}
.xc *, .xc *::before, .xc *::after { box-sizing: border-box; }
.xc [hidden] { display: none !important; }
.xc h3 { font-size: 18px; line-height: 1.25; margin: 0 0 12px; }
.xc .xc__title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
.xc__result h3 { margin-top: 20px; }
.xc p { margin: 0 0 12px; }
.xc a { color: inherit; }

.xc-btn {
  display: inline-block;
  padding: 14px 20px;
  border: 2px solid var(--xc-accent);
  border-radius: 6px;
  background: transparent;
  color: var(--xc-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.xc-btn:hover, .xc-btn:focus { border-color: var(--xc-accent-hover); }
.xc-btn--primary { background: var(--xc-accent); }
.xc-btn--primary:hover, .xc-btn--primary:focus { background: var(--xc-accent-hover); }
.xc-btn--secondary:hover, .xc-btn--secondary:focus { background: var(--xc-accent-hover); }
.xc-btn[disabled] { opacity: .6; pointer-events: none; }

.xc__lead { max-width: 780px; margin: 0 0 20px; }
.xc__form { max-width: 780px; margin: 0 0 16px; }
.xc__label { display: block; font-weight: 600; margin-bottom: 6px; }
.xc__row { display: flex; gap: 8px; }
.xc__row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 12px;
  border: 1px solid var(--xc-line);
  border-radius: 6px;
  background: #fff;
  color: var(--xc-ink);
}
.xc__hint { font-size: 13px; color: var(--xc-muted); margin: 6px 0 0; }
.xc__err { color: var(--xc-danger); font-size: 14px; margin: 6px 0 0; }
.xc__wait { color: var(--xc-muted); }
.xc__down { margin: 12px 0 0; }

.xc__result { max-width: 780px; border: 1px solid var(--xc-line); border-radius: 8px; padding: 20px; margin: 0 0 16px; background: #fff; }
.xc__score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.xc__score b { font-size: 44px; line-height: 1; }
.xc__score span { color: var(--xc-muted); }
.xc__score em { font-style: normal; color: var(--xc-muted); margin-left: auto; }
.xc__noscore { color: var(--xc-muted); margin: 0 0 8px; }
.xc__count { font-weight: 600; margin: 0 0 12px; }
.xc__level {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--xc-bg);
  color: var(--xc-muted);
}
.xc .lvl-critical .xc__level { background: #fde2e1; color: #8a1c14; }
.xc .lvl-important .xc__level { background: #fff1d6; color: #7a4b00; }

.xc__first { border: 2px solid var(--xc-danger-line); background: var(--xc-danger-bg); border-radius: 8px; padding: 16px 20px; margin: 0 0 20px; }
.xc__result .xc__first h3 { margin: 0 0 10px; color: var(--xc-danger); }
.xc__issues { margin: 0; padding-left: 20px; }
.xc__issues li { margin-bottom: 12px; }
.xc__issues b { font-size: 18px; }
.xc__issues p { margin: 4px 0 0; font-size: 15px; }
.xc__issues i { font-style: normal; color: var(--xc-muted); }

.xc__rest { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--xc-line); }
.xc__rest li { border-bottom: 1px solid var(--xc-line); padding: 10px 0; }
.xc__rest summary { cursor: pointer; }
.xc__rest p { margin: 6px 0 0; font-size: 15px; }
.xc__rest i { font-style: normal; color: var(--xc-muted); }

.xc__limits { margin: 8px 0 16px; }
.xc__limits summary { cursor: pointer; font-weight: 600; }

.xc__keep { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.xc__mail { display: grid; gap: 10px; max-width: 520px; }
.xc__mail > label { display: grid; gap: 6px; font-weight: 600; }
.xc__mail input[type=email] { font: inherit; padding: 12px; border: 1px solid var(--xc-line); border-radius: 6px; background: #fff; color: var(--xc-ink); }
.xc .xc__consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.xc .xc__consent input { margin-top: 3px; }
.xc__mail-err { color: var(--xc-danger); margin: 0; font-size: 14px; }
.xc__mail-done { font-weight: 600; }

.xc__steps { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 520px; }
.xc__step { display: block; border: 2px solid var(--xc-accent); border-radius: 8px; padding: 14px; background: #fff; }
.xc__step b { display: block; margin-bottom: 4px; }
.xc__step > span { font-size: 14px; color: var(--xc-muted); }
.xc__step-act { margin: 10px 0 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.xc__second { margin: 16px 0 0; }
.xc__full { margin: 12px 0 0; }
.xc__about { margin: 0; }

@media (max-width: 767px) {
  .xc { padding: 16px; }
  .xc__row { flex-direction: column; }
  .xc__row .xc-btn { width: 100%; }
  .xc__result { padding: 16px; }
  .xc__score em { margin-left: 0; }
}