/*
  Баннер согласия на cookie — общесайтовый слой.

  Живёт отдельно от пакета pixtoonhybrid намеренно: тот отвечает за две
  секционные страницы, а согласие спрашивается на всём домене. Поэтому в
  public-assets.mjs `initConsent` стоит в списке запрещённого поведения —
  чтобы этот код случайно не уехал в транспортный пакет.

  Файл самодостаточен. Он подключается на всех страницах, включая те, где
  нет ни hybrid.min.css, ни его токенов, ни его сброса стилей: на главной
  классов hyb- нет вообще. Отсюда три следствия ниже — свои токены, свои
  правила кнопок и свой микро-сброс.
*/

/*
  Токены — копия нужных значений из tokens.css, но объявлены на самом
  баннере, а не на :root: на hybrid-страницах :root уже несёт свой набор,
  и второй бы с ним спорил. На .hyb-consent набор один и тот же везде,
  поэтому баннер выглядит одинаково на любой странице сайта.

  Шрифты — исключение. "Baloo 2" и Quicksand грузятся только на
  hybrid-страницах, и тянуть их на весь сайт ради одной плашки незачем.
  Запасной — Poppins: он у сайта свой, лежит локально и есть на каждой
  странице, так что подмены шрифта в кадре не будет.
*/
.hyb-consent {
  --hyb-accent: #8f71a8;
  --hyb-accent-wash: #f5f1f8;
  --hyb-accent-text: #83619e;
  --hyb-cta: #fff028;
  --hyb-cta-hover: #ffe600;
  --hyb-cta-ink: #231e29;
  --hyb-cta-text: #786b00;
  --hyb-bg: #ffffff;
  --hyb-ink: #231e29;
  --hyb-ink-muted: #56515d;
  --hyb-line: #e6e1ea;
  --hyb-line-active: #c7b6d3;
  --hyb-font-display: "Baloo 2", Poppins, system-ui, sans-serif;
  --hyb-font-body: "Quicksand", Poppins, system-ui, -apple-system, sans-serif;
  --hyb-t-body: 1rem;
  --hyb-t-small: 0.875rem;
  --hyb-t-eyebrow: 0.75rem;
  --hyb-lh-body: 1.55;
  --hyb-lh-relaxed: 1.625;
  --hyb-ls-label: 0.14em;
  --hyb-r-card: 24px;
  --hyb-r-pill: 9999px;
  --hyb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hyb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hyb-dur: 240ms;
  --hyb-dur-slow: 560ms;
}

/*
  Микро-сброс. На hybrid-страницах его роль играет base.css, здесь его нет,
  а тема сайта задаёт свои отступы заголовкам, абзацам и спискам — без
  сброса карточка расползается. Ограничен потомками .hyb-consent, наружу
  не действует.
*/
.hyb-consent,
.hyb-consent *,
.hyb-consent *::before,
.hyb-consent *::after {
  box-sizing: border-box;
}
/* :where() обнуляет вес селектора. Без него `.hyb-consent p` (0,1,1)
   перебивает `.hyb-consent__title` и `.hyb-consent__cat-text` (0,1,0), и
   сброс съедает собственные отступы баннера — заголовок слипается с
   текстом, а описания категорий с их названиями. */
:where(.hyb-consent) h2,
:where(.hyb-consent) p,
:where(.hyb-consent) ul,
:where(.hyb-consent) li,
:where(.hyb-consent) button {
  margin: 0;
  padding: 0;
}
:where(.hyb-consent) ul {
  list-style: none;
}
/* У кнопки в таблице браузера свой шрифт — Arial 13.333px, — и переключатель
   категории брал его вместо шрифта карточки. */
:where(.hyb-consent) button {
  font: inherit;
}

/*
  Сброс HTML5 в теме сайта — article,aside,...{display:block} — перебивает
  браузерное правило для [hidden]: у обоих селекторов одинаковый вес, а тема
  подключена позже. Без этой строки спрятанный баннер остаётся в потоке с
  нулевой прозрачностью и молча перехватывает клики в левом нижнем углу на
  каждой странице после решения посетителя. Двухклассовый селектор берёт
  верх и над сбросом, и над возможными правилами aside в других файлах темы.
*/
.hyb-consent[hidden] {
  display: none;
}
:where(.hyb-consent) svg {
  display: block;
}

/* --- Карточка ------------------------------------------------------------ */

/*
  Карточка в левом нижнем углу, не модальное окно: страница читается, пока
  баннер висит. Тень нужна потому, что блок лежит поверх произвольного фона
  и граница в 1px на светлой секции растворяется.

  Появление — сдвиг снизу с прозрачности; класс is-open ставит скрипт кадром
  позже снятия hidden, иначе переходу не от чего стартовать.

  z-index 55 — выше шапки сайта и её выпадающих меню, но ниже модалок темы
  (у них 1000+): согласие важнее навигации, но не должно перекрывать
  открытое пользователем окно.
*/
.hyb-consent {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  width: min(27.5rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--hyb-line);
  border-radius: var(--hyb-r-card);
  background: var(--hyb-bg);
  box-shadow: 0 16px 48px rgba(35, 30, 41, 0.14);
  font-family: var(--hyb-font-body);
  font-size: var(--hyb-t-body);
  line-height: var(--hyb-lh-body);
  color: var(--hyb-ink);
  text-align: left;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.98);
  transition: opacity var(--hyb-dur-slow) var(--hyb-ease-out),
    transform var(--hyb-dur-slow) var(--hyb-ease-out);
}
.hyb-consent.is-open {
  opacity: 1;
  transform: none;
}
/* Фокус приходит сюда программно при открытии панели; рамку рисовать незачем */
.hyb-consent:focus {
  outline: none;
}

