/* ============================================================
   1. ТОКЕНИ
   ============================================================ */
:root{
  --brand:#5b0c88;          /* фірмовий фіолет (мета, теги) */
  --btn:#7a4a9e;            /* фіолет кнопки з макета */
  --btn-hover:#6d3f90;
  --ink:#2f0a47;            /* заголовки */
  --muted:#77688a;          /* дрібний текст */

  --paper:#ffffff;
  --bg:#faf9fd;
  --line:#ece7f3;

  --butter:#faf1ad;         /* жовта заливка: таб і чипи (з макета) */
  --butter-line:#fbe990;    /* обводка чипа мови (з макета) */
  --accent:#ffd23f;         /* «зовсім скоро» — тиснемо кольором */

  --lav:#ece8ff;            /* плашка року */
  --lav-line:#ded6ff;
  --lav-soft:#efecf6;       /* кнопка завершеного заходу */

  --live:#d9482a;
  --ok:#1c8f61;
  --warn:#b3720d;
  --done:#9a92a6;

  /* Розміри чипів — з макета: висота 28.1px, ряд стоїть ПІД
     обкладинкою з відступом ~20px і займає всю ширину картки.
     Радіус обкладинки 28px повторює те саме «28», що фігурує
     в кутах самих чипів. */
  --chip-h:32px;
  --chip-r:14px;      /* половина висоти — «пігулкові» кути.
                         Не 99px: сума радіусів по стороні не може
                         перевищувати її довжину, інакше браузер
                         пропорційно ужимає ВСІ кути чипа — і схил
                         зникає */
  --chip-slope:20px;  /* «схил» крайніх чипів: еліпс 32px по горизонталі… */
  --chip-slope-v:24px;/* …на 24px із 28 по вертикалі — зверху лишається
                         короткий прямий відрізок, як у референсі */
  --chip-gap:20px;    /* відступ ряду чипів від низу обкладинки */
  --r-cover:28px;
  --r-tab:14px;
  --r-pill:999px;     /* тільки для кнопки */

  --ui:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Lora','PT Serif', Georgia, 'Times New Roman', serif;
}


/* Назва сторінки — той самий прийом, що в назвах секцій на сторінці
   майстер-класу (.ttl у mk-vaktsynatsiya.html): жирне слово капсом,
   а поверх його верхнього краю — рукописна підводка, зсунута вліво
   і трохи повернута. Скрипт лежить абсолютно, тому назві потрібен
   padding-top під нього. */
.ttl{
  position:relative;display:inline-block;
  /* підйом підводки — змінною --lift на заголовку (як на сторінці
     заходу); «усі заходи» без хвостиків, тож тут вистачає .2em */
  --lift:.2em;          /* «усі заходи»: «у» має хвостик — тримаємо зазор */
  margin:0;padding:0;   /* підводка — блок у потоці над словом, не absolute: перетин неможливий */
  font-size:clamp(36px,5.2vw,66px);line-height:1;font-weight:800;
  letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink);
}
.ttl__script{
  display:block;position:static;width:max-content;
  margin:0 0 calc(-.2em + var(--lift)) -.18em;   /* як на сторінці заходу */
  transform-origin:left bottom;
  font-family:'Marck Script','Segoe Script',cursive;font-weight:400;font-size:.92em;
  line-height:1;letter-spacing:0;text-transform:none;
  color:var(--brand);
  rotate:-6deg;
  white-space:nowrap;pointer-events:none;
}
/* Шапка сторінки (за референсом): рядок .page__title — назва
   «усі заходи / АРХІВ БПР» і праворуч великий банер «Первинка · БПР»
   (2133×965), вирівняні по центру одне одного. Сама шапка — блок
   шириною за вмістом (fit-content), центрований margin:auto, тому опис
   під рядком починається від лівого краю назви і переноситься по
   ширині рядка, а не сторінки. Щоб довгий опис не розтягував шапку,
   він не бере участі у визначенні її ширини (width:0;min-width:100%).
   Тимчасова примітка «Демо-дані» йде під описом і на банер не впливає.
   На вузьких екранах (≤780px) шапка на всю ширину, рядок стає
   стовпчиком: назва, під нею банер, далі опис. */
