/* ══════════════════════════════════════════════════════════════════════
   SWARM — согласие на cookie
   Правило дома то же, что в swarm.css: глубина берётся из света, а не из
   обводок. Ни одной рамки в 1px по периметру — волосяная линия сверху,
   медовое свечение, мягкий подъём и фирменный срез угла, как у кнопок.
   Серого бара тут нет намеренно: это часть продукта, а не наклейка на нём.
   ══════════════════════════════════════════════════════════════════ */

/* Слой. Ниже мобильного меню (.drawer, z-index 65) — открытое меню обязано
   накрывать баннер целиком, иначе поверх сплошной заливки висит карточка.
   Выше шапки (.nav, 60), ниже виджета поддержки (.sup, 120): поддержку
   баннер не перекрывает, а сдвигает вверх (см. ниже). */
.cns{
  position:fixed;z-index:62;left:22px;bottom:22px;
  width:min(440px,calc(100vw - 44px));
  /* Тень живёт на родителе: у карточки clip-path, а он срезает box-shadow
     вместе с углом. drop-shadow повторяет форму среза и остаётся снаружи. */
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.72));
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.cns[hidden]{display:none}
.cns.is-in{opacity:1;transform:none}

.cns__card{
  --cut:16px;
  position:relative;overflow:hidden;isolation:isolate;
  padding:26px 26px 24px;
  background:
    linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.018) 46%,rgba(255,255,255,.006)),
    var(--ink-2,#0C0C10);
  /* Волосяная линия сверху — она же вся «рамка», которая тут есть. */
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* Медовое свечение из верхнего левого угла — тот же приём, что у .panel. */
.cns__card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(78% 92% at 6% 0%,rgba(233,185,63,.15),transparent 64%);
}

.cns__kicker{color:var(--honey-2);margin-bottom:14px}

.cns__h{
  margin:0;font-family:var(--sw-display);font-weight:600;
  font-size:24px;line-height:1.06;letter-spacing:-.025em;color:var(--text);
}

.cns__p{
  margin:14px 0 0;color:var(--mute);font-size:14.5px;line-height:1.6;
}

/* Ссылки на документы — подчёркиванием светом, не «синей ссылкой». */
.cns__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px}
.cns__links a{
  font-family:var(--sw-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);box-shadow:inset 0 -1px 0 var(--veil-2);
  transition:color .2s,box-shadow .2s;
}
.cns__links a:hover{color:var(--honey);box-shadow:inset 0 -1px 0 var(--honey)}
.cns__links a:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

.cns__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* .btn из swarm.css выставляет justify-self:start — в ряду это не мешает,
   но на узком экране кнопки растягиваются на всю строку (см. медиазапрос).
   Запрет выделения — не косметика: на телефоне палец задерживается на
   надписи чуть дольше мыши, и жест уходит в выделение текста вместо нажатия.
   Промахнуться мимо кнопки согласия человек не должен. */
.cns__row .btn{justify-self:auto;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Строка «Ваш выбор: …» появляется только при повторном открытии из подвала:
   при первом показе выбора ещё нет и показывать нечего. */
.cns__now{
  margin:16px 0 0;font-family:var(--sw-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);line-height:1.5;
}
.cns__now[hidden]{display:none}

/* Крестик — только в режиме пересмотра. При первом показе закрыть баннер
   молча нельзя: закрытие без выбора и есть отсутствие согласия, и в
   следующий раз спрашивать пришлось бы снова. */
.cns__x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--dim);font-size:19px;line-height:1;
  transition:background .2s,color .2s;
}
.cns__x:hover{background:var(--veil);color:var(--text)}
.cns__x:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
.cns__x[hidden]{display:none}

/* Содержимое страницы баннер не съедает: на время показа низ документа
   получает отступ в его высоту, и последний экран остаётся доступным. */
html.cns-open body{padding-bottom:var(--cns-h,0px)}

/* Виджет поддержки (swarm.css, .sup__go) стоит в правом нижнем углу.
   На широком экране карточка висит слева и не доходит до него — трогать
   кнопку не нужно, иначе она уезжает на высоту карточки в пустоту. Сдвиг
   включается только там, где баннер становится листом во всю ширину, —
   см. медиазапрос ниже. */

/* ── светлая тема ──────────────────────────────────────────────────────
   Её включает только страница входа (data-theme="light"). Токены там уже
   переопределены, но белые накладки карточки на светлом фоне дают грязь —
   поэтому подложка и свечение считаются от чернил, а не от белого. */
