/* Баннер согласия (аналитика и рекламные измерения; work-docs/analytics/plan-analytics.md, п. 1.6,
   переработано планом ads-attribution-consent, 2026-10-20).
   Самодостаточный: страницы двух семейств стилей (лендинг и страницы кабинета), поэтому
   переменные shared.css/cabinet.css здесь не используются - палитра зашита значениями.
   Баннер - прикреплённая нижняя полоса (sticky, а не fixed): разметка баннера стоит последним
   блоком <body>, поэтому место под полосу в конце документа резервирует сам поток, а JS-замера
   высоты нет. Пока документ выше окна и его конец не доскроллен, полоса стоит у нижнего края окна
   поверх содержимого и закрывает его нижнюю часть (до 50svh); прокрутка до конца документа
   открывает всё, а сфокусированный элемент не прячется под ней (scroll-padding-bottom ниже).
   Резерва под полосу внизу окна (отступ содержимого на высоту полосы) нет - решение плана Q9.
   Три кнопки равноценны, ничего не предвыбрано.
   Высота полосы ограничена половиной окна (50svh): на узких и низких окнах прокручивается только
   абзац, заголовок, кнопки и ссылка видны всегда. Фокус не прячется под полосой за счёт
   scroll-padding-bottom, равного тому же пределу. При высоте окна до 360px (альбомный телефон,
   масштаб 400 %) полоса не прикреплена и стоит в потоке последним блоком страницы - иначе она
   срезала бы кнопки. Содержимое выровнено по колонке лендинга (.wrap: 1180px по центру, отступ
   28px): на широком экране текст слева (колонка не уже 320px), кнопки и ссылка справа - строка
   переносится (flex-wrap: wrap, без nowrap): при нехватке ширины (окна примерно 901-1100px, длинные
   подписи) ссылка уходит под кнопки, а не сжимает текст за пределы полосы; на узком - колонкой. */

.ar-consent[hidden] { display: none; }

.ar-consent {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: center;
  column-gap: 32px;
  width: 100%;
  max-height: 50svh;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-inline: max(28px, calc((100% - 1180px) / 2 + 28px));
  background: #151a21;
  color: #f2f4f7;
  border-top: 1px solid rgb(255 255 255 / .16);
  font: 300 14px/1.55 Commissioner, system-ui, sans-serif;
  text-align: left;
}

.ar-consent *,
.ar-consent *::before,
.ar-consent *::after { box-sizing: border-box; }

.ar-consent p { grid-column: 1; margin: 0; max-width: 78ch; }

.ar-consent .ar-consent__title { margin: 0 0 2px; font-weight: 600; font-size: 15px; }

.ar-consent .ar-consent__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  margin: 0;
  max-width: none;
  white-space: normal;
}

.ar-consent__btn {
  appearance: none;
  min-width: 132px;
  padding: 9px 18px;
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  background: #f2f4f7;
  color: #12151a;
  font: 600 14px/1.3 Commissioner, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
}

.ar-consent__btn:hover { background: #fff; border-color: #fff; }

.ar-consent__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(0 0 0 / .85);
}

.ar-consent a { color: #e0a33e; }

.ar-consent a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Сфокусированный элемент не прячется под полосой: отступ прокрутки равен пределу её высоты. */
html:has(#cookie-settings:not([hidden])) { scroll-padding-bottom: 50svh; }

/* Узкое или низкое окно (в том числе широкое низкое, например 932x430): полоса - колонка, а
   прокручивается только абзац; заголовок, три кнопки и ссылка видны всегда. */
@media (max-width: 900px), (max-height: 600px) {
  .ar-consent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-top: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .ar-consent .ar-consent__title { flex: 0 0 auto; }
  .ar-consent__text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ar-consent .ar-consent__actions {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 12px 0 0;
  }
}

/* Узкий экран: три кнопки в одну-две строки (ориентир - 320px), ссылка отдельной строкой. */
@media (max-width: 520px) {
  .ar-consent { padding-inline: 16px; font-size: 13px; line-height: 1.5; }
  .ar-consent__btn { flex: 1 1 30%; min-width: 0; padding: 9px 8px; font-size: 13px; }
  .ar-consent .ar-consent__actions a { flex: 1 1 100%; }
}

/* Очень низкое окно: полоса не прикреплена, а стоит в потоке последним блоком страницы. Правило
   стоит после двух предыдущих и после правила scroll-padding-bottom выше: специфичность равна,
   побеждает последнее. */
@media (max-height: 360px) {
  .ar-consent {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .ar-consent__text { overflow: visible; }
  html:has(#cookie-settings:not([hidden])) { scroll-padding-bottom: 0; }
}