/* Типографика, палитра, сетки, карточки, FAQ и поля приходят из site.css.
   Здесь только отличия набора исполнителей: кадрирование фото и состояния
   локальной анкеты. Общие design-* компоненты меняются в src/styles.css. */
.worker-landing { overflow-x: clip; }
.worker-landing :where(section[id], main[id], input, select) { scroll-margin-top: 110px; }
.worker-landing :where(h1 span, h2 span) { color: var(--air-blue-deep); }
.worker-landing summary:focus-visible { outline: 3px solid var(--design-blue-deep); outline-offset: 4px; }
.worker-skip { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 14px 20px; background: white; border-radius: 8px; }
.worker-skip:focus { top: 14px; }

/* Подписи «Шаг N» длиннее цифровых маркеров общей сетки. Расширяем только
   карточки подключения, не затрагивая иконки и карточки других разделов. */
.worker-landing .design-flow .design-card-grid > li > span {
  width: max-content;
  min-width: 74px;
  padding-inline: 10px;
  white-space: nowrap;
}

/* Размеры заголовка, кнопки и desktop-компоновка наследуются от design-hero.
   У фото с человеком своя вуаль: лицо и руки должны оставаться видимыми. */
.worker-hero {
  background:
    linear-gradient(90deg, rgb(248 251 255 / .91) 0%, rgb(248 251 255 / .76) 33%, rgb(248 251 255 / .1) 63%, rgb(248 251 255 / 0) 100%),
    url('/assets/for-workers-hero.webp') center / cover;
  background-attachment: fixed;
}

/* Это исключение связано с композицией фотографии, а не с отдельной шкалой
   размеров страницы. На mobile/tablet человек над текстом; общая типографика
   и адаптивность design-copy/design-actions продолжают работать без дублей. */
@media (max-width: 980px) {
  .worker-hero {
    background-color: var(--design-bg);
    background-image:
      linear-gradient(180deg, rgb(248 251 255 / 0) 20%, rgb(248 251 255 / .1) 32%, #f8fbff 55%),
      url('/assets/for-workers-hero.webp');
    background-size: 100% 100%, auto 62%;
    background-position: center, 71% top;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  .worker-hero__layout { min-height: 100svh; padding-top: max(320px, 42svh); align-items: end; }
}

/* Анкета наследует карточку/поля формы проверки адреса. Её особенности —
   submit на всю ширину, disabled до установки обработчика и локальные ошибки. */
.worker-form .design-button { width: 100%; cursor: pointer; }
.worker-form fieldset:disabled { opacity: .65; }
.worker-form fieldset:disabled .design-button { cursor: not-allowed; }
.worker-form [aria-invalid='true'] { border-color: #b42318; }
.worker-field__error { color: #b42318; font-size: .85rem; }
.worker-form__note { color: var(--air-muted); font-size: .85rem; }
.worker-consent { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.5; cursor: pointer; }
.worker-consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: #0ea5e9; }
.worker-consent input:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px; }
.worker-consent a { color: #0369a1; text-decoration: underline; text-underline-offset: .15em; }

/* Итог проверки доступен скринридеру и не сдвигает содержимое формы. */
.worker-toast { position: fixed; z-index: 95; top: max(90px, calc(env(safe-area-inset-top) + 16px)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); border: 1px solid var(--air-line); border-radius: 8px; padding: 18px 22px; background: #fff; color: var(--design-ink); box-shadow: 0 12px 48px rgb(15 23 42 / .2); font-size: 1rem; line-height: 1.5; }
.worker-landing [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .worker-hero { background-attachment: scroll; }
}