/* Проверка сайта — шаги 2 и 3 (скоуп site-check-2.html, site-check-3.html).
   Главная и общие файлы заморожены: components.css/tokens.css не трогаем,
   всё, что отличается от эталона, — классы и модификаторы здесь.
   Значения — замер по SVG Figma «Site check 2 · Проверяем» и
   «Site check 3 · Результат» (Desktop 1440 / Tablet 768 / Mobile 390). */

/* Цвета статуса «исправить» есть только в этих макетах; в tokens.css их нет,
   поэтому держим локально (вопрос Сергею — см. отчёт). */
.sc{--sc-red:#D70015;--sc-red-soft:#FDECEC}

/* ——— Раскладка первого экрана ———————————————————————————————
   Д: слева текст и форма, справа карточка проверки; П и Т — одна колонка. */
.sc__grid{
  display:grid;
  grid-template-columns:minmax(0,650px) minmax(0,526px);
  justify-content:space-between;
  align-items:start;
  column-gap:24px;
}
.sc .lead{margin-top:29px;max-width:530px}     /* перенос «…ваш сайт, / она не посоветует…» как в макете */

/* Правки 65 (D-37, D-39): H1 56/60 на ПК (на 768 и 390 48/52 и 36/40 дают --fs-h1),
   абзац 20/30 — на 768 это уже --fs-lead, поэтому правим только ПК. */
.sc__h1 .muted{display:block}                  /* в макетах image22–24 «Проверим за минуту.» со своей строки */
@media (min-width:1024px){
  .sc__h1{font-size:var(--fs-h2);line-height:var(--lh-h2)}   /* 56/60 */
  .sc .lead{font-size:20px;line-height:30px;max-width:480px} /* перенос «…ваш сайт, / она не посоветует…» */
}

/* ——— Форма проверки (шаг 2) ————————————————————————————————— */
.sc-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.sc-input{
  flex:0 0 auto;width:416px;height:var(--btn-h);
  padding:0 24px;
  border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
}
.sc-input::placeholder{color:var(--gray-2)}
.sc-form__btn{background:var(--line);color:var(--gray-2);cursor:default}
.sc-form__note{margin-top:16px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}  /* D-39: подсказка 15, по левому краю колонки */

/* ——— Ссылка «Проверить другой сайт» (шаг 3) ——————————————————— */
.sc-done{margin-top:20.5px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)}
.sc-link{display:inline-block;margin-top:4px;font-size:var(--fs-body);line-height:21px;font-weight:700;color:var(--blue)}

/* ——— Карточка проверки ——————————————————————————————————— */
.sc-card{padding:35.8px 35px 0;border-radius:var(--r-md)}   /* 28/24/24 — как было на сером фоне */
.sc-3 .sc-card{padding-top:30px}
.sc-2 .sc-card{margin-top:29.7px}              /* макет: карточка ниже верха колонки на 29,7 */
.sc-3 .sc__head{margin-top:98.3px}             /* макет: текстовая колонка ниже верха карточки */

.sc-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sc-card__site{font-size:var(--fs-title-m);line-height:28px;font-weight:700;color:var(--ink)}
.sc-card__count{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:700;color:var(--gray)}
.sc-card__when{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray-2)}

.sc-list{list-style:none;margin:0;padding:0}
.sc-item{display:flex;align-items:flex-start;gap:14px}
.sc-item + .sc-item{border-top:1px solid var(--line)}
.sc-2 .sc-list{margin-top:22.1px}
.sc-2 .sc-item{padding-bottom:20.2px}
.sc-2 .sc-item + .sc-item{padding-top:16px}
.sc-2 .sc-item:last-child{padding-bottom:36.1px}
.sc-2 .sc-item__desc{margin-top:2.9px}
.sc-3 .sc-list{margin-top:17.7px}
.sc-3 .sc-item{padding-bottom:18.2px}
.sc-3 .sc-item + .sc-item{padding-top:16.8px}
.sc-3 .sc-item:last-child{padding-bottom:0}
.sc-3 .sc-item__desc{margin-top:2px}
.sc-ico{flex:0 0 36px;width:36px;height:36px}        /* D-40: кружок 36 */
.sc-item__body{flex:1 1 auto;min-width:0}
/* D-40: заголовок пункта 20 Bold на всех трёх ширинах (подпись к image22–24 даёт
   одно число). На ПК это --fs-title-s; на 768/390 токен даёт 19/18, поэтому 20/26 явно. */
.sc-item__title{display:block;font-size:20px;line-height:26px;font-weight:700;color:var(--ink)}
.sc-item__desc{display:block;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}
.sc[data-state="checking"] .sc-item--wait .sc-item__title{color:var(--gray-2)}
.sc[data-state="checking"] .sc-item--wait .sc-item__desc{color:var(--gray-3)}

/* кружок с номером — для ещё не начатых пунктов */
/* D-40: кружок белый (секция теперь белая, карточка серая), цифра 17 Bold тёмная */
.sc-ico--num{display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--bg);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.sc-ico--ok,.sc-ico--bad{border-radius:50%;background:var(--blue-tint)}
.sc-ico--bad{background:var(--sc-red-soft)}
.sc-ico svg{display:block;width:100%;height:100%}

