/* Кадры будущего. Страница заявки: раскладка, карточки, форма, экран успеха.
   Общее (шрифты, токены, база, шапка, футер, кнопки) в main.css, подключать его первым.
   Источник: unz/Kadry Budushchego Apply Form.dc.html (токены: spec/design_tokens.css). */

/* ---------- Раскладка страницы ---------- */
.apply-page {
  max-width: var(--container); margin: 0 auto;
  padding: 28px var(--gutter) 60px;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
  gap: 16px; align-items: start;
}
.aside {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 96px;
}

.card { border-radius: var(--r-card); }
.card--dark {
  position: relative; overflow: hidden;
  background: var(--c-ink); color: #fff;
  padding: 36px; min-height: 420px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.card--dark .watermark {
  position: absolute; right: -150px; bottom: -130px;
  width: 420px; height: 386px; fill: rgba(255,255,255,.06); pointer-events: none;
}
.badge {
  position: relative; align-self: flex-start;
  font-weight: 700; font-size: 14px; line-height: 1.2; color: #fff;
  background: var(--grad-brand); border-radius: 999px; padding: 9px 16px;
}
.aside__text { position: relative; }
.h1 {
  font-weight: 700; font-size: clamp(40px, 4.4vw, 60px); line-height: .92;
  letter-spacing: -2px; color: #fff;
}
.lead {
  font-weight: 300; font-size: 18px; line-height: 1.4; color: var(--c-pink-text);
  margin-top: 18px;
}

.card--white { background: var(--c-surface); padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.kicker { font-weight: 400; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-muted); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 12px; align-items: center; font-size: 16px; line-height: 1.3; }
.step__n {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.card--pink {
  background: var(--c-surface-pink); padding: 24px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.free__title { font-weight: 700; font-size: 22px; line-height: 1; }
.free__text { font-size: 14px; line-height: 1.35; color: var(--c-text-soft); margin-top: 6px; }
.card--pink svg { width: 40px; height: 37px; fill: var(--c-magenta-2); flex: none; }

/* ---------- Форма ---------- */
.form-card {
  background: var(--c-surface); border-radius: var(--r-card);
  padding: var(--pad-card);
  display: flex; flex-direction: column; gap: 32px;
}
.form-card[hidden] { display: none; }
.block { display: flex; flex-direction: column; gap: 14px; }
.block__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.block__title-wrap { display: flex; align-items: baseline; gap: 12px; }
.block__num { font-weight: 700; font-size: 26px; line-height: 1; }
.block__title { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.5px; }
.block__hint { font-weight: 400; font-size: 13px; color: var(--c-text-muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2--mt { margin-top: 6px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-weight: 400; font-size: 13px; color: var(--c-text-muted); padding-left: 6px; }
legend.field__label { margin-bottom: 0; }  /* S2-FIX #1: плавающий legend участвует в gap колонки, доп. отступ не нужен */

.input, .textarea, .select {
  border: 0; border-radius: var(--r-field); background: var(--c-bg);
  padding: 16px 18px; font-size: 17px; line-height: 1.25; color: var(--c-ink);
  width: 100%; outline: none; transition: box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.textarea { line-height: 1.45; resize: vertical; min-height: 148px; display: block; }
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 24px) 26px, calc(100% - 18px) 26px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 44px; cursor: pointer;
}
.select.is-empty { color: var(--c-placeholder); }
.select option { color: var(--c-ink); }
.is-invalid { box-shadow: var(--ring-error); }
.input:focus, .textarea:focus, .select:focus { box-shadow: var(--ring-focus); }

.parent-box {
  margin-top: 10px; background: var(--c-surface-pink); border-radius: var(--r-box);
  padding: 18px 20px 20px;
}
.parent-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.parent-box__title { font-weight: 700; font-size: 16px; }
.parent-box .grid2 { margin-top: 12px; }
.parent-box .input { background: var(--c-surface); }
.field--wide { grid-column: 1 / -1; }  /* email родителя: третье поле в сетке 2 колонки, на всю ширину, чтобы не было пустой ячейки */

/* Сегмент-контрол (возраст, класс) */
.seg {
  display: flex; background: var(--c-bg); border-radius: var(--r-field);
  padding: 4px; gap: 4px; transition: box-shadow .15s ease;
}
.seg__label {
  flex: 1; height: 48px; border-radius: var(--r-seg);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 400; color: var(--c-ink);
  cursor: pointer; transition: var(--t-fast); user-select: none; white-space: nowrap;
}
.seg__label--wide { flex: 1.6; font-size: 15px; }
.seg__label:hover { color: var(--c-magenta-2); }
.seg input:checked + .seg__label { background: var(--c-surface); color: var(--c-magenta-2); font-weight: 700; box-shadow: var(--shadow-segment); }
.seg input:focus-visible + .seg__label { box-shadow: var(--ring-focus); }
.seg input:checked:focus-visible + .seg__label { box-shadow: var(--shadow-segment), var(--ring-focus); }

/* Чипы (направления, организация) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--c-ink);
  background: var(--c-bg); border-radius: 999px; padding: 12px 20px;
  cursor: pointer; transition: var(--t-fast); user-select: none;
}
.chip:hover { color: var(--c-magenta-2); }
.chips input:checked + .chip { background: var(--grad-brand); color: #fff; font-weight: 700; }
.chips input:focus-visible + .chip { box-shadow: var(--ring-focus); }
.chips.is-invalid { box-shadow: none; }
/* S2-FIX #22: текст ошибки виден под полем (раньше был визуально скрыт) */
.field-error { font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--c-magenta-2); padding-left: 6px; }
.field-error[hidden] { display: none; }
.q .field-error { flex-basis: 100%; padding-left: 0; }
.final .field-error { margin-top: -6px; padding-left: 40px; }
#org_text[hidden] { display: none; }

/* Готовность: строки-вопросы */
.qlist { display: flex; flex-direction: column; gap: 10px; }
.q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--c-bg); border-radius: var(--r-row); padding: 16px 18px;
  transition: box-shadow .15s ease;
}
.q__text { min-width: 0; flex: 1; }
.q__title { font-weight: 700; font-size: 16px; line-height: 1.25; }
.q__hint { font-weight: 400; font-size: 13px; color: var(--c-text-muted); margin-top: 3px; }
.q__seg { display: flex; gap: 4px; background: var(--c-surface); border-radius: 999px; padding: 4px; flex: none; }
.q__label {
  font-weight: 400; font-size: 14px; line-height: 1.2; color: var(--c-ink);
  background: transparent; border-radius: 999px; padding: 9px 16px;
  cursor: pointer; transition: var(--t-fast); user-select: none; white-space: nowrap;
}
.q__label:hover { color: var(--c-magenta-2); }
.q__seg input:checked + .q__label { background: var(--grad-brand); color: #fff; font-weight: 700; }
.q__seg input:focus-visible + .q__label { box-shadow: var(--ring-focus); }

/* S2-FIX #30: заголовок блока внутри legend (fieldset 02, 03) */
legend.block__head { display: flex; }
legend .block__title-wrap { display: flex; }
legend .block__hint { display: block; }

/* Согласие и отправка */
.final {
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--c-divider); padding-top: 26px;
}
.consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check {
  width: 28px; height: 28px; border-radius: var(--r-check); flex: none;
  background: var(--c-bg); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t-fast);
}
.check::after { content: ""; }
#consent:checked + .consent .check { background: var(--grad-brand); }
#consent:checked + .consent .check::after { content: "\2713"; }
#consent:focus-visible + .consent .check { box-shadow: var(--ring-focus); }
.check.is-invalid { box-shadow: var(--ring-error); }
.consent__text { font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--c-text-soft); }
.consent__text a { color: var(--c-magenta-2); text-decoration: underline; text-decoration-color: rgba(204,14,129,.35); text-underline-offset: 2px; }
.consent__text a:hover { color: var(--c-magenta-hover); }

