/* БАННЕР COOKIE — шлюз аналитики, а не оформление (`_cookie.html`, `cookie.js`).

   🔴 НИ ОДНОГО КОДА ЦВЕТА: только имена ролей из `tokens.css` — тем же правилом, что у
   попапа помощника (`chat.css`). Наберёт этот файл свой зелёный, и на одной странице
   окажется два разных зелёных, а браузер о несовпадении оттенков не жалуется (🅱️5).

   🔴 КНОПКИ СВОИ, А НЕ `.knopka` ГЛАВНОЙ: `home.css` подключён только на главной, а баннер
   стоит на КАЖДОЙ странице сайта. Тот же приём, что у `pages.css` и `hedge.css` — своя
   кнопка со своим именем, вид общий.

   🔴 СЛОЙ (`z-index`) ВЫШЕ ВСЕГО, ЧТО ЕСТЬ НА САЙТЕ. Пока согласие не выбрано, это первое,
   что обязан увидеть человек, — выше закреплённой шапки (`site.css`, слой 8), выше попапа
   помощника (`chat.css`, слой 40) и выше развёрнутого экрана «Проекты» (`projects.css`,
   слой 60). Число взято с запасом над самым высоким слоем сайта, а не подобрано на глаз. */
/* 🔴 ПЛАШКА СТОИТ В ПРАВОМ НИЖНЕМ УГЛУ, СТОПКОЙ НАД КНОПКОЙ ПОМОЩНИКА — макет Кирилла
   12.08.2026. Здесь была полоса во всю ширину (`left: 0; right: 0; bottom: 0`), и она села бы
   прямо на кнопку Лёши: та прибита в тот же угол (`chat.css`, `right: 1rem`,
   `bottom: calc(5svh + env(safe-area-inset-bottom, 0px))`).

   🔴 НИЗ ПЛАШКИ СЧИТАЕТСЯ ОТ ТОЙ ЖЕ ВЕЛИЧИНЫ, ЧТО И НИЗ ЧАТА, а не подобран числом: то же
   `5svh` плюс та же безопасная область телефона, плюс высота кнопки помощника, плюс зазор.
   Поменяется отступ чата — стопка поедет вместе с ним, а не разъедется молча.

   ⚠️ Высота кнопки помощника взята замером, а не на глаз: на стенде она 44 точки на всех
   четырёх ширинах приёмки (390, 820, 1440, 2540) — кегль у неё один и от окна не зависит.
   Заложено 3.4rem с запасом на случай переноса подписи в две строки. Число замораживается,
   поэтому непересечение плашки и кнопки проверяет сторож, а не память следующего окна:
   `core/site/tests/test_cookie_banner.py`.

   🔴 ПРАВЫЙ КРАЙ ТОТ ЖЕ, ЧТО У КНОПКИ ПОМОЩНИКА (`1rem`): два элемента в одном углу обязаны
   стоять по одной вертикали, иначе стопка читается как две случайные карточки.

   🔴 СЛОЙ ВЫШЕ ВСЕГО, ЧТО ЕСТЬ НА САЙТЕ — выше шапки (8), помощника (40) и развёрнутых
   «Проектов» (60). Число взято с запасом над самым высоким слоем, а не подобрано на глаз. */
