/* ============ SEO Audit form page — tools/seo-audit.html ============ */
/* Дополняет styles.css. Токены и базовые компоненты приходят оттуда. */

/* ============ Заголовочная шкала внутренней страницы ============ */

.audit-page .section-heading h2{max-width:26ch;font-size:clamp(30px,4.6vw,48px);line-height:1.06}

/* ============ Хлебные крошки ============ */

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;color:var(--quiet);font-size:12px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--quiet)}
.crumbs a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);transition:color 160ms var(--ease)}
.crumbs span[aria-current]{color:var(--text)}

/* ============ Hero инструмента ============ */

.tool-hero{padding:12px 0 var(--s16)}
.tool-hero .eyebrow{display:block;margin-top:var(--s6)}
.tool-hero h1{max-width:22ch;margin-top:14px;font-size:clamp(34px,5.4vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:590;text-wrap:balance}
.tool-hero__lead{max-width:56ch;margin-top:20px;color:var(--muted);font-size:clamp(16px,1.35vw,18px);line-height:1.62}

/* ============ Секция запуска: текст + форма ============ */

.audit-launch__layout{display:grid;gap:var(--s12)}
.audit-launch__copy h2{max-width:16ch;margin-top:14px;font-size:clamp(30px,4.8vw,50px);line-height:1.04;letter-spacing:-.045em;font-weight:580;text-wrap:balance}
.audit-launch__copy>p:not(.eyebrow){max-width:52ch;margin-top:20px;color:var(--muted);font-size:16px;line-height:1.62}

.audit-trust{display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.65}
.audit-trust strong{color:var(--text);font-weight:580}
.audit-trust a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}

/* ============ Форма аудита ============ */

.audit-form{display:grid;gap:20px;align-self:start;padding:clamp(20px,3.4vw,32px);border-top:1px solid var(--accent);border-bottom:1px solid var(--line-strong);background:var(--surface-deep)}

.audit-field{display:flex;flex-direction:column;gap:8px}
.audit-field>label{font-size:13px;font-weight:550}

.url-input-group{display:flex;align-items:stretch;border:1px solid var(--line-control);border-radius:var(--r1);background:var(--bg);transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.url-input-group:focus-within{border-color:var(--accent);box-shadow:var(--focus)}
.url-input-group__prefix{display:flex;align-items:center;padding-left:14px;color:var(--quiet);font-size:16px;user-select:none}
.audit-form__url-input{flex:1;min-width:0;min-height:48px;padding:12px 14px 12px 6px;border:0;border-radius:0 var(--r1) var(--r1) 0;background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.45;outline:none}
.audit-form__url-input::placeholder{color:var(--quiet)}

/* Капча: вопрос в label, ответ + смена вопроса в одной строке */
.audit-captcha__question{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.audit-captcha__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.audit-captcha__input{width:130px;min-height:48px;padding:12px 14px;border:1px solid var(--line-control);border-radius:var(--r1);background:var(--bg);color:var(--text);font:inherit;font-size:16px;line-height:1.45;outline:none;transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.audit-captcha__input::placeholder{color:var(--quiet)}
.audit-captcha__input:focus-visible{border-color:var(--accent);box-shadow:var(--focus)}
.audit-captcha__refresh{min-height:44px;display:inline-flex;align-items:center;padding:0 2px;border:0;background:transparent;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:5px;cursor:pointer;transition:color 160ms var(--ease)}

/* Ошибка формы: скрыта по умолчанию, JS добавляет --visible */
.audit-form__error{display:none;padding:12px 14px;border:1px solid var(--danger);border-radius:var(--r1);background:color-mix(in oklch,var(--danger) 10%,var(--surface-deep));color:var(--danger);font-size:14px;line-height:1.5}
.audit-form__error--visible{display:block}

/* Кнопка запуска: cooldown и загрузка приходят через disabled */
.audit-form__submit{justify-self:start}
.audit-form__submit:disabled{cursor:default}

/* Прогресс: скрыт по умолчанию, JS добавляет --active */
.audit-progress{display:none;gap:12px}
.audit-progress--active{display:grid}
.audit-progress__bar{position:relative;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.audit-progress__bar-fill{position:absolute;inset:0;width:36%;border-radius:2px;background:var(--accent);animation:audit-bar 1.7s var(--ease) infinite}
@keyframes audit-bar{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
.audit-progress__text{color:var(--muted);font-size:14px;line-height:1.55}

.audit-form__note{color:var(--quiet);font-size:12px}

/* ============ Реестр «8 направлений» ============ */

.report-register{list-style:none;border-top:1px solid var(--line-strong)}
.report-register li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.report-register li>span{padding-top:5px;color:var(--quiet);font-size:12px}
.report-register h3{font-size:21px;line-height:1.25;letter-spacing:-.025em;font-weight:540}
.report-register p{max-width:62ch;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55}
.report-note{max-width:68ch;margin-top:var(--s8);color:var(--muted);font-size:14px;line-height:1.65}

/* ============ Реестр «после отчёта» ============ */

.path-register{list-style:none;border-top:1px solid var(--line-strong)}
.path-register li{display:grid;grid-template-columns:32px 1fr;gap:10px 12px;padding:26px 0;border-bottom:1px solid var(--line)}
.path-register li>span{padding-top:5px;color:var(--quiet);font-size:12px}
.path-register h3{font-size:21px;line-height:1.25;letter-spacing:-.025em;font-weight:540}
.path-register p{max-width:58ch;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55}
.path-register .text-link{grid-column:2;justify-self:start}

/* ============ Финальная CTA ============ */

.audit-final__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:var(--s8)}
.audit-final .direct-link{margin-top:18px}

/* ============ Hover ============ */

@media (hover:hover){
  .crumbs a:hover{color:var(--text)}
  .audit-captcha__refresh:hover{color:var(--accent)}
}

/* ============ Desktop ============ */

@media (min-width:60rem){
  .tool-hero{padding-bottom:var(--s20)}
  .audit-launch__layout{grid-template-columns:minmax(320px,5fr) minmax(0,7fr);gap:40px 80px}
  .audit-launch__copy{grid-column:1;grid-row:1}
  .audit-launch .audit-form{grid-column:2;grid-row:1/3}
  .audit-launch .audit-trust{grid-column:1;grid-row:2;align-self:end}
  .report-register li{grid-template-columns:40px minmax(220px,340px) 1fr;align-items:baseline;gap:18px}.report-register li>div{display:contents}
  .report-register p{margin-top:0}
  .path-register li{grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:18px}
  .path-register .text-link{grid-column:3;justify-self:end}
}

/* ============ Mobile ============ */

@media (max-width:30rem){
  .audit-form{padding:20px 16px}
  .audit-form__submit{justify-self:stretch;width:100%}
}

/* ============ Доступность ============ */

@media (prefers-reduced-motion:reduce){
  .audit-progress__bar-fill{animation:none;width:100%;opacity:.45}
}
@media (prefers-contrast:more){
  .url-input-group,.audit-captcha__input,.audit-form__error{border-width:2px}
}
@media (forced-colors:active){
  .url-input-group,.audit-captcha__input{forced-color-adjust:auto}
  .audit-progress__bar{background:CanvasText;opacity:.3}
  .audit-progress__bar-fill{background:Highlight}
}