/* Бесплатная проверка сайта `/website-checker/` (SCRUM-957).

   Пластика - страниц продукта (`product-pages.css`): первый экран, строки, кнопки и поля - их классы.
   Своё здесь - поле адреса с кнопкой в строку, плитки оценок, список бед и боковая колонка с кнопкой
   в мастер. Ширину решает контейнерный запрос `.sc-ln-sec`. Переменные объявлены ОДНИ - тона кабинета
   Search & AI (`--sg-*`, ниже): они живут в собранном зеркале кабинета, а сюда приходят теми же числами,
   и равенство сторожит набор (`website-checker-test.php`).

   Состояние не держится одним цветом: у плитки и строки есть слово-значок («Good», «Needs work»,
   «Problem») - в принудительной палитре цвет пропадает, слово остаётся. */

/* Поле адреса: на узком - столбиком, с 600 - в строку. */
.sc-wc-form{display:flex;flex-direction:column;gap:var(--sc-space-12);inline-size:100%;max-inline-size:640px}
.sc-wc-form__url{min-block-size:56px;font-size:var(--sc-text-body)}
.sc-wc-form__go{white-space:nowrap}
@container (min-width:600px){
  .sc-wc-form{flex-direction:row;align-items:stretch}
  .sc-wc-form__url{flex:1;min-inline-size:0}
}
.sc-wc-form[aria-busy="true"] .sc-wc-form__go{opacity:.6;cursor:progress}

.sc-wc-note{margin:0;font-size:var(--sc-text-body-sm);line-height:1.5;color:var(--sc-ink-600)}
.sc-wc-err{margin:0;padding:var(--sc-space-12) var(--sc-space-16);max-inline-size:640px;
  border:var(--sc-rule-w) solid var(--sc-danger);border-radius:var(--sc-radius-ctl);background:var(--sc-surface);
  font-size:var(--sc-text-body-sm);line-height:1.5;color:var(--sc-ink-900)}
.sc-wc-err[hidden]{display:none}

/* Отчёт. */
.sc-wc-out{padding-block:var(--sc-space-32) var(--sc-space-64)}
.sc-wc-out[hidden]{display:none}
.sc-wc-out .sc-ln-wrap{display:flex;flex-direction:column;gap:var(--sc-space-24)}
.sc-wc-out .sc-ln-h2{margin:0;overflow-wrap:anywhere}
.sc-wc-out .sc-ln-h2:focus{outline:none}

/* Ход проверки (SCRUM-960): шаг идёт - крутится лоадер, пройден - галочка, не начат - пустой кружок, упал -
   красный знак. Состояние ставит скрипт по стадии задания; без движения лоадер стоит дугой, а не пропадает. */
.sc-wc-wait{display:flex;flex-direction:column;gap:var(--sc-space-16)}
.sc-wc-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sc-space-12)}
.sc-wc-steps li{display:flex;align-items:flex-start;gap:var(--sc-space-12);font-size:var(--sc-text-body);line-height:1.5;color:var(--sc-ink-500)}
.sc-wc-steps li[data-state="now"]{color:var(--sc-ink-950);font-weight:var(--sc-fw-medium)}
.sc-wc-steps li[data-state="done"]{color:var(--sc-ink-700)}
.sc-wc-steps li[data-state="fail"]{color:var(--sc-danger)}
.sc-wc-steps__i{position:relative;flex:none;box-sizing:border-box;inline-size:20px;block-size:20px;margin-block-start:calc((1.5em - 20px) / 2);
  border-radius:var(--sc-radius-pill);border:2px solid var(--sc-ink-300)}
[data-state="now"] .sc-wc-steps__i{border-color:var(--sc-ink-200);border-block-start-color:var(--sc-ink-950);animation:sc-wc-spin .8s linear infinite}
[data-state="done"] .sc-wc-steps__i{border-color:var(--sc-success);background:var(--sc-success)}
/* Галочка - знак, а не стрелка: в RTL не зеркалится, поэтому стоит физически. */
[data-state="done"] .sc-wc-steps__i::after{content:"";position:absolute;inset-block-start:2px;left:5px;inline-size:5px;block-size:9px; /* rtl-ok: галочка не зеркалится */
  border:solid var(--sc-success-on);border-width:0 2px 2px 0;rotate:45deg} /* rtl-ok: галочка не зеркалится */