.page__head{width:fit-content;max-width:100%;margin:0 auto 40px}
.page__title{
  display:flex;align-items:flex-end;   /* низ назви — по нижньому краю банера */
  gap:clamp(32px,6vw,90px);
}
/* Низ блоку назви — це низ рядка з line-height:1, а не низ літер: у
   Montserrat (ascender 968 / descender 251 на 1000) базова лінія стоїть
   на ~.14em вище низу рядка. Компенсуємо translate, щоб саме літери
   «АРХІВ БПР» стали на нижню межу зображення. translate не впливає на
   висоту рядка, тому опис під ним не зсувається. */
.page__title .ttl{translate:0 .14em}
.page__banner{
  display:block;flex:0 0 auto;
  width:clamp(280px,32vw,440px);height:auto;
}
.page__head p{
  width:0;min-width:100%;   /* ширину шапки задає рядок назви, не опис */
  margin:24px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55;
}
.page__note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:8px 15px;
  background:#fdf7d9;border:1px solid var(--butter-line);
  border-radius:var(--r-pill);
  font-size:12.5px;color:var(--ink);
}

.grid{
  display:grid;
  /* Три в ряд. Не auto-fill: на широкому екрані він дав би четверту
     колонку. Ряд чипів у макеті займає 322px при картці ~356px —
     тому нижче 356px на картку переходимо на дві колонки, інакше
     чипи почнуть переноситись. */
  grid-template-columns:repeat(3,1fr);
  /* row-gap:0 — обов'язково: картки лежать на subgrid, і вертикальний
     зазор сітки ліг би між УСІМА вісьмома рядами кожної картки.
     Відстань між рядами карток дає margin-bottom у .bpr__actions. */
  gap:0 30px;
  align-items:stretch;
}

/* ============================================================
   3. КАРТКА
   ============================================================ */
.bpr{
  position:relative;              /* база для розтягнутого посилання заголовка */
  /* Картка — не flex-стовпчик, а сітка на СПІЛЬНИХ рядах сітки
     архіву (subgrid): таб, обкладинка, чипи, мета, назва, лектори,
     статус, кнопка — 8 рядів. Висота кожного ряду = найвищий у
     сусідів, тому назва на два рядки в одній картці не зсуває
     лекторів і статус у решті — усе стоїть рівно одне навпроти
     одного. .bpr__body для цього display:contents. Без підтримки
     subgrid картка просто стає звичайною сіткою — як і було. */
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 8;
  min-width:0;
}

/* --- 3.1 Таб зворотного відліку -----------------------------
   Окремий елемент над обкладинкою: підпірнає під неї негативним
   margin, тому нижні 18px просто ховаються за білим боксом.

   Ширину всім табам сітки вирівнює JS (equalizeTabs) — по
   найдовшому. Інакше «до початку: 18д 16г…», «йде просто зараз»
   і «завершено 3–5 серпня» дають три різні язички, а сам відлік
   ще й смикає ширину, коли 10д стає 9д.
   ------------------------------------------------------------ */
