/* ===== Сторінка партнерства: вступний текст і анкета (ТЗ №131) =====

   Поля вводу, підписи, помилки, згода й кнопка беруться з card.css —
   це ті самі класи .order__*, що у формі заявки з карточки товару.
   Тут лише те, чого у формі заявки немає: смисловi групи, позначки
   вибору і коробка, у якій анкета стоїть на сторінці. */

/* ── Вступний текст ────────────────────────────────────────────────────
   Своєї ширини немає навмисно: текст іде від лівого краю спільного
   контейнера сторінки і на всю його ширину — так само, як вступні
   абзаци розділів на /hybrid і /onyx. Вузька колонка була б єдиною
   такою на сайті. */
.partner-intro p + p {
  margin-top: 1em;
}
/* Головна пропозиція сторінки — два перші абзаци цілком жирним.
   Правило одне і стосується тільки їх: щоб повернути звичайне
   накреслення, досить прибрати цей блок — розмітка лишиться як є.
   600, а не 700: цю вагу носять заголовки блоків і підписи полів,
   і суцільний абзац у ній не стає важчим за них. */
.partner-intro__lead {
  font-weight: 600;
}
.partner-list {
  margin-top: 0.6em;
  padding-left: 1.2em;
  list-style: disc;
}
.partner-list li {
  margin-top: 0.35em;
  line-height: 1.55;
}

/* ── Незаповнений блок ───────────────────────────────────────────────────
   Червоний рядок сам по собі не каже, до чого він: над ним блок і під
   ним блок. Тому підсвічуємо сам блок, а рядок помилки фарбуємо тим
   самим тлом і присуваємо впритул — разом вони читаються як одне.

   Колір міняти тут, більше ніде — на нього спирається і заливка блока,
   і заливка рядка помилки.

   Спершу тут стояв #fbeeee — тієї самої щільності, що світло-сірий
   сайту (--bg-gray-light, #f1f1f1), тільки червонуватий. На сторінці
   він виявився майже непомітним, і ось чому: сірий відрізняється від
   білого самою світлотою, а рожевий — насиченістю, і при однаковій із
   сірим світлоті рожевого просто не видно. Тому тут світлота вища за
   сіру, а насиченість — утричі більша, ніж була. */
:root {
  --pform-missing: #fadada;
}
.pform .is-missing {
  background: var(--pform-missing);
  /* Заливка йде від краю до краю картки — так само, як лінії між
     групами, і спирається на те саме число --pform-pad.

     Відʼємні бічні поля рівно на відступ картки і внутрішній відступ
     назад: рамка елемента ширшає, а текст і поля лишаються рівно там,
     де стояли. Бічні поля не схлопуються із сусідніми, тому розкладку
     це не чіпає. */
  margin-inline: calc(-1 * var(--pform-pad));
  padding-inline: var(--pform-pad);
}
/* Повітря зверху й знизу і склейка блока з його повідомленням — тінями.
   Тінь малюється поверх і в розкладці не бере участі, тому відступи
   лишаються рівно тими, що були до підсвічування: ані рядок помилки,
   ані сусідні блоки не рухаються.

   Тим самим прийомом, що й ширину, цього зробити не можна: верхні й
   нижні поля схлопуються з сусідніми, і підсвічування один раз уже
   зсунуло всю анкету — рядок помилки має власний відʼємний відступ
   зверху (.order__error, −8 px), і варто чіпнути нижній відступ блока,
   як повідомлення наїжджає на поле, а все нижче повзе вгору.

   Тіні зміщені й НЕ розтягнуті. Розтягування (spread) однакове з усіх
   чотирьох боків, і 4 px повітря зверху дали б ті самі 4 px збоку —
   уже за краєм картки. Зміщена тінь без розтягування має рівно ту саму
   ширину, що й сам блок, і за край не вилазить.

   4 px — саме повітря. 13 px до сусіда: стільки між блоком і його
   рядком помилки (проміжок 6…12 px). У блока тінь іде вниз, у
   повідомлення вгору, разом вони проміжок закривають і до наступного
   блока не дотягуються — там лишається білий просвіт. */
.pform .order__field.is-missing,
.pform .pform__field.is-missing,
.pform .order__consent.is-missing {
  box-shadow: 0 -4px 0 var(--pform-missing), 0 13px 0 var(--pform-missing);
}
.pform .order__error.is-missing {
  box-shadow: 0 4px 0 var(--pform-missing), 0 -13px 0 var(--pform-missing);
}

/* ── Коробка анкети ──────────────────────────────────────────────────────
   Анкета довга, і на широкому екрані рядок у всю сторінку читався б
   важко. Тримаємо ту саму ширину, що й попап заявки, і ставимо по центру
   смуги — так анкета виглядає окремою справою, а не хвостом тексту. */
.pform__box {
  /* Відступ картки — змінною: на нього спираються і поля самої картки,
     і лінії між групами, які мають іти від краю до краю. Розійтися їм
     не можна, тому число одне. */
  --pform-pad: 28px;
  max-width: 560px;
  margin: 28px auto 0;
  padding: 28px var(--pform-pad) 32px;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(11, 12, 15, 0.45);
}

/* ── Смислова група ──────────────────────────────────────────────────────
   fieldset потрібен не заради рамки (її немає), а заради legend: читалка
   озвучує назву групи перед кожним полем усередині. Тому власні відступи
   й обнулення браузерних — тут. */
