/* RESIN LAB — вікно «Бриф на розробку продукту»: спільні стилі для всіх сторінок (раніше були вбудовані в holovna.html). */
.brief{
  --W: min(94vw, 1100px);
  --u: calc(var(--W) / 45202.22);              /* 1 одиниця макета в px */
  --fs-title: max(20px, calc(1058.58 * var(--u)));
  --fs-label: max(14px, calc(719.67 * var(--u)));   /* −15% від макетних 846.67 од. (20,6px → 17,5px) */
  --fs-input: max(13px, calc(628.13 * var(--u)));
  --fs-hint:  max(12px, calc(565.32 * var(--u)));
  --fs-btn:   max(12px, calc(491.69 * var(--u)));
  /* відстань від низу підпису до верху рядка тексту: збігається з положенням тексту в <input> (поле 2 — еталон), де текст центрується по висоті */
  --text-gap: calc(1146.25 * var(--u) - 1px - .0625 * var(--fs-label) - .65 * var(--fs-input));
  --indent:   calc(2175 * var(--u) - .1 * var(--fs-label)); /* 2175 од. — до контуру гліфа, тому мінус лівий підступ гліфа */

  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow-y: auto; color: #000;
}
.brief:not([open]){ display: none; }
.brief::backdrop{ background: rgba(43,43,42,.5); }
html:has(.brief[open]){ overflow: hidden; scrollbar-gutter: stable; }

.brief__panel{
  position: relative; box-sizing: border-box;
  width: var(--W); margin: 32px auto;
  background: #fff; border: 1px solid #CACACA; border-radius: calc(150 * var(--u)); /* колір фону й рамки — як у мобільній версії (#fff / #CACACA) */
  padding: calc(1623 * var(--u)) calc(2800 * var(--u) - 1px) calc(2100 * var(--u)); /* −1px: компенсація рамки панелі */
}
.brief__title{
  margin: 0 0 calc(1845 * var(--u)); text-align: center;
  font: 600 var(--fs-title)/1 'Unbounded', sans-serif; color: #000;
}
.bf-card{
  box-sizing: border-box; display: flex; flex-direction: column;
  min-height: calc(3472.5 * var(--u));
  background: #fff; border: 1px solid #CACACA; border-radius: calc(150 * var(--u));
  padding: calc(1000 * var(--u) - .875 * var(--fs-label)) calc(1400 * var(--u)) calc(300 * var(--u)) var(--indent);
}
.bf-card + .bf-card{ margin-top: calc(1000 * var(--u)); }
.bf-card--tall{ min-height: calc(6465.39 * var(--u)); } /* 15410.39 − 2×(3472.5 картка + 1000 відступ): з новими пунктами 7 (телефон) і 8 (ім’я) загальна висота панелі не змінилась */