.bpr__tab{
  justify-self:start;align-self:end;
  max-width:calc(100% - var(--r-cover) - 8px);
  /* лівий край таба збігається з точкою, де дуга кутка обкладинки
     переходить у пряму, — язичок «виростає» з рівної частини краю */
  margin:0 0 -18px var(--r-cover);
  padding:9px 16px 24px;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;
  /* Заливку мають лише «гарячі» стани (скоро / зараз). Спокійні —
     самі обводкою, щоб у сітці горіли тільки ті картки, де треба
     діяти. Обводка є в усіх станів (у залитих — кольору заливки),
     інакше висота й ширина табів різнилися б на 3px і вирівнювання
     по найдовшому поїхало б. */
  background:transparent;
  border:1.5px solid var(--butter-line);
  border-radius:var(--r-tab) var(--r-tab) 0 0;
  font-size:13px;font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.bpr__tab-label{font-weight:500}
.bpr__tab-time{
  font-variant-numeric:tabular-nums;   /* цифри не «стрибають» щосекунди */
  letter-spacing:.01em;
}
.bpr__tab .ico{width:16px;height:16px;opacity:.85}

.bpr__tab--soon{background:var(--accent);border-color:var(--accent)}
.bpr__tab--live{background:var(--live);border-color:var(--live);color:#fff}
.bpr__tab--past{border-color:#e4dfea;color:var(--done)}

/* мітка «прямий ефір»: скруглений прямокутник, що сяє */
.bpr__dot{
  width:13px;height:7px;flex:none;
  border-radius:3px;
  background:#fff;
  box-shadow:0 0 7px rgba(255,255,255,.8), 0 0 15px rgba(255,255,255,.45);
  animation:beacon 1.9s ease-in-out infinite;
}
@keyframes beacon{
  0%,100%{box-shadow:0 0 5px rgba(255,255,255,.65), 0 0 12px rgba(255,255,255,.3)}
  50%    {box-shadow:0 0 11px rgba(255,255,255,1),  0 0 24px rgba(255,255,255,.65)}
}

/* --- 3.2 Обкладинка ---------------------------------------- */
.bpr__cover{
  position:relative;
  z-index:1;                      /* перекриває низ таба */
  aspect-ratio:1.08;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-cover);
  box-shadow:0 8px 22px rgba(47,10,71,.05);
  overflow:hidden;
}
.bpr__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bpr--past .bpr__img{filter:grayscale(.5) contrast(.97)}

/* заглушка, коли обкладинки немає — просто білий бокс із блідим значком */
.bpr__ph{position:absolute;inset:0;display:grid;place-items:center}
.bpr__ph svg{
  width:34%;height:34%;
  fill:none;stroke:#e6dff2;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --- 3.3 Чипи ----------------------------------------------
   Окремий ряд ПІД обкладинкою (не поверх фото): у макеті між білим
   боксом і мета-рядком. Бали і тривалість залиті жовтим, мова —
   біла з жовтою обводкою. Порядок = порядок важливості для лікаря:
   скільки балів → скільки часу забере → якою мовою.

   Розкладка теж із макета:
   • чипи балів і тривалості мають РІВНУ ширину — у макеті обидва
     116.87px. Це не збіг: 116.87×2 + 76.46 (мова) + зазори = 322.05,
     тобто рядок рівно заповнює ширину. Тому в них flex:1 1 0 —
     ділять вільне місце порівну, — а чип мови лишається по контенту;
   • кути асиметричні: у крайніх чипів зовнішній верхній кут прямий,
     а під ним — виражений еліптичний «схил» (32×24px); правий чип —
     дзеркало лівого, середній — повна
     пігулка. Так три чипи читаються як одна стрічка;
   • рядок НЕ переноситься (flex-wrap:nowrap): три чипи завжди в один
     ряд, навіть якщо мов дві («UKR/ENG»). Щоб на вузьких екранах
     вони таки влізли, нижче 420px відступи, шрифт і зазор чипів
     стискаються пропорційно ширині екрана (clamp від vw).
   ------------------------------------------------------------ */
.bpr__chips{
  margin:var(--chip-gap) 0 0;
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:6px;
}
.chip{
  flex:1 1 0;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  /* Відступи тісні навмисно. Чипи балів і тривалості мають flex:1 1 0,
     тобто однаково розтягуються на всю ширину ряду — padding у них
     працює лише як мінімум, коли текст найдовший («12 Балів БПР» +
     «триває 3 години» + «UKR/ENG»). Тому вільне місце віддаємо
     шрифту: 12.5px замість 11px, а поля обабіч тексту зрізаємо. */
  height:var(--chip-h);padding:0 7px;
  background:var(--butter);
  border:0;
  font-size:12.5px;line-height:15px;font-weight:500;
  color:#000;
  white-space:nowrap;
}
.chip--score{
  /* лівий верхній — прямий, лівий нижній — довгий «схил»
     (еліпс 32×24), решта — півкола пігулки */
  border-radius:0 var(--chip-r) var(--chip-r) var(--chip-slope) / 0 var(--chip-r) var(--chip-r) var(--chip-slope-v);
}
.chip--dur{border-radius:99px;text-transform:lowercase}
.chip--plain{
  flex:0 0 auto;                 /* мова — по контенту, не тягнеться */
  padding:0 12px;
  background:var(--paper);
  border:1px solid var(--butter-line);
  border-radius:var(--chip-r) 0 var(--chip-slope) var(--chip-r) / var(--chip-r) 0 var(--chip-slope-v) var(--chip-r);   /* дзеркало чипа балів */
  text-transform:uppercase;
}
.chip .ico{width:15px;height:15px;stroke-width:1.6;opacity:1}

/* --- 3.4 Тіло під обкладинкою ------------------------------ */
.bpr__body{display:contents}   /* діти стають рядами картки-сітки */

.bpr__meta{
  position:relative;              /* база для підказки з посадами */
  /* два стовпчики, вирівняні по низу: ліворуч дата + рік під нею,
     праворуч «для кого» + число під ним */
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:12px;
  margin:26px 4px 0;
  font-size:13.5px;color:var(--muted);
}
/* календарик на два рядки ліворуч, праворуч від нього — дата, під
   нею рік простим текстом (без плашки) */
.bpr__date{
  display:flex;align-items:center;gap:9px;
  /* дата не переноситься на другий рядок: якщо не влазить — блок
     стискається (min-width:0) і обрізає текст. overflow тут, а не на
     .bpr__meta, бо там живе підказка з посадами — її б теж обрізало */
  flex:0 1 auto;min-width:0;
}
.bpr__date .ico{width:26px;height:26px;opacity:.8;stroke-width:1.5}
.bpr__date-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bpr__date time{
  font-size:15.5px;font-weight:600;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bpr__year{font-size:13px;font-weight:600;line-height:1.25;color:var(--muted)}

/* --- 3.4a Посади лікарів ------------------------------------
   У ПРАВОМУ краю мета-рядка (margin-left:auto відсуває від дати) —
   «число + i» без плашки: ні заливки, ні обводки, щоб мета-рядок
   лишався одним спокійним рядком, а не двома блоками. За наведенням
   (або фокусом з клавіатури) під ним випадає темна підказка зі
   списком посад, для яких зараховується цей БПР. Тригер — справжня
   <button>: фокусується Tab-ом, читається скрінрідером через
   aria-describedby. z-index:2 — щоб він був НАД розтягнутим
   посиланням заголовка, інакше hover до нього не доходить.
   Підказка позиціонується від мета-рядка (а не від кнопки) і не
   ширша за картку — тож на вузькому екрані не вилазить за край.
   ------------------------------------------------------------ */
.bpr__spec{flex:none;display:inline-flex;margin-left:auto}   /* без position — інакше стане базою підказки */
.bpr__spec-btn{
  position:relative;z-index:2;
  /* стовпчик: «для кого» зверху, число з іконкою під ним, обидва
     притиснуті до правого краю картки */
  display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;
  /* padding по горизонталі — 0: без плашки число має стояти рівно
     по правому краю картки, в одну лінію із заголовком і лектором */
  margin:0;padding:0;
  background:none;border:0;
  font:inherit;line-height:1;
  color:var(--ink);
  cursor:help;
  transition:color .2s ease;
}
/* підпис «для кого» рукописним — тим самим Marck Script, що в
   підводках назв; крупніший за число, бо рукописний шрифт дрібніший
   за гротеск при тому ж кеглі */
.bpr__spec-lbl{
  font-family:'Marck Script','Segoe Script',cursive;font-weight:400;
  font-size:21px;line-height:1;
  color:var(--brand);
}
.bpr__spec-num{
  display:inline-flex;align-items:center;gap:6px;
  font-size:18px;font-weight:700;letter-spacing:-.01em;
}
.bpr__spec-btn .ico{width:22px;height:22px;opacity:.9}
.bpr__spec:hover .bpr__spec-btn,
.bpr__spec:focus-within .bpr__spec-btn{color:var(--brand)}
.bpr__spec-btn:focus-visible{outline-offset:2px}

.bpr__spec-tip{
  /* Прив'язка ПО ПРАВОМУ краю: тригер стоїть праворуч, тож і підказка
     має рости від нього вліво, а не з протилежного кута картки.
     База — мета-рядок, а не кнопка (у .bpr__spec навмисно немає
     position), тому right:0 = правий край картки = край тригера. */
  position:absolute;right:0;top:calc(100% + 8px);z-index:3;
  width:min(280px,100%);
  padding:11px 14px 12px;
  background:#241335;color:#fff;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(47,10,71,.28);
  font-size:12px;font-weight:400;line-height:1.5;
  opacity:0;visibility:hidden;translate:0 -4px;
  transition:opacity .18s ease,translate .18s ease,visibility 0s linear .18s;
  pointer-events:none;
}
.bpr__spec-tip b{
  display:block;margin-bottom:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#cdbfe6;
}
.bpr__spec:hover .bpr__spec-tip,
.bpr__spec:focus-within .bpr__spec-tip{
  opacity:1;visibility:visible;translate:0 0;transition-delay:0s;
}

.bpr__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:21px;line-height:1.3;
  margin:14px 4px 0;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.bpr__title a{color:inherit;text-decoration:none}
.bpr__title a::after{content:'';position:absolute;inset:0;z-index:1}  /* клікабельна вся картка */
.bpr__title a:hover{color:var(--brand)}

/* --- 3.5 Лектор -------------------------------------------- */
/* Лектори: стопка аватарів, що перекриваються (як у чатах), поруч —
   «4 спікери», під ними — «серед яких …» зі спеціальностями. Один
   лектор — просто аватар + ім'я + посада. Аватар — фото, якщо є,
   інакше ініціали. Біла обводка відділяє кружки один від одного. */
.bpr__lector{display:flex;align-items:center;gap:12px;margin:18px 4px 0}
.bpr__avas{display:inline-flex;flex:none}
.bpr__ava{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--lav);color:var(--brand);
  font-size:12px;font-weight:700;
  border:2px solid var(--bg);
  object-fit:cover;
}
.bpr__ava + .bpr__ava{margin-left:-11px}
.bpr__lector-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bpr__lector-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.bpr__lector-role{font-size:12.5px;color:var(--muted);line-height:1.35}

/* --- 3.6 Статус реєстрації --------------------------------- */
.bpr__status{
  display:flex;align-items:flex-start;gap:9px;
  margin:14px 4px 0;
  font-size:12.5px;font-weight:600;line-height:1.3;
}
/* кулька — по центру ПЕРШОГО рядка (статус може бути дворядковим) */
.bpr__status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;margin-top:4.5px}
/* другий рядок: «Вільних місць не залишилося» — тихіше, без кольору статусу */
.bpr__status small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--muted)}
.bpr__status--open{color:var(--ok)}
.bpr__status--few{color:var(--warn)}
.bpr__status--sold,
.bpr__status--past{color:var(--done)}
.bpr__status--live{color:var(--live)}

