/* Логотип. Один файл на все страницы: витрину, вход, кабинет и админку.

   Раньше знак рисовали три разных класса — 28 и 30 пикселей, радиус 7 и 8,
   вес 700 и 800, фон то синий, то почти чёрный. Из-за этого буква на каждой
   странице выглядела по-своему.

   Правило простое и одно на всё:
     · знак и слово «MebelCRM» — одного цвета;
     · буква внутри знака — противоположного, на контрасте.
   На светлом это чёрный знак с белой буквой, на тёмном — наоборот.
   Меняется двумя переменными ниже, и меняется везде. */

:root {
  /* Цвет знака — это цвет текста самой страницы, буква внутри — цвет её фона.
     Отсюда и правило «фон и шрифт одного цвета, буква на контрасте»: оно
     держится само, без отдельных настроек на светлую и тёмную тему.

     На витрине текст чёрный, фон белый — знак чёрный, буква белая.
     В кабинете при тёмной теме текст светлый, фон тёмный — знак белый,
     буква чёрная. Запасные значения на случай страницы без своих цветов. */
  --mark-bg: var(--ink, #000000);
  --mark-ink: var(--surface, var(--paper, #FFFFFF));
}

/* ---- знак ----
   Размер, радиус, вес и цвет заданы здесь и только здесь. Три прежних
   класса (.auth-mark, .app-mark, .pub-mark) оставлены псевдонимами, чтобы
   не искать по шаблонам каждое место разом. */
.mark, .auth-mark, .app-mark, .pub-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  /* буква стоит на оптической середине: у заглавной нет нижних выносных,
     и без сдвига она кажется приклеенной к низу */
  padding-bottom: 1px;
}
.mark-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.mark-lg { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }

/* ---- знак со словом ---- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* слово того же цвета, что и знак: это одно целое, а не два элемента */
  color: var(--mark-bg);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand:hover { text-decoration: none; color: var(--mark-bg); }
.brand-name { white-space: nowrap; }

/* На тёмной подложке — те же правила наоборот: знак и слово белые,
   буква внутри чёрная. Иначе чёрный знак на синей панели входа
   превращается в дыру */
.mark-dark { background: #FFFFFF; color: #000000; }
.brand-dark, .brand-dark:hover { color: #FFFFFF; }

/* ---- полоса про кукисы ----
   Всё оформление своё, ничего не берём у кабинета и у витрины: у них разные
   наборы классов, и кнопка .btn на витрине превращалась в серую системную —
   на одной странице аккуратная, на другой нет. Цвета — те же две переменные,
   что у логотипа, поэтому полоса всюду выглядит одинаково. */
.cookie-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--line, var(--rule, #E3E8EF));
  border-radius: 14px;
  background: var(--surface, var(--paper, #FFFFFF));
  box-shadow: 0 10px 30px rgba(11, 18, 32, .18);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink, #16202E);
}
.cookie-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-ok {
  flex: none;
  padding: 9px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity .15s;
}
.cookie-ok:hover { opacity: .85; }
.cookie-ok:active { transform: translateY(1px); }
.cookie-ok:focus-visible { outline: 2px solid var(--mark-bg); outline-offset: 2px; }

/* Пока полоса видна, странице нужно место снизу: иначе она закрывает кнопку
   «Создать кабинет» — ту самую, ради которой человек пришёл.

   Отступ вешаем не на body: страница входа — сетка во всю высоту экрана,
   и лишний отступ у body делал её прокручиваемой, а логотип уезжал наверх
   за край. Поэтому витрине — отступ страницы, входу — отступ внутри колонки
   с формой. */
body.pub.has-cookie-bar { padding-bottom: 96px; }
.has-cookie-bar .auth-box { padding-bottom: 88px; }

@media (max-width: 620px) {
  .cookie-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .cookie-ok { width: 100%; padding: 12px 18px; }
  body.pub.has-cookie-bar { padding-bottom: 170px; }
  .has-cookie-bar .auth-box { padding-bottom: 160px; }
}