html[data-theme="light"] .cns{filter:drop-shadow(0 26px 46px rgba(20,18,10,.18))}
html[data-theme="light"] .cns__card{
  background:
    linear-gradient(168deg,rgba(20,18,10,.045),rgba(20,18,10,.012) 46%,rgba(20,18,10,.004)),
    var(--ink-2,#FFFFFF);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,18,10,.06);
}
html[data-theme="light"] .cns__card::before{
  background:radial-gradient(78% 92% at 6% 0%,rgba(201,162,39,.13),transparent 64%);
}

/* ── планшет и телефон ─────────────────────────────────────────────────
   Проверочная ширина — 390px. Баннер становится нижним листом во всю
   ширину: на такой ширине карточка с полями по бокам выглядит зажатой,
   а срез угла перестаёт читаться. */
@media(max-width:720px){
  .cns{left:0;right:0;bottom:0;width:auto;filter:drop-shadow(0 -18px 40px rgba(0,0,0,.6))}
  .cns__card{
    --cut:18px;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
    /* Срез остаётся только сверху слева: снизу его съедает край экрана. */
    clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
  }
  /* Вертикальный ритм здесь плотнее десктопного намеренно: на 390×844 тот же
     набор занимал больше половины экрана, и лист начинал читаться как модалка
     во весь экран, которой он не является. */
  .cns__kicker{margin-bottom:10px}
  .cns__h{font-size:20px}
  .cns__p{margin-top:10px;font-size:13px;line-height:1.5}
  .cns__links{margin-top:12px;gap:4px 16px}
  .cns__row{margin-top:15px;gap:8px}
  .cns__row .btn{padding:1.05em 1.4em}
  /* На 390px «Только необходимые» в моноширинном капслоке не встаёт рядом
     с «Принять» — кнопки идут в столбец и попадают под большой палец. */
  /* 46px по высоте — не украшение: моноширинный капслок в .btn--sm давал
     38px, а это меньше площадки, в которую уверенно попадает палец. Согласие
     и отказ обязаны нажиматься одинаково легко. */
  .cns__row .btn{flex:1 1 100%;justify-content:center;min-height:46px}
  /* Крестик закрытия был 34×34 — меньше нормы 44. Это единственный способ
     убрать лист, не отвечая на вопрос, и промах по нему читается как
     «окно не закрывается». */
  .cns__x{top:8px;right:8px;width:44px;height:44px;
          display:inline-flex;align-items:center;justify-content:center}

  /* ── Читаемость и попадание пальцем (MOBILE-SPEC) ──────────────────
     Замер на живом проде 26.08: надпись-кикер «Cookie» набрана 9.5px,
     подписи кнопок «Принять» / «Только необходимые» — 10.5px, а ссылки
     на политики имеют высоту 16px при норме 44. Порог читаемости —
     13px.

     Само по себе это мелочь на вид, но лист согласия — ПЕРВОЕ, что
     видит человек на входе, до кабинета и до логина, и он же
     единственное место, где даётся выбор по данным. Отказ («Только
     необходимые») обязан читаться и нажиматься не хуже согласия, иначе
     выбор формальный.

     Моноширинный капслок разрежен на .13em, поэтому вместе с размером
     ужимаем разрядку — иначе «Только необходимые» перестаёт помещаться
     в строку кнопки на 390px. Ссылкам даём высоту нажатия и забираем
     её обратно отрицательным полем, чтобы ряд не разъехался. */
  .cns__kicker{font-size:13px;letter-spacing:.1em}
  .cns__row .btn{font-size:13px;letter-spacing:.08em}
  .cns__links a{font-size:13px;letter-spacing:.08em;
                min-height:44px;display:inline-flex;align-items:center;
                padding:12px 0;margin:-12px 0}
  .cns__note{font-size:13px;letter-spacing:.08em}
  /* Здесь лист занимает всю ширину, и кнопка поддержки оказывается прямо
     на нём: поднимаем её ровно на высоту листа. */
  html.cns-open .sup__go{bottom:calc(16px + var(--cns-h,0px));transition:bottom .4s var(--ease-out)}
}

@media(prefers-reduced-motion:reduce){
  .cns{transition:none;transform:none}
  html.cns-open .sup__go{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   РЕГИСТР И ПЛОТНОСТЬ — как в кабинете.
   Согласие на cookie — первый экран, который видит человек, и он был
   набран капслоком целиком: заголовок, объяснение, обе ссылки на
   политики и кнопка. Целая ширма прописных букв на входе читается как
   предупреждение об опасности, а не как формальность на один клик.
   Текст не меняется — меняется только его подача.
   ══════════════════════════════════════════════════════════════════ */
.cns__h, .cns__links a, .cns__links, .cns__btn, .cns__note {
  text-transform: none;
  letter-spacing: 0;
}
.cns__links a { font-size: 12.5px; }
.cns__btn { font-family: var(--sw-text); font-size: 14px; }