/* --- 3.7 Кнопка + єдина анімація в картці -------------------
   Обідок — конічний градієнт, що обертається під ::after-заливкою;
   видно лише 2px по краю. Поки нема hover — анімація на паузі, тобто
   не крутить композитор даремно.
   ------------------------------------------------------------ */
.bpr__actions{align-self:end;padding-top:24px;margin-bottom:44px;position:relative;z-index:2}   /* margin = зазор між рядами карток */

.btn{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:58px;padding:0 26px;
  border-radius:var(--r-pill);
  background:var(--btn);
  color:#fff;
  font-family:var(--ui);font-size:17px;font-weight:500;
  text-decoration:none;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.btn > *{position:relative;z-index:2}
.btn::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:190%;aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 0deg,
    #4f8cff, #9b72cb, #ff6fa5, #ffab5e, #4bc8e8, #4f8cff);
  opacity:0;
  transition:opacity .35s ease;
  animation:btn-spin 3.2s linear infinite;
  animation-play-state:paused;
  z-index:0;
}
.btn::after{                       /* заливка: лишає видимим тільки обідок */
  content:'';
  position:absolute;inset:2px;
  border-radius:inherit;
  background:var(--btn);
  z-index:1;
  transition:background .3s ease;
}
.btn:hover::before,
.btn:focus-visible::before{opacity:1;animation-play-state:running}
.btn:hover{box-shadow:0 10px 30px rgba(155,114,203,.42)}
.btn:hover::after{background:var(--btn-hover)}
@keyframes btn-spin{to{rotate:360deg}}