/* ——— Статусы (шаг 3) ———————————————————————————————————— */
.sc-chip{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;height:32px;padding:0 11.8px;
  border-radius:var(--r-pill);background:var(--blue-tint);color:var(--blue);
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.sc-chip--bad{background:var(--sc-red-soft);color:var(--sc-red)}

/* ——— Итог и кнопка (шаг 3) —————————————————————————————— */
.sc-card .sc-sum{margin-top:35.35px;background:var(--bg);border-radius:var(--r-sm);
  padding:13.84px 18.5px 16.66px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}
.sc-sum b{color:var(--ink)}
.sc-card .btn--sm{margin-top:17px;margin-bottom:32px;width:100%;border-radius:24px}

/* ——— Планшет 768–1023 ——————————————————————————————————— */
@media (min-width:768px) and (max-width:1023px){
  .sc .eyebrow{font-size:17px;line-height:21px}   /* в макете 768 надзаголовок того же кегля, что на 1440 */
}
@media (max-width:1023px){
  .sc__grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .sc__h1{max-width:none}
  .sc .lead{max-width:480px}
  .sc-2 .sc-card{margin-top:39.4px}
  .sc-3 .sc__head{margin-top:0}
  .sc-card{border-radius:28px}                    /* в макете 768 скругление карточки 28, а не 24 */
  .sc-3 .sc-card{margin-top:43.3px}
  .sc-3 .sc-done{margin-top:18.82px}
  .sc-3 .sc-link{margin-top:5.9px}
  .sc-3 .sc-list{margin-top:19.68px}
  .sc-form{margin-top:34px;flex-wrap:nowrap}  /* D-39: на 768 поле и кнопка в одну строку */
  .sc-input{flex:1 1 auto;width:auto}
  .sc-form__btn{flex:0 0 auto;margin-top:0}
  .sc-form__note{margin-top:16px}
  .sc-2 .sc-list{margin-top:21.3px}
  .sc-card__head{align-items:center}
}

/* ——— Телефон до 767 ———————————————————————————————————— */
@media (max-width:767px){
  .sc__h1{letter-spacing:-0.65px;max-width:280px}   /* в макете 390 текстовый блок H1 уже контейнера: переносы «Видят ли / нейросети / ваш сайт?» */
  .sc .lead{max-width:none;margin-top:25px}
  .sc-form{display:block;margin-top:25.65px}
  .sc-input{width:100%;height:var(--btn-h);padding:0 20px}
  .sc-form__btn{display:flex;width:100%;margin-top:9.9px}
  .sc-form__note{margin-top:14.04px;font-size:var(--fs-small)}   /* D-39: в макете 390 подсказка по левому краю */
  .sc-2 .sc-card{margin-top:28.36px}
  .sc-3 .sc-card{margin-top:28.89px;padding-top:22.15px}
  .sc-3 .sc-done{margin-top:23.63px}
  .sc-3 .sc-link{margin-top:3.43px;font-size:16px}
  .sc-3 .sc-list{margin-top:14.56px}
  .sc-card__site{font-size:18px;line-height:24px}
  .sc-card__when{font-size:13px;line-height:16px}
  .sc-card{padding:27.5px 20px 0;border-radius:24px}
  .sc-ico{margin-top:1.2px}                 /* D-40: кружок 36 на всех ширинах */
  /* D-40: заголовок пункта 20 (--fs-title-s на 390 = 18/24) — прежние 16 сняты */
  .sc-2 .sc-list{margin-top:18.12px}
  .sc-2 .sc-item{padding-bottom:15.76px}
  .sc-2 .sc-item + .sc-item{padding-top:11.88px}
  .sc-2 .sc-item:last-child{padding-bottom:27.46px}
  /* на 390 статус уходит под текст пункта — так в макете */
  .sc-item{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:0}
  .sc-ico{grid-column:1;grid-row:1}
  .sc-item__body{grid-column:2;grid-row:1}
  .sc-chip{grid-column:2;grid-row:2;justify-self:start;align-self:start;margin-top:21.6px;
    height:28px;padding:0 10.7px;font-size:12px}
  .sc-3 .sc-list{margin-top:14.56px}
  .sc-3 .sc-item{padding-bottom:12.7px}
  .sc-3 .sc-item + .sc-item{padding-top:12.1px}
  .sc-3 .sc-item__desc{margin-top:3px}
  .sc-card .sc-sum{margin-top:29.4px;padding:15.24px 17.4px 17.76px}
  .sc-card .btn--sm{margin-top:16.9px;margin-bottom:23.4px}
}

/* ——— Рабочая страница site-check.html ————————————————————————
   Состояния (ожидание → проверяем → результат) переключают класс секции
   .sc-2 / .sc-3 и классы пунктов, поэтому вся геометрия выше переиспользуется
   без изменений. Ниже — только то, чего нет в статических кадрах макета. */

/* hidden должен выигрывать у display:flex/block компонентов */
.sc [hidden]{display:none!important}

/* Активная кнопка «Проверить» (в макете есть только серая «Проверяем…»). */
.sc-form__btn.btn--primary{background:var(--blue);color:var(--bg);cursor:pointer}
.sc-form__btn.btn--primary:hover{background:var(--blue-hover)}
/* Поле на время проверки disabled, но выглядит как в макете шага 2. */
.sc-input:disabled{background:var(--bg);color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink)}
.sc-card:focus{outline:none}
.sc-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Спиннер текущего пункта. Макет статичен — вращение добавлено кодом. */
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-ico--load svg{animation:sc-spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){
  .sc-ico--load svg{animation:none}
}

/* Ошибка (макета нет): текст + «Повторить» на месте примечания под формой. */
.sc-error{display:block;margin-top:16px;
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--sc-red)}
.sc-error__btn{font-family:var(--font);font-size:var(--fs-small);line-height:var(--lh-small);
  font-weight:700;color:var(--blue);background:none;border:0;padding:0;cursor:pointer}


/* Невидимая строка для скринридера: объявляет, какой пункт проверяется. */
.sc-sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Плашка демо-режима (?demo=1): чтобы пример из макета не приняли за проверку. */
.sc-demo{position:fixed;left:var(--gutter);bottom:20px;z-index:40;margin:0;
  max-width:320px;padding:10px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--bg);
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}