/* пункт 7: телефон — фіксований префікс +380 і рівно 9 цифр */
.bf-phone{
  flex: none; height: calc(1.3 * var(--fs-input)); display: flex; align-items: center; min-height: 0;
  margin: calc(120 * var(--u)) 0 0; padding-left: calc(1.8 * var(--fs-label));
  font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000;
}
.bf-phone__prefix{ flex: 0 0 auto; margin-right: 1ch; user-select: none; }
.bf-phone .bf-input{ margin: 0; padding: 0; height: 100%; align-self: stretch; }
.bf-card.is-invalid{ border-color: #D32F2F; }
.bf-card.is-invalid:focus-within{ border-color: #D32F2F; }   /* поле з помилкою лишається червоним і в фокусі */
/* пункт 6: клік по картці відкриває вибір фото/файлу; список доданих файлів */
[data-brief-dropzone]{ cursor: pointer; }
.bf-files{ display: flex; align-items: center; gap: .6em; margin: calc(300 * var(--u)) 0 0; padding-left: calc(1.8 * var(--fs-label)); font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000; }
.bf-files[hidden]{ display: none; }
.bf-files__names{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-files__clear{ flex: none; width: 1.6em; height: 1.6em; padding: 0; border: 0; background: none; color: #4D4D4D; font: inherit; line-height: 1; cursor: pointer; }
.bf-files__clear:focus-visible{ outline: 2px solid #000; outline-offset: 1px; }
[data-phone-card]{ position: relative; }
/* повідомлення не займає місця в потоці — рядок «+380 …» стоїть на тому ж рівні, що й текст у полях 2–5 */
.bf-error{
  position: absolute; left: calc(var(--indent) + 1.8 * var(--fs-label)); bottom: calc(180 * var(--u));
  margin: 0;
  font: 400 var(--fs-hint)/1.3 'IBM Plex Mono', monospace; color: #D32F2F;
}
/* картка 6: з «@resinkyiv» (на 1 символ довше за макетне «@resinlab») рядок вміщується в один лише при меншому правому відступі */
.bf-card--links{ padding-right: calc(400 * var(--u)); position: relative; }
/* справжній <input type="file"> — видимо прихований через clip, а не display:none (hidden/display:none): на iOS Safari
   програмний .click() по input[type=file] з display:none ненадійно відкриває вибір фото/файлу. */
.bf-file-input{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bf-card:focus-within{ border-color: #000; }

.bf-label{ display: flex; margin: 0; font: 500 var(--fs-label)/1 'IBM Plex Mono', monospace; }
.bf-num{ flex: 0 0 3ch; }

.bf-input{
  flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box;
  margin: calc(120 * var(--u)) 0 0; padding: 0 0 0 calc(1.8 * var(--fs-label));
  border: 0; border-radius: 0; outline: 0; background: transparent; resize: none;
  font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000;
}
/* <input> (поля 2–5, 8): висота = рівно один рядок тексту (lineHeight), інакше в Chrome/Safari текстовий курсор
   центрується в розтягнутому flex-елементі не так, як сам текст, і візуально «з'їжджає» вниз відносно цифр/літер.
   margin-top = --text-gap (а не calc(120*u), як було): той самий відступ, що й у textarea, — позиція тексту не зсувається. */
input.bf-input{ flex: none; height: calc(1.3 * var(--fs-input)); margin-top: var(--text-gap); }
/* textarea (поля 1 і 7) та підказка (поле 6) — на тому ж рівні, що й текст у <input> */
textarea.bf-input{ margin-top: var(--text-gap); margin-bottom: calc(-300 * var(--u)); }
.bf-input::placeholder{ color: #727272; opacity: 1; font-size: var(--fs-hint); }

.bf-hint{
  margin: var(--text-gap) 0 0; padding-left: calc(1.8 * var(--fs-label));
  font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #727272;
}
.bf-plain{ color: inherit; text-decoration: none; }
.bf-link{ color: #0000C4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .09em; }

.brief__thanks{
  margin: calc(1400 * var(--u)) 0 0; text-align: center;
  font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000;
}
.brief__actions{ display: flex; justify-content: center; margin-top: calc(1400 * var(--u)); }
.brief__submit{
  height: max(36px, calc(1550 * var(--u))); min-width: max(150px, calc(7052.9 * var(--u)));
  padding: 0 24px; border: 0; border-radius: 999px; background: #FFEE00; color: #000;
  font: 500 var(--fs-btn)/1 'IBM Plex Mono', monospace; cursor: pointer;
}
/* ховер: уніфіковано з жовтими кнопками сторінки (#F2DF00, дефект №7) */
.brief__submit:hover{ background: #F2DF00; }
.brief__submit:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }
.brief__close{ display: none; }

/* fade 150 мс (вимикається при prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .brief[open]{ animation: brief-fade .15s ease-out; }
  .brief[open]::backdrop{ animation: brief-fade .15s ease-out; }
}
@keyframes brief-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* T5: iOS/iPadOS зумить сторінку при фокусі в поле < 16px. Лише сенсорні пристрої — десктоп (миша) не змінюється.
   Поля «Підібрати мерч під бюджет» (#qp-people, #qp-budget) тут НЕ чіпаємо: це частина мобільної розкладки (див. MOBILE_PLAN.md). */
@media (pointer: coarse){
  .bf-input, .bf-phone{ font-size: 16px; }
}

/* T6: видима кнопка закриття брифу на сенсорних пристроях ширше за 720px (планшети, телефон у ландшафті).
   ≤720px кнопка вже є (блок вище) — його не перекриваємо. Вигляд кнопки запропонований, потребує погодження дизайну (OWNER_QUESTIONS.md).
   Нульова висота в потоці (margin-bottom:-44px), щоб не зсувати макет панелі. */
@media (hover: none) and (pointer: coarse) and (min-width: 721px){
  .brief__close{
    display: flex; align-items: center; justify-content: center;
    position: -webkit-sticky; position: sticky; top: 8px; margin: 0 0 -44px auto; width: 44px; height: 44px;
    border-radius: 50%; background: #DADADB; color: #000;
    font: 500 22px/1 'IBM Plex Mono', monospace; border: 0; padding: 0; z-index: 2; cursor: pointer;
  }
  .brief__close:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }
}

/* хрестик закриття у верхньому правому куті панелі — десктоп (як на мобільному: дві тонкі лінії 1px) */
@media (min-width: 1024px){
  .brief .brief__panel .brief__close{
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; left: auto; margin: 0; z-index: 2;
    width: 56px; height: 56px; padding: 0; border: 0; border-radius: 0; background: none;
    color: #4D4D4D; font-size: 0; line-height: 0; cursor: pointer;
  }
  .brief .brief__panel .brief__close::before, .brief .brief__panel .brief__close::after{
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .brief .brief__panel .brief__close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
  .brief .brief__panel .brief__close:hover{ color: #000; }
  .brief .brief__panel .brief__close:focus-visible{ outline: 2px solid #000; outline-offset: -6px; }
}

/* мобільні тексти підписів (макет «вспливаюче вікно») — на десктопі приховані */
.bf-lm{ display: none; }

/* ---------- МОБІЛЬНА ВЕРСІЯ БРИФУ (≤1023.98px) — 1:1 з макета «вспливаюче вікно» (390 × 1234,4) ----------
   Одиниця --bu = 1 px макета: пропорційно на 320–430, далі (до 1023) — колонка як на 430, по центру.
   Усі розміри нижче — з SVG/PDF (контури тексту виміряно); десктоп (≥1024px) цим блоком не зачіпається.
   Розмітка, id, name, data-* і скрипт спільні з десктопом — функціональність та сама. */
@media (max-width: 1023.98px){
  .brief{
    --bu: var(--pop-u, calc(min(100vw, 430px) / 390));
    --fs-title: calc(13.33 * var(--bu));
    --fs-label: calc(8.7 * var(--bu));
    --fs-input: calc(14.67 * var(--bu));
    --fs-hint:  calc(10.5 * var(--bu));
    --fs-btn:   calc(9.67 * var(--bu));
    --m-ink: #4D4D4D;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .brief .brief__panel{
    box-sizing: border-box; position: relative;
    width: calc(326.52 * var(--bu));
    margin: max(32px, env(safe-area-inset-top, 0px)) auto max(32px, env(safe-area-inset-bottom, 0px));
    background: #fff; border: calc(.9 * var(--bu)) solid #CACACA; border-radius: calc(3.78 * var(--bu));
    padding: calc(13.81 * var(--bu)) calc(8.83 * var(--bu)) calc(26.49 * var(--bu));
    min-height: 0;
  }
  .brief .brief__title{
    margin: 0 0 calc(16.11 * var(--bu)); text-align: center;
    font: 600 var(--fs-title)/1 'Unbounded', sans-serif; color: var(--m-ink);
  }

  /* картки полів */
  .brief .bf-card, .brief .bf-card--links{
    box-sizing: border-box; display: flex; flex-direction: column;
    min-height: calc(53.81 * var(--bu));
    background: #fff; border: calc(.9 * var(--bu)) solid #CACACA; border-radius: calc(3.78 * var(--bu));
    padding: calc(7.46 * var(--bu)) calc(8.22 * var(--bu)) 0;
  }
  .brief .bf-card + .bf-card{ margin-top: calc(14.22 * var(--bu)); }
  .brief .bf-card[data-phone-card]{ margin-top: calc(15.61 * var(--bu)); }
  .brief .bf-card--tall{ min-height: calc(227.94 * var(--bu)); padding-bottom: calc(8 * var(--bu)); } /* 295.97 − (53.81 + 14.22): нове поле «ВАШЕ ІМ'Я» не збільшує висоту панелі */
  /* як на десктопі: чорна рамка у фокусі, червона — при помилці */
  .brief .bf-card:focus-within{ border-color: #000; }
  .brief .bf-card.is-invalid, .brief .bf-card.is-invalid:focus-within{ border-color: #D32F2F; }

  /* підписи: у макеті — без нумерації, великими літерами, із зірочкою */
  .brief .bf-label{ display: block; margin: 0; font: 400 var(--fs-label)/1 'IBM Plex Mono', monospace; color: var(--m-ink); }
  /* зірочка й апостроф у макеті дрібніші й підняті (як у Corel-макеті): окремі клітинки по центру моноширинної сітки */
  .brief .bf-st{ display: inline-block; width: calc(.6em / .8); text-align: center; font-size: .8em; font-weight: 600; line-height: 1; position: relative; top: -.30em; }
  .brief .bf-ap{ display: inline-block; width: calc(.6em / .47); text-align: center; font-size: .47em; line-height: 1; position: relative; top: -.66em; }
  .brief .bf-num, .brief .bf-lt{ display: none; }
  .brief .bf-lm{ display: inline; }

  /* текст, який вводить клієнт: перший рядок на тому ж рівні, що й «+380 xxxxxxxxx» у макеті */
  .brief .bf-input, .brief textarea.bf-input{
    --in-top: calc(38.89 * var(--bu) - 1.025 * var(--fs-input) - 16.16 * var(--bu));
    margin: var(--in-top) 0 0; padding: 0; color: #000;
    font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace;
  }
  .brief input.bf-input{ flex: none; height: calc(1.3 * var(--fs-input)); }
  .brief textarea.bf-input{ flex: 1 1 0; min-height: 0; height: auto; margin-bottom: 0; resize: none; }
  /* у макеті полів порожні: підказку в textarea не показуємо */
  .brief textarea.bf-input::placeholder{ color: transparent; }

  /* телефон: «+380 xxxxxxxxx» чорним, як у макеті */
  .brief .bf-phone{
    flex: none; display: flex; align-items: center; min-height: 0;
    height: calc(1.3 * var(--fs-input)); margin: calc(38.89 * var(--bu) - 1.025 * var(--fs-input) - 16.16 * var(--bu)) 0 0;
    padding-left: calc(.75 * var(--bu));
    font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000;
  }
  .brief .bf-phone .bf-input{ flex: 1 1 auto; width: auto; min-width: 0; margin: 0; height: 100%; align-self: stretch; }
  .brief .bf-phone .bf-input::placeholder{ color: #000; opacity: 1; font-size: inherit; text-transform: lowercase; }

  /* підказка «Telegram / e-mail» у мобільній версії прибрана (рішення власника) */
  .brief .bf-hint{ display: none; }
  /* список доданих файлів — у тому самому рядку, що й текст у полях */
  .brief .bf-files{
    flex: none; height: calc(1.3 * var(--fs-input)); margin: calc(38.89 * var(--bu) - 1.025 * var(--fs-input) - 16.16 * var(--bu)) 0 0; padding: 0;
    font: 400 var(--fs-input)/1.3 'IBM Plex Mono', monospace; color: #000;
  }
  .brief .bf-files[hidden]{ display: none; }
  .brief .bf-files__clear{ width: 32px; height: 32px; margin: -6px -8px -6px 0; font-size: 18px; }

  /* помилка телефону: у нормальному стані місця не займає; картка росте лише при помилці */
  .brief .bf-error{
    position: static; margin: calc(2 * var(--bu)) 0 calc(6 * var(--bu)) calc(.75 * var(--bu));
    font: 400 var(--fs-hint)/1.3 'IBM Plex Mono', monospace; color: #D32F2F;
  }

  .brief .brief__thanks{
    margin: calc(12.16 * var(--bu)) 0 0; text-align: center;
    font: 400 calc(11.33 * var(--bu))/1.3 'IBM Plex Mono', monospace; color: var(--m-ink);
  }
  .brief .brief__actions{ margin-top: calc(13.35 * var(--bu)); display: flex; justify-content: center; }
  .brief .brief__submit{
    display: flex; align-items: center; justify-content: center;
    width: calc(127.786 * var(--bu)); min-width: 0; height: calc(31.226 * var(--bu)); padding: 0;
    border: 0; border-radius: 999px; background: #FFEE00; color: #2B2B2A;
    font: 500 var(--fs-btn)/1 'IBM Plex Mono', monospace; letter-spacing: .0897em;
  }
  .brief .brief__submit .btx{ padding-left: .0897em; }   /* компенсує хвостовий letter-spacing: текст по центру */
  .brief .brief__submit:hover{ background: #F2DF00; }

  /* хрестик закриття (в макеті його немає; залишено за погодженням, малий, у куті панелі) */
  .brief .brief__panel .brief__close{
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; left: auto; margin: 0; z-index: 2;
    width: calc(40 * var(--bu)); height: calc(40 * var(--bu)); padding: 0; border: 0; border-radius: 0; background: none;
    color: var(--m-ink); font-size: 0; line-height: 0; cursor: pointer;   /* хрестик малюється двома лініями 1px (вдвічі менший і тонший) */
  }
  .brief .brief__panel .brief__close::before, .brief .brief__panel .brief__close::after{
    content: ""; position: absolute; left: 50%; top: 50%; width: calc(8 * var(--bu)); height: 1px; background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .brief .brief__panel .brief__close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
  .brief .brief__panel .brief__close:focus-visible{ outline: 2px solid #000; outline-offset: -4px; }
}
/* iOS зумить сторінку при фокусі в поле < 16px: на сенсорних пристроях текст, що вводить клієнт, лишається 16px */
@media (max-width: 1023.98px) and (pointer: coarse){
  .brief{ --fs-input: max(16px, calc(14.67 * var(--bu))); }
}