.pform__group {
  all: unset;
  display: block;
  /* Відʼємні поля рівно на відступ картки — щоб лінія зверху йшла
     від краю до краю, — і внутрішній відступ назад, щоб самі поля
     лишилися на місці. */
  margin: 26px calc(-1 * var(--pform-pad)) 0;
  padding: 0 var(--pform-pad);
}
.pform__group:first-of-type {
  margin-top: 0;
}
/* Розділювач груп. Та сама лінія, що під заголовком «Оформлення
   замовлення» у вікні заявки (.order__head у card.css): 1px solid #eee.
   Над першою групою її немає — ділити там нема чого.

   Лінія проходить крізь заголовок групи: так само на головній лінія
   проходить крізь роки в блоці «Надійність, яку доводить наш досвід».
   Заголовок на ній сидить, а не стоїть під нею.

   Малює лінію верхня границя fieldset, і це важливо: браузер ставить її
   рівно посередині заголовка сам, однаково на будь-якій ширині. Спроба
   намалювати лінію своїм псевдоелементом на 390 сідала на 6 px вище —
   абсолютний відлік усередині fieldset залежить від того, як браузер
   розклав legend, і повторити його розрахунком не виходить. */
.pform__group:not(:first-of-type) {
  border-top: 1px solid #eee;
  padding-top: 26px;
}
/* Просвіт навколо заголовка і згасання лінії до нього.

   ПРОСВІТ. Границю під заголовком браузер розриває сам, по його коробці:
   чим коробка ширша, тим ширший розрив. Бічні відступи заголовка цей
   розрив і розсувають, а від'ємні поля рівно на них повертають текст
   на місце — коробка ширшає, літери не рухаються.

   ЗГАСАННЯ. У розриві границі немає, гасити нема чого, тому в ньому
   лінію домальовує тло самого заголовка: та сама волосинка в 1 px
   посередині його висоти — на повну силу біля зовнішнього краю, де
   вона стикується з границею, і зведена нанівець до літер. Стик
   непомітний: границя стоїть на тій самій середині заголовка, куди
   background-position ставить і волосинку.

   Згасання лягає точно там, де закінчується текст, — якої б довжини
   він не був і якою б мовою не був набраний.

   16 px просвіту, з яких перші 10 — згасання; далі 6 px чистого
   повітря до літер. */
.pform__group:not(:first-of-type) .pform__legend {
  --pform-legend-gap: 16px;
  --pform-legend-fade: 10px;
  padding-inline: var(--pform-legend-gap);
  margin-inline: calc(-1 * var(--pform-legend-gap));
  /* Прозорий кінець градієнта беремо тим самим кольором, а не
     ключовим словом transparent: воно означає прозорий ЧОРНИЙ,
     і на півдорозі волосинка сіріла б. */
  background-image: linear-gradient(
    to right,
    #eee 0,
    rgba(238, 238, 238, 0) var(--pform-legend-fade),
    rgba(238, 238, 238, 0) calc(100% - var(--pform-legend-fade)),
    #eee 100%
  );
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}
/* Нижній відступ останнього поля групи прибираємо. fieldset — окремий
   контекст форматування, і відступ дитини крізь нього не схлопується
   із відступом того, що йде далі: під останньою групою вони склалися
   б, і галочка згоди стояла б не посередині, а ближче до кнопки.
   У формі заявки полів у fieldset немає, тому там цього не видно. */
.pform__group > :last-child {
  margin-bottom: 0;
}
.pform__legend {
  all: unset;
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 1rem;
}

/* Поле, у якого замість одного рядка вводу — набір позначок.
   Відступ знизу, а не згори, — як у .order__field: тільки так два види
   полів стають в один стовпець із рівними проміжками. Трохи більший за
   чотирнадцять: у поля з позначками нижній край — це текст останнього
   варіанта, і без запасу він злипається з підписом наступного поля. */
.pform__field {
  display: block;
  margin-bottom: 20px;
}

/* Стрілка випадного списку, яку Chrome малює в полі з підказками
   (атрибут list). Такого значка на сайті немає більше ніде, і поле
   через нього виглядало як список вибору, хоча написати в ньому можна
   будь-що.

   Гасимо фарбою, а не display: none: прибирання елемента з розкладки
   могло б зачепити й сам випадний список, а прозорість міняє тільки
   картинку. pointer-events знімаємо, щоб не лишилося невидимої
   натискної плями — натиск потрапляє в саме поле.

   У Firefox цього псевдоелемента немає, правило там ні на що
   не впливає. */
.pform input[list]::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}

/* Коротке пояснення під підписом: чим воно відрізняється від помилки —
   кольором і тим, що видно завжди. */
.pform__hint {
  display: block;
  margin: -2px 0 6px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Позначки вибору ─────────────────────────────────────────────────────
   Стовпцем, а не в рядок: варіанти різної довжини, і в рядку вони
   збиваються в нерівні сходинки. На вузькому екрані стовпець потрібен
   і поготів — у нього влучає палець. */
.pform__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.pform__option {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.45;
  cursor: pointer;
}
.pform__option input {
  margin-top: 3px;
  flex: 0 0 auto;
}
/* Окрема галочка без групи — «Хочу подивитися зразки». Підказка під нею
   стосується самої галочки, тому відступ менший. */
.pform__field--single .pform__hint {
  margin: 6px 0 0 26px;
}

/* ── Екран завершення ────────────────────────────────────────────────────
   Стоїть на місці анкети, тому й висота схожа: інакше сторінка різко
   підскакує вгору саме тієї миті, коли людина чекає підтвердження. */
.pform__thanks {
  max-width: 560px;
  margin: 28px auto 0;
  padding: 48px 28px;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(11, 12, 15, 0.45);
  text-align: center;
}
.pform__thanks[hidden] {
  display: none;
}
.pform__thanks p {
  margin-top: 14px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  /* Картка вужча — разом із нею вужчає і те, на що спираються лінії
     між групами. Одне число, не два. */
  .pform__box {
    --pform-pad: 18px;
  }
  .pform__thanks {
    padding-left: 18px;
    padding-right: 18px;
  }
}