/* clip the fixed-position reCAPTCHA challenge overlay without breaking sticky nav or vertical scroll */
html {
  overflow-x: clip;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Manrope", sans-serif;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
}

/* mono data / passport numbers / IDs */
.font-mono {
  font-feature-settings: "tnum" 1;
}

::selection {
  background: #ffe28a;
  color: #11151c;
}

/* reCAPTCHA (fixed 304px) can overflow narrow phones — scale it to fit */
@media (max-width: 400px) {
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
  }
}

@media (max-width: 350px) {
  .g-recaptcha {
    transform: scale(0.74);
  }
}

/* ---------------------------------------------------------------------------
   Полоса прокрутки — ЕДИНЫЙ вид в трёх продуктах (website, branding, SalesMap;
   решение пользователя 2026-08-11).

   Цвета записаны ЛИТЕРАЛАМИ, а не токенами, намеренно: наборы у продуктов свои
   (ink-300 = #9aa3b1 в website/branding, #aeb7c4 в SalesMap), и через токены
   полосы разъехались бы по оттенку — а вся суть правки в том, чтобы они
   выглядели одинаково. Меняя цвет, правь во всех трёх файлах.

   Ползунок нейтральный (серо-синий ink), а НЕ янтарный: на длинных таблицах
   кабинета фирменная полоса перетягивает внимание с данных.

   Рамка 2px цвета дорожки визуально сужает ползунок до 6px, но полоса
   сохраняет все 10px площади захвата курсором — тонкая полоса, в которую
   трудно попасть, хуже системной.

   Firefox понимает только `scrollbar-width`/`scrollbar-color`, WebKit/Blink —
   псевдоэлементы; вместе покрывают всё, что нас касается. Обе строки для
   Firefox наследуемые, поэтому хватает `html` — вложенные скроллящиеся блоки
   подхватят их сами. Дорожка НЕ прозрачная: на прозрачной в Chrome сквозь
   полосу просвечивает контент и ползунок теряется.
--------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #9aa3b1 #f7f9fa;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #f7f9fa;
}

::-webkit-scrollbar-thumb {
  background: #9aa3b1;
  border: 2px solid #f7f9fa;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7c8696;
}

/* Тёмные поверхности (сайдбар кабинета SalesMap, тёмные секции лендингов):
   светлый ползунок на ink-900 выглядит грязным пятном, поэтому своя пара
   цветов. Вешается классом на сам прокручиваемый элемент. */
.scrollbar-dark {
  scrollbar-color: #3e4855 #11151c;
}

.scrollbar-dark::-webkit-scrollbar-track,
.scrollbar-dark::-webkit-scrollbar-corner {
  background: #11151c;
}

.scrollbar-dark::-webkit-scrollbar-thumb {
  background: #3e4855;
  border-color: #11151c;
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: #5b6675;
}