@media (max-width: 40rem) {
  .hyb-consent {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    padding: 1.25rem;
  }
}

/* Крестик есть только после решения: на первом показе выбор из трёх кнопок
   документа, и четвёртого — «закрыть, ничего не решив» — там нет. */
.hyb-consent__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hyb-ink-muted);
  cursor: pointer;
  transition: background-color var(--hyb-dur) var(--hyb-ease),
    color var(--hyb-dur) var(--hyb-ease);
}
.hyb-consent.has-choice .hyb-consent__close {
  display: grid;
}
.hyb-consent__close:hover {
  background: var(--hyb-accent-wash);
  color: var(--hyb-ink);
}

/* Смена вида — тот же подъём, что у блоков вёрстки при прокрутке */
.hyb-consent__view {
  animation: hyb-consent-rise 320ms var(--hyb-ease-out);
}

@keyframes hyb-consent-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hyb-consent__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--hyb-cta);
  color: var(--hyb-cta-ink);
}

.hyb-consent__title {
  margin-bottom: 0.5rem;
  padding-right: 1.5rem;
  font-family: var(--hyb-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--hyb-ink);
  text-transform: none;
}

.hyb-consent__text {
  font-size: var(--hyb-t-small);
  line-height: var(--hyb-lh-relaxed);
  color: var(--hyb-ink-muted);
}
.hyb-consent__text a {
  font-weight: 600;
  color: var(--hyb-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.hyb-consent__text a:hover {
  color: var(--hyb-accent-text);
  text-decoration-color: currentColor;
}

.hyb-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Третья кнопка — текстовая: «Настройки» стоит после двух главных, и третья
   пилюля в ряд шириной 440px уже не влезает. */
.hyb-consent__link {
  margin-left: auto;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--hyb-t-small);
  font-weight: 700;
  color: var(--hyb-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hyb-line-active);
  cursor: pointer;
  transition: color var(--hyb-dur) var(--hyb-ease);
}
.hyb-consent__link:hover {
  color: var(--hyb-accent-text);
}

.hyb-consent__cats {
  display: grid;
  margin-top: 1rem;
}

.hyb-consent__cat {
  padding: 0.75rem 0;
}
.hyb-consent__cat + .hyb-consent__cat {
  border-top: 1px solid var(--hyb-line);
}

.hyb-consent__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hyb-consent__cat-title {
  font-family: var(--hyb-font-display);
  font-weight: 700;
  font-size: var(--hyb-t-body);
  color: var(--hyb-ink);
}

.hyb-consent__cat-text {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--hyb-ink-muted);
}

.hyb-consent__always {
  flex-shrink: 0;
  font-size: var(--hyb-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--hyb-ls-label);
  text-transform: uppercase;
  color: var(--hyb-cta-text);
}

/* Переключатель категории: кнопка с role=switch, положение — aria-checked.
   Ход кнопки — transform, цвет дорожки — background; оба с переходом. */
.hyb-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--hyb-r-pill);
  background: #d5cfdb;
  cursor: pointer;
  transition: background-color var(--hyb-dur) var(--hyb-ease);
}
.hyb-switch[aria-checked="true"] {
  background: var(--hyb-accent);
}

.hyb-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.625rem - 6px);
  height: calc(1.625rem - 6px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(35, 30, 41, 0.25);
  transition: transform var(--hyb-dur) var(--hyb-ease-out);
}
.hyb-switch[aria-checked="true"] .hyb-switch__knob {
  transform: translateX(1.125rem);
}

/*
  Кнопки. На hybrid-страницах те же правила приходят из base.css, здесь их
  нет — поэтому геометрия продублирована и заперта внутри баннера. Селектор
  двухклассовый, так что на hybrid-странице он выигрывает у общего .hyb-btn,
  но значения совпадают и разницы в кадре это не даёт.
*/
.hyb-consent .hyb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 14px, а не 16: рамка в 2px входит в высоту кнопки */
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--hyb-r-pill);
  font-family: var(--hyb-font-body);
  font-size: var(--hyb-t-small);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--hyb-dur) var(--hyb-ease),
    background-color var(--hyb-dur) var(--hyb-ease),
    border-color var(--hyb-dur) var(--hyb-ease),
    color var(--hyb-dur) var(--hyb-ease);
}
.hyb-consent .hyb-btn:hover {
  transform: translateY(-2px);
}
.hyb-consent .hyb-btn:active {
  transform: translateY(0);
}

.hyb-consent .hyb-btn--primary {
  background: var(--hyb-cta);
  color: var(--hyb-cta-ink);
}
.hyb-consent .hyb-btn--primary:hover {
  background: var(--hyb-cta-hover);
}

/* Обводка — чернилами, а не линией разметки: макетный #e6e1ea даёт на белом
   1.29:1, и кнопка читается как пустое место с надписью. */
.hyb-consent .hyb-btn--ghost {
  background: transparent;
  color: var(--hyb-ink);
  border-color: var(--hyb-ink);
}
.hyb-consent .hyb-btn--ghost:hover {
  background: var(--hyb-ink);
  color: var(--hyb-bg);
}

/* Кнопка возврата к настройкам в подвале: текстовая, под стиль соседних
   ссылок темы, поэтому цвет и кегль наследуются от подвала. */
.hyb-footer-cookie {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  opacity: 0.85;
}
.hyb-footer-cookie:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hyb-consent,
  .hyb-consent__view,
  .hyb-consent .hyb-btn,
  .hyb-switch,
  .hyb-switch__knob {
    transition: none;
    animation: none;
  }
}