[data-state="fail"] .sc-wc-steps__i{border-color:var(--sc-danger);background:var(--sc-danger)}
[data-state="fail"] .sc-wc-steps__i::before,[data-state="fail"] .sc-wc-steps__i::after{content:"";position:absolute;inset-block-start:3px;
  inset-inline-start:7px;inline-size:2px;block-size:10px;background:var(--sc-danger-on);border-radius:1px;rotate:45deg}
[data-state="fail"] .sc-wc-steps__i::after{rotate:-45deg}
@keyframes sc-wc-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){[data-state="now"] .sc-wc-steps__i{animation:none}}
html.atx-rm [data-state="now"] .sc-wc-steps__i{animation:none}

/* Тона кабинета Search & AI (SCRUM-960, решение владельца «цвета как в кабинете»). Значения - из `seo.css` (`.sg`),
   набор сверяет их числами; свои не заводить. */
.sc-wc-out{--sg-mut:var(--sc-text-muted,#6b6f76);--sg-warn-fill:#f2b840;--sg-warn-on:#3d2600;--sg-warn-line:#c2860a}

/* Плитки оценок: две в ряд на телефоне, четыре с 900. В плитке - кольцо кабинета (`sc_seo_ring()`). */
.sc-wc-scores{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-space-12)}
@container (min-width:900px){.sc-wc-scores{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sc-space-16)}}
.sc-wc-score{display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-8);padding:var(--sc-space-16) var(--sc-space-12);
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-radius-lg);background:var(--sc-surface);text-align:center}
.sc-wc-score__name{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);line-height:1.3;color:var(--sc-ink-800)}
.sc-wc-score__num{font-size:40px;line-height:1;font-weight:var(--sc-fw-medium);color:var(--sc-ink-950)}
.sc-wc-score__none{font-size:var(--sc-text-body-sm);color:var(--sc-ink-600)}

/* Кольцо - правила зеркала кабинета (`seo.css`, «ПОЛОСА ОЦЕНКИ»): зеркало 72 КБ и собирается прогоном, поэтому
   на страницу оно не грузится, а нужные правила стоят здесь теми же значениями (сверяет набор). Размер - узкий
   размер того же зеркала (104 точки): четыре кольца в ряд и два на 390 не слипаются. */