.btn__arrow{width:58px;height:16px;flex:none;fill:none;stroke:currentColor;
            stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* завершений захід — приглушена кнопка «Матеріали» */
.btn--muted{--btn:var(--lav-soft);--btn-hover:#e7e3f1;color:var(--brand)}
.btn--muted:hover{box-shadow:0 10px 28px rgba(155,114,203,.28)}

/* --- 3.8 Іконки / фокус ------------------------------------ */
.ico{
  /* розмір саме тут: svg без width/height розтягується на всю ширину */
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  flex:none;
}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ============================================================
   4. АДАПТИВ
   ============================================================ */
@media (max-width:1120px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .page__head{width:auto;margin-bottom:32px}
  .page__title{flex-direction:column;align-items:flex-start;gap:20px}
  .page__title .ttl{translate:none}   /* у стовпчику опускати нема куди */
  .page__banner{width:min(100%,360px)}
  .page__head p{margin-top:20px}
  .grid{grid-template-columns:1fr}
  .bpr__actions{margin-bottom:38px}
}
@media (max-width:600px){
  .page{padding:28px 14px 60px}
  .bpr__title{font-size:19.5px}
  .bpr__tab{padding:9px 14px 24px;font-size:12.5px}
  .btn{height:54px;padding:0 22px;font-size:16px}
  .btn__arrow{width:44px}
}
/* чипи і таб відліку на вузьких екранах: стискаємо відступи і шрифт
   від ширини екрана, а не ламаємо рядок. Три чипи лишаються в ряд,
   а «до початку: 63д 10г 46хв 52с» і найдовше «завершено 30 серпня –
   2 вересня» влазять у таб навіть на 280px. Ширину табів після зміни
   шрифту перераховує equalizeTabs по resize. */
@media (max-width:420px){
  .bpr__tab{
    padding:8px clamp(9px,3vw,14px) 22px;
    gap:clamp(5px,1.8vw,9px);
    font-size:clamp(10.5px,3.4vw,12.5px);
  }
  .bpr__tab .ico{width:14px;height:14px}
  .bpr__chips{gap:clamp(3px,1.4vw,6px)}
  .chip{padding:0 clamp(3px,1.5vw,7px);font-size:clamp(9.5px,3.2vw,12.5px);gap:3px}
  .chip--plain{padding:0 clamp(5px,2.4vw,12px)}
  .chip .ico{width:13px;height:13px}
}

@media (prefers-reduced-motion:reduce){
  .btn::before,.bpr__dot{animation:none}
  *{transition-duration:.001ms !important}
}