.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.btn-submit {
  border: 0; font-weight: 700; font-size: 18px; line-height: 1.2; color: #fff;
  background: var(--grad-brand); border-radius: 999px; padding: 18px 32px;
  transition: filter .2s ease, opacity .2s ease; white-space: nowrap;
}
.btn-submit:hover { filter: brightness(1.06); }
.btn-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(204,14,129,.45); }
.btn-submit[disabled] { opacity: .6; cursor: progress; filter: none; }
.form-msg { font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--c-magenta-2); }
.form-msg:empty { display: none; }
.form-msg a { color: inherit; text-decoration: underline; }
.btn-reload {
  border: 0; background: var(--c-bg); color: var(--c-ink); font-size: 14px;
  border-radius: 999px; padding: 8px 14px; margin-left: 8px; transition: var(--t-fast);
}
.btn-reload:hover { background: var(--c-surface-pink); }

/* Honeypot: вне экрана, но не display:none */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ---------- Экран успеха ---------- */
.success {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  background: var(--grad-brand); color: #fff;
  padding: 44px; min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.success[hidden] { display: none; }
.success .watermark {
  position: absolute; right: -180px; top: -160px;
  width: 520px; height: 477px; fill: rgba(255,255,255,.16); pointer-events: none;
}
.success__tile {
  position: relative; width: 64px; height: 64px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.success__tile svg { width: 30px; height: 28px; fill: url(#gD); }
.success__body { position: relative; }
.success__title {
  font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: .92; letter-spacing: -2px; color: #fff;
  overflow-wrap: anywhere;
}
.success__text { font-weight: 300; font-size: 20px; line-height: 1.4; color: #fff; margin-top: 18px; max-width: 560px; overflow-wrap: anywhere; }
.success__actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.success__actions .btn { white-space: nowrap; }

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .apply-page { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .card--dark { min-height: 360px; }
}
@media (max-width: 767px) {
  .apply-page { padding-top: 16px; padding-bottom: 40px; }
  .card--dark { padding: 28px 24px; min-height: 320px; }
  .card--dark .watermark { width: 300px; height: 275px; right: -110px; bottom: -100px; }
  .h1 { letter-spacing: -1.5px; }
  .card--white { padding: 24px; }
  .card--pink { padding: 22px 24px; }
  .grid2 { grid-template-columns: 1fr; }
  .parent-box { padding: 16px 16px 18px; }
  .block__title { font-size: 22px; }
  .seg__label { font-size: 16px; }
  .seg__label--wide { font-size: 14px; }
  .q { flex-direction: column; align-items: stretch; gap: 12px; }
  .q__seg { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .q__label { text-align: center; padding: 12px 8px; }  /* S2-FIX #3 */
  .submit-row { flex-direction: column; align-items: stretch; }
  .btn-submit { width: 100%; }
  .form-msg { text-align: center; }
  .success { padding: 28px 24px; min-height: 420px; }
  .success .watermark { width: 360px; height: 330px; right: -140px; top: -120px; }
  .success__title { letter-spacing: -1.5px; }
  .success__text { font-size: 18px; }
  .success__actions a { flex: 1; text-align: center; }
}