.cookie {
  --cookie-nad-chatom: 3.4rem;
  --cookie-zazor: 0.6rem;

  position: fixed;
  right: 1rem;
  bottom: calc(
    5svh + env(safe-area-inset-bottom, 0px) + var(--cookie-nad-chatom) + var(--cookie-zazor)
  );
  z-index: 70;
  /* 🔴 ШИРИНА РОВНО ПО КНОПКЕ ПОМОЩНИКА — требование Кирилла 12.08.2026: «в ширину окно
     не больше чем "спросить о растениях", выровнено относительно него». Кнопка замерена
     в браузере: 234 точки на 1440 и на 2540 — её ширину задаёт подпись, а не окно.

     ⚠️ На телефоне кнопка схлопывается в кружок 59 точек, и буквально следовать правилу
     там нельзя: в 59 точек не поместится ни текст, ни кнопки. Поэтому на узком экране
     плашка занимает ширину окна за вычетом полей — `min()` выбирает меньшее сам.

     Число заморожено, поэтому совпадение ширин проверяет сторож, а не память следующего
     окна: `tools/zamer/cookie-banner.py` сверяет ширину плашки с шириной кнопки. */
  width: min(14.625rem, calc(100vw - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o-3);
  padding: var(--o-3);
  border: 1px solid var(--kromka-silnaya);
  /* Тот же радиус, что у плитки раздела: плашка встаёт рядом с ними и обязана читаться
     как элемент того же набора, а не как чужое окно. */
  border-radius: var(--r-m);
  background: var(--steklo-panel);
  backdrop-filter: var(--steklo-blur-shapki);
  box-shadow: var(--ten-3);
}

.cookie__text {
  flex: 1 1 100%;
  margin: 0;
  color: var(--tekst);
  font-size: var(--t-s);
  line-height: 1.5;
}

/* 🔴 ОБЕ КНОПКИ ОДНОГО РАЗМЕРА. Кирилл 12.08.2026: «принять и отклонить разного размера».
   Были разной ширины, потому что каждая подгонялась под свою подпись, — а две кнопки рядом
   в одной строке читаются как пара только при равной ширине. `flex: 1 1 0` делит строку
   поровну независимо от длины слова. */
.cookie__deystviya {
  display: flex;
  align-items: stretch;
  gap: var(--o-2);
  flex: 1 1 100%;
}

.cookie__deystviya > button {
  flex: 1 1 0;
}

/* Вторая строка на всю ширину: ссылки на подробности читаются реже кнопок, и им не место
   в одном ряду с действием. */
.cookie__podrobnee {
  flex: 0 0 100%;
  margin: 0;
  color: var(--tekst-tihiy);
  font-size: var(--t-xs);
}

/* 🔴 ГЛАВНОЕ ДЕЙСТВИЕ — ЗАЛИВКА ЗЕЛЁНЫМ, та же роль, что у кнопки «В корзину» и у кнопки
   главной («Смотреть каталог»): один цвет действия на весь сайт. */
.cookie__prinyat {
  padding: var(--o-2) var(--o-3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--akcent);
  box-shadow: var(--ten-akcenta);
  color: var(--tekst-na-akcente);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--hod), background var(--hod), box-shadow var(--hod);
}

.cookie__prinyat:hover {
  transform: translateY(-2px);
  background: var(--akcent-navedenie);
  box-shadow: var(--ten-akcenta-navedenie);
  color: var(--tekst-na-akcente);
}

/* 🔴 «ОТКЛОНИТЬ» НАМЕРЕННО ТИШЕ «ПРИНЯТЬ» — требование Кирилла 12.08.2026, дословно:
   «сделай отклонить более прозрачную и буквы более прозрачные, что б принять гораздо сильнее
   было видно. а то нажмет еще кто отклонить случайно».

   Тише — это ТРИ ступени сразу, а не одна: подложки нет вовсе (была стеклянная панель),
   рамка слабее, буквы тихой краской. Тени тоже нет: тень поднимает кнопку над плашкой
   и делает её равной по весу.

   ⚠️ ГРАНИЦА, ЗА КОТОРУЮ НЕЛЬЗЯ. Кнопка отказа обязана оставаться читаемой: у неё есть
   рамка, свой размер и наведение мышью. Приём, когда отказ прячут до неразличимости,
   в отрасли называется тёмным паттерном, и именно за него в Европе штрафуют владельцев
   сайтов; у нас нормы про это нет, но выглядит это как обман, и клиент это видит. */
.cookie__neobhodimoe {
  padding: var(--o-2) var(--o-3);
  border: 1px solid var(--frame-knopki-tihaya, var(--frame-knopki));
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tekst-tihiy);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  /* Наведение возвращает кнопке полную краску: тихая она в покое, а не для того, кто
     уже решил отказаться и ведёт к ней мышь. */
  transition: transform var(--hod), border-color var(--hod), color var(--hod);
}

.cookie__neobhodimoe:hover {
  transform: translateY(-2px);
  border-color: var(--frame-navedenie);
  color: var(--tekst);
}

/* Человек, попросивший систему убрать движение, не получает его и здесь — тот же приём,
   что у кнопок главной и у кнопки помощника. */
@media (prefers-reduced-motion: reduce) {
  .cookie__prinyat,
  .cookie__neobhodimoe {
    transition: none;
  }
  .cookie__prinyat:hover,
  .cookie__neobhodimoe:hover {
    transform: none;
  }
}