/* =========================================================================
   КОМПОНЕНТ «УВЕДОМЛЕНИЕ О КУКИ» — эталон библиотеки.

   Что делает: внизу угла страницы стоит небольшая карточка «Сайт сохраняет
   куки» с одной кнопкой «Хорошо». Это сообщение, а не вопрос: согласия не
   просим, поэтому кнопка одна и называется «Хорошо».

   Где берётся: одна вставка на весь проект, вручную на страницы не копируется.
   У портала — pages/kuki.py (промежуточный слой, каждая страница сайта).
   У «Записи» — templates/sayt/osnova.html (основа всех публичных страниц).
   Правила копий — README рядом.

   ЦВЕТА СВОИ, НЕ ИЗ ТОКЕНОВ ПРОЕКТА. Причина настоящая, а не вкусовая: 30.10.2026
   карточка стояла на переменных `--panel` и `--ink`, а на страницах-копиях
   Тильды `--ink` переопределён самой страницей в тёмный цвет. Фон взял своё
   значение из запасных, текст — чужое, и на тёмной карточке вышел тёмный текст:
   уведомление было на месте и не читалось. Имена общие у всех проектов, поэтому
   компонент держит свои (`--e-kuki-…`) и не подхватывает чужие случайно.

   Палитра карточки — «графит» портала: тёмная плита с оранжевой кнопкой читается
   и на светлых страницах Тильды, и на тёмной «Мастерской», и в «Записи» в обеих
   темах. Проект, которому нужны свои цвета, перекрывает `--e-kuki-*` одной
   строкой у себя, а не правит копию стилей.
   ========================================================================= */

.e-kuki,
.e-kuki *{
  /* Размер считаем вместе с полями и кромкой: у страниц бывают разные основы
     разметки, и без этой строки карточка на одних страницах шире, чем на
     других (случай 30.10.2026: 430 вместо 400 на странице оферты). */
  box-sizing:border-box;
}

.e-kuki{
  /* Перекрываемые значения компонента: фон, текст, кромка, кнопка, угол. */
  --e-kuki-fon:#1A1C1F;
  --e-kuki-tekst:#E8E5DD;
  --e-kuki-liniya:#34363A;
  --e-kuki-akcent:#F26A38;
  --e-kuki-akcent-svetlee:#F4805A;
  --e-kuki-na-akcente:#17191D;
  --e-kuki-radius:10px;

  position:fixed;
  left:24px;
  bottom:24px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(400px, calc(100vw - 48px));
  margin:0;
  padding:12px 12px 12px 16px;
  background:var(--e-kuki-fon);
  color:var(--e-kuki-tekst);
  /* Кромка и тень тут не украшение: карточка висит над чужой страницей, и
     ступень к её фону не посчитать. Без кромки в светлой палитре уведомление
     сливается с холстом, поэтому в законе это исключение для плавающих плит. */
  border:1px solid var(--e-kuki-liniya);
  border-radius:var(--e-kuki-radius);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  /* Гарнитура страницы, а не своя: на страницах-копиях Тильды текст набран
     своим шрифтом, и уведомление не должно выбиваться чужим. */
  font-family:inherit;
  font-size:15px;
  line-height:1.45;
  text-align:left;
}

.e-kuki[hidden]{display:none}

.e-kuki-tekst{
  /* Цвет задан и здесь: у страниц бывают свои правила для абзацев, и они
     перебивают унаследованный цвет карточки (случай 30.10.2026). */
  margin:0;
  min-width:0;
  color:var(--e-kuki-tekst);
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}

.e-kuki-knopka{
  flex:none;
  min-height:44px;
  padding:0 16px;
  background:var(--e-kuki-akcent);
  color:var(--e-kuki-na-akcente);
  border:0;
  border-radius:var(--e-kuki-radius);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

.e-kuki-knopka:hover{background:var(--e-kuki-akcent-svetlee)}
.e-kuki-knopka:focus-visible{
  outline:2px solid var(--e-kuki-tekst);
  outline-offset:2px;
}
.e-kuki-knopka:active{opacity:.88}

/* Телефон: карточка во всю ширину с полями, кнопка остаётся справа. */
@media (max-width:599px){
  .e-kuki{
    left:12px;
    right:12px;
    bottom:max(12px, env(safe-area-inset-bottom));
    width:auto;
    gap:8px;
    padding:12px;
  }
}

/* Портал держит внизу липкую полосу с главной кнопкой на узком экране
   (portal.css, id="lipkaya"). Пока она видна, уведомление встаёт над ней,
   а не закрывает главное действие. */
@media (max-width:1023px){
  body:has(#lipkaya:not([hidden])) .e-kuki{
    bottom:calc(max(12px, env(safe-area-inset-bottom)) + 84px);
  }
}

/* То же для плавающей кнопки «Написать разработчику»: она стоит в том же
   левом нижнем углу (dorabotki.js). Класс ставит сам скрипт уведомления,
   когда кнопка на странице есть. */
.e-kuki-nad-knopkoy{
  bottom:calc(24px + 52px);
}
@media (max-width:599px){
  .e-kuki-nad-knopkoy{
    bottom:calc(max(12px, env(safe-area-inset-bottom)) + 52px);
  }
}