/* ══ Блок «Проверка сайта» (10.11.2026) ═══════════════════════════════
   Макет: design_handoff_xskill/SiteCheck.dc.html. Разметка — templates/parts/proverka-sajta.php,
   поведение — static/js/proverka-sajta.js. Префикс пс-. Состояние — data-state на секции:
   idle | loading | success | error; внутри форм — data-sent="1" после отправки.
   Крупные размеры из макета (56/44/40 px) — через clamp, чтобы на телефоне не ломалось. */

.пс { width: 100%; background: #F3F7FB; border-top: 1px solid #E2EAF2; border-bottom: 1px solid #E2EAF2;
      font-family: 'Manrope', system-ui, sans-serif; color: #14202B; }
.пс *, .пс *::before, .пс *::after { box-sizing: border-box; }
.пс-в { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px; min-height: 620px;
        display: flex; flex-direction: column; justify-content: center; }
/* только семейство: font: inherit с весом .пс button перебивал размер и жирность кнопок блока */
.пс button { font-family: inherit; cursor: pointer; }
.пс input { font-family: inherit; }
.пс input::placeholder { color: #97A3AF; }

/* состояния сменяют друг друга в одном месте */
.пс-ввод, .пс-счёт, .пс-итог, .пс-сбой { display: none; }
.пс[data-state="idle"]    .пс-ввод  { display: flex; }
.пс[data-state="loading"] .пс-счёт  { display: flex; }
.пс[data-state="success"] .пс-итог  { display: grid; }
.пс[data-state="error"]   .пс-сбой  { display: flex; }

/* ── A. Ввод ── */
.пс-ввод { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.пс-пилюля { padding: 8px 18px; border: 1px solid #DCE6F0; border-radius: 999px; background: #fff;
             font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.пс .пс-h { margin: 0; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em;
            max-width: 900px; text-wrap: balance; color: #14202B; }
.пс .пс-h span { color: #1A9FDB; }
.пс .пс-h .пс-без-цвета { color: inherit; word-break: break-word; }
.пс .пс-h-44 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.пс-лид { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #4A5764; max-width: 640px; text-wrap: pretty; }
.пс-лид-18 { font-size: clamp(16px, 1.5vw, 18px); max-width: 600px; }
.пс-капсула { width: 100%; max-width: 720px; display: flex; gap: 8px; margin-top: 10px; padding: 8px; background: #fff;
              border: 1px solid #D5E0EA; border-radius: 999px; box-shadow: 0 20px 50px -24px rgba(20,32,43,.22); }
.пс-капсула input { flex: 1 1 auto; min-width: 0; height: 60px; padding: 0 24px; border: 0; background: transparent;
                    font-size: 18px; color: #14202B; outline: none; }
.пс-капсула button { flex: none; height: 60px; padding: 0 36px; border: 0; border-radius: 999px; background: #D7F23A;
                     color: #14202B; font-size: 17px; font-weight: 700; transition: background .15s; }
.пс-капсула button:hover { background: #CBE62C; }
.пс-галки { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: #6B7884; }
.пс-ошибка-ввода { margin: -6px 0 0; font-size: 15px; color: #D9473F; font-weight: 600; }

/* ── B. Считаем ── */
.пс-счёт { width: 100%; max-width: 760px; margin: 0 auto; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.пс-метка { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #6B7884; }
.пс-домен-big { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1; word-break: break-word; }
.пс-полоса { width: 100%; height: 10px; background: #E4EBF2; border-radius: 99px; overflow: hidden; }
.пс-полоса div { height: 100%; width: 0; background: #1A9FDB; border-radius: 99px; transition: width .2s linear; }
.пс-шаги { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.пс-шаг { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-radius: 16px; text-align: left;
          font-size: 15px; line-height: 1.35; color: #97A3AF; }
.пс-шаг i { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 800; font-style: normal; background: #F0F4F8; color: #1A9FDB; }
.пс-шаг.сейчас { color: #14202B; }
.пс-шаг.сейчас i { background: #E4F0F9; }
.пс-шаг.сейчас i::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1A9FDB; }
.пс-шаг.готово { color: #14202B; }
.пс-шаг.готово i { background: #D7F23A; color: #14202B; }
.пс-шаг.готово i::before { content: '✓'; }
.пс-сноска-серая { margin: 0; font-size: 14px; color: #8A96A2; }

/* ── C. Получилось: прогноз слева, тёмная форма справа ── */
.пс-итог { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: stretch; }
.пс-прогноз { background: #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.пс-прогноз-верх { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.пс-зелёная { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #5E9A12; }
.пс-зелёная i { width: 8px; height: 8px; border-radius: 50%; background: #5E9A12; }
.пс-ещё { border: 0; background: none; padding: 0; font-size: 15px; font-weight: 700; color: #1A9FDB; }
.пс-ещё:hover { color: #127FB2; }
.пс-домен { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; word-break: break-word; }
.пс-плитки { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.пс-плитка { background: #F3F7FB; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.пс-плитка-лайм { background: #F4FADC; }
.пс-плитка b { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; white-space: nowrap; }
.пс-плитка b.длинное { font-size: clamp(22px, 2.3vw, 30px); }
.пс-плитка span { font-size: 15px; line-height: 1.35; color: #4A5764; }
.пс-трафик { display: flex; flex-direction: column; gap: 12px; }
.пс-трафик-верх { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #6B7884; }
.пс-трафик-верх b { font-size: 16px; color: #14202B; }
.пс-столбики { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: 120px; }
.пс-столбик { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.пс-столбик b { font-size: 15px; font-weight: 800; }
.пс-столбик div { background: #E4F0F9; border-radius: 10px 10px 4px 4px; min-height: 4px; }
.пс-столбик span { font-size: 13px; color: #6B7884; }
.пс-инфо { margin-top: auto; display: flex; gap: 12px; align-items: flex-start; padding-top: 20px; border-top: 1px solid #EEF2F6; }
.пс-инфо i { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid #8A96A2; color: #6B7884;
             display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-style: normal; }
.пс-инфо span { font-size: 14px; line-height: 1.5; color: #4A5764; text-wrap: pretty; }

/* тёмная форма демо */
.пс-демо { background: #14202B; color: #fff; border-radius: 28px; padding: clamp(24px, 3vw, 40px); min-width: 0; display: flex; }
.пс-демо-форма { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.пс-лайм-метка { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #D7F23A; }
.пс-демо-h { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; margin-top: -12px; }
.пс-демо-текст { font-size: 17px; line-height: 1.55; color: #C7D0D8; text-wrap: pretty; margin-top: -12px; }
.пс-шаг-формы { display: flex; flex-direction: column; gap: 12px; }
.пс-подпись { font-size: 15px; font-weight: 700; color: #fff; }
.пс-радио-ряд { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.пс-радио { position: relative; display: block; cursor: pointer; }
.пс-радио input, .пс-таблетка input { position: absolute; opacity: 0; pointer-events: none; }
.пс-радио-в { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1.5px solid #3A4956;
              font-size: 15px; font-weight: 700; color: #fff; transition: border-color .15s, background .15s; }
.пс-радио-в i { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #3A4956; display: flex;
                align-items: center; justify-content: center; }
.пс-радио input:checked + .пс-радио-в { background: #22303C; border-color: #D7F23A; }
.пс-радио input:checked + .пс-радио-в i { border-color: #D7F23A; }
.пс-радио input:checked + .пс-радио-в i::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #D7F23A; }
.пс-радио input:focus-visible + .пс-радио-в { outline: 2px solid #1A9FDB; outline-offset: 2px; }
.пс-поле-белое { width: 100%; height: 60px; padding: 0 20px; border: 0; border-radius: 16px; background: #fff; color: #14202B;
                 font-size: 17px; outline: none; }
.пс-поле-белое:focus { box-shadow: 0 0 0 3px rgba(215,242,58,.55); }
.пс-кнопка-во-всю { width: 100%; height: 60px; border: 0; border-radius: 999px; background: #D7F23A; color: #14202B;
                    font-size: 18px; font-weight: 800; transition: background .15s; }
.пс-кнопка-во-всю:hover { background: #CBE62C; }
.пс-кнопка-во-всю:disabled, .пс-сбой-строка button:disabled { opacity: .6; cursor: wait; }
.пс-ошибка-формы { margin: -8px 0 0; font-size: 14px; font-weight: 600; color: #FF8A80; }
.пс-сбой .пс-ошибка-формы { color: #D9473F; margin: 0; }

/* «Принято» */
.пс-принято { display: none; }
[data-sent="1"] .пс-демо-форма { display: none; }
.пс-демо[data-sent="1"] .пс-принято { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; min-height: 320px; }
.пс-демо .пс-принято .пс-демо-текст { margin-top: 0; }
.пс-галка-большая { width: 56px; height: 56px; border-radius: 50%; background: #D7F23A; color: #14202B; display: flex;
                    align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.пс-принято-h { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }

/* ── D. Не получилось ── */
.пс-сбой { width: 100%; max-width: 760px; margin: 0 auto; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.пс-знак { width: 56px; height: 56px; border-radius: 18px; background: #FDEDEC; color: #D9473F; display: flex; align-items: center;
           justify-content: center; font-size: 26px; font-weight: 800; }
.пс-сбой-карта { width: 100%; margin-top: 10px; background: #fff; border-radius: 24px; padding: 24px; text-align: left; }
.пс-сбой-карта .пс-демо-форма { gap: 12px; }
.пс-сбой-вопрос { font-size: 17px; font-weight: 700; }
.пс-таблетки { display: flex; gap: 6px; padding: 4px; background: #F3F7FB; border-radius: 12px; }
.пс-таблетка { flex: 1; position: relative; cursor: pointer; }
.пс-таблетка-в { display: block; text-align: center; font-size: 14px; font-weight: 700; padding: 9px 0; border-radius: 9px; color: #6B7884; }
.пс-таблетка input:checked + .пс-таблетка-в { background: #fff; color: #14202B; box-shadow: 0 1px 3px rgba(20,32,43,.12); }
.пс-таблетка input:focus-visible + .пс-таблетка-в { outline: 2px solid #1A9FDB; }
.пс-сбой-строка { display: flex; gap: 8px; flex-wrap: wrap; }
.пс-поле { flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid #D5E0EA; border-radius: 14px;
           font-size: 16px; outline: none; color: #14202B; background: #fff; }
.пс-поле:focus { border-color: #1A9FDB; }
.пс-сбой-строка button { height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #D7F23A; font-size: 16px;
                         font-weight: 700; color: #14202B; }
.пс-сбой-строка button:hover { background: #CBE62C; }
.пс-сбой-карта[data-sent="1"] .пс-принято-строка { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; }
.пс-галка-малая { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #D7F23A; color: #14202B; display: flex;
                  align-items: center; justify-content: center; font-weight: 800; }
.пс-кнопка-контур { height: 48px; padding: 0 22px; border: 1px solid #D5E0EA; border-radius: 999px; background: #fff;
                    font-size: 15px; font-weight: 700; color: #14202B; transition: border-color .15s, color .15s; }
.пс-кнопка-контур:hover { border-color: #1A9FDB; color: #1A9FDB; }

/* ── Телефон ── */
@media (max-width: 640px) {
  .пс-в { min-height: 0; padding-left: 16px; padding-right: 16px; }
  /* капсула: поле над кнопкой, обе во всю ширину */
  .пс-капсула { flex-direction: column; border-radius: 28px; }
  .пс-капсула input { height: 56px; padding: 0 16px; text-align: center; }
  .пс-капсула button { width: 100%; height: 56px; }
  .пс-галки { gap: 8px 16px; }
  .пс-прогноз { padding: 22px; border-radius: 22px; }
  .пс-демо { border-radius: 22px; }
  .пс-плитка { padding: 16px; }
  .пс-плитка span { font-size: 14px; }
  .пс-плитка b { font-size: 28px; }
  .пс-плитка b.длинное { font-size: 19px; }
  .пс-радио-в { padding: 12px 8px; gap: 6px; font-size: 14px; justify-content: center; }
  .пс-радио-в i { width: 16px; height: 16px; }
  .пс-сбой-строка button { width: 100%; }
}