.sc-wc-score .sg-score__d{position:relative;flex:none;inline-size:103.68px;block-size:108px;color:var(--sc-ink-500,#8a8e95)}
.sc-wc-score .sg-score__d[data-t="bad"]{color:var(--sc-danger,#c2410c)}
.sc-wc-score .sg-score__d[data-t="mid"]{color:var(--sg-warn-line)}
.sc-wc-score .sg-score__d[data-t="ok"]{color:var(--sc-success,#0f6b4f)}
.sc-wc-score .sg-score__d svg{inline-size:103.68px;block-size:108px;display:block}
.sc-wc-score .sg-score__v{position:absolute;inset-block-start:0;inset-inline:0;block-size:104.76px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  direction:ltr} /* «/100» на иврите читался «100/»: число и знаменатель - запись, а не фраза */
.sc-wc-score .sg-score__v b{font-size:30.24px;line-height:1;font-weight:500;color:var(--sc-ink-950,#1c1e21);font-variant-numeric:tabular-nums}
.sc-wc-score .sg-score__v span{font-size:14.04px;line-height:1.2;color:var(--sg-mut)}

/* Плашка состояния - залитая, тонами кабинета (`.sg-q__p`): слово остаётся и без цвета. В строку не переносится. */
.sc-wc-badge{display:inline-flex;align-items:center;flex:none;white-space:nowrap;padding:2px var(--sc-space-8);
  border-radius:var(--sc-radius-pill);font-size:var(--sc-text-caption);line-height:1.4;font-weight:var(--sc-fw-medium);
  background:var(--sc-ink-50,#f6f6f7);color:var(--sg-mut)}
.sc-wc-badge[data-t="ok"]{background:var(--sc-success,#0f6b4f);color:var(--sc-success-on,#fff)}
.sc-wc-badge[data-t="mid"]{background:var(--sg-warn-fill);color:var(--sg-warn-on)}
.sc-wc-badge[data-t="bad"]{background:var(--sc-danger,#c2410c);color:var(--sc-danger-on,#fff)}
.sc-wc-badge--none{display:none}

.sc-wc-sent{margin:0;padding:var(--sc-space-12) var(--sc-space-16);border-radius:var(--sc-radius-ctl);
  border:var(--sc-rule-w-hair) solid var(--sc-success);background:var(--sc-surface);font-size:var(--sc-text-body-sm);line-height:1.5}

/* Две колонки с 900: беды и полный отчёт слева, мастер и ссылка справа. */
.sc-wc-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sc-space-24)}
@container (min-width:900px){.sc-wc-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sc-space-48);align-items:start}}
.sc-wc-main,.sc-wc-side{display:flex;flex-direction:column;gap:var(--sc-space-24);min-inline-size:0}

.sc-wc-h3{margin:0;font-size:var(--sc-text-h3);line-height:1.25;font-weight:var(--sc-fw-medium);color:var(--sc-ink-950)}
.sc-wc-h4{margin:0;font-size:var(--sc-text-body);line-height:1.3;font-weight:var(--sc-fw-medium);color:var(--sc-ink-950)}
.sc-wc-top,.sc-wc-full,.sc-wc-sec{display:flex;flex-direction:column;gap:var(--sc-space-12)}
.sc-wc-full{gap:var(--sc-space-24)}
.sc-wc-ok{margin:0;font-size:var(--sc-text-body);color:var(--sc-ink-800)}

.sc-wc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sc-space-8)}
.sc-wc-item{padding:var(--sc-space-12) var(--sc-space-16);border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);
  border-radius:var(--sc-radius-md);background:var(--sc-surface);display:flex;flex-direction:column;gap:var(--sc-space-4)}
/* Строка беды подкрашена тоном, как пояснение кабинета (`.sg-note--*`), поверх белой карточки. */
.sc-wc-item[data-t="bad"]{border-color:transparent;background:color-mix(in oklab,var(--sc-danger,#c2410c) 9%,var(--sc-surface))}
.sc-wc-item[data-t="mid"]{border-color:transparent;background:color-mix(in oklab,var(--sg-warn-fill) 22%,var(--sc-surface))}
.sc-wc-item[data-t="ok"]{border-color:transparent;background:color-mix(in oklab,var(--sc-success,#0f6b4f) 9%,var(--sc-surface))}
.sc-wc-item__t{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sc-space-8);font-size:var(--sc-text-body);line-height:1.3}
.sc-wc-item__x{margin:0;font-size:var(--sc-text-body-sm);line-height:1.55;color:var(--sc-ink-700);overflow-wrap:anywhere}
.sc-wc-sec .sc-pp-list{font-size:var(--sc-text-body-sm);line-height:1.5;color:var(--sc-ink-700)}

/* Почта за полный отчёт и кнопка в мастер - карточками. */
.sc-wc-mail,.sc-wc-cta{display:flex;flex-direction:column;gap:var(--sc-space-12);padding:var(--sc-space-24);
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-radius-lg);background:var(--sc-surface)}
.sc-wc-cta{background:var(--sc-l-surface-2);color:var(--sc-l-surface-2-on)}
.sc-wc-cta form{margin:0}
.sc-wc-cta .sc-btn{inline-size:100%;white-space:normal;line-height:1.2;text-align:center}
.sc-wc-mail__row{display:flex;flex-direction:column;gap:var(--sc-space-8)}
@container (min-width:600px){.sc-wc-mail__row{flex-direction:row}.sc-wc-mail__row .sc-input{flex:1;min-inline-size:0}}
.sc-wc-mail__row .sc-btn{white-space:nowrap}
.sc-wc-consent .sc-choice__text a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.sc-wc-share{display:flex;flex-direction:column;gap:var(--sc-space-8)}
.sc-wc-share__row{display:flex;flex-wrap:wrap;gap:var(--sc-space-8)}
.sc-wc-share__row .sc-btn{white-space:nowrap}

.sc-wc-hero .sc-ln-wrap{gap:var(--sc-space-16)}