/* ============================================================================
   SYNDICATE — скин поверх Element Web.

   Это ОТКАТ к последней проверенной версии. Большой редизайн экрана входа
   (бренд-панель со словесным знаком, моно-кикеры, стилизованный футер) был
   написан, но не доехал: скин перестал грузиться, и экран поехал. Причину
   надо искать отдельно и на живой странице, а не наугад поверх рабочего.

   Почему этот файл вообще есть. Основную перекраску делает config.json:
   там переопределены базовые шкалы Compound (`--cpd-color-gray-*` — поверхности,
   `--cpd-color-green-*` — акцент), и за ними едет почти вся семантика разом.
   Сюда попадает ТОЛЬКО то, до чего токены не дотягиваются:

     · гарнитуры (это не цвет);
     · легаси-правила Element с ЗАХАРДКОЖЕННЫМИ цветами мимо Compound
       (карточка логина — там прямо в CSS `hsla(0,0%,100%,.59)`);
     · фирменные приёмы сайта, которых у Element нет как понятия (свечение акцента).

   Правило: если вещь можно докрутить токеном в config.json — крутить ТАМ.
   Каждое правило здесь придётся перепроверять после апгрейда Element.

   Палитра и радиусы взяты из боевых токенов сайта
   (syndicate-web-app/public/css/global/variables.css), не подобраны на глаз:
     --accent-rgb 0,247,255 · фон #07090c · панель #0f1216 · текст #e0e0e0
     радиусы 4 / 8 / 12 / 16 · граница rgba(255,255,255,.08)
   ============================================================================ */

:root {
  --sndct-accent-rgb: 0, 247, 255;
  --sndct-accent: rgb(var(--sndct-accent-rgb));

  --sndct-bg: #07090c;
  --sndct-panel: #0f1216;
  --sndct-panel-2: #141922;

  --sndct-teal-a04: rgba(var(--sndct-accent-rgb), 0.04);
  --sndct-teal-a08: rgba(var(--sndct-accent-rgb), 0.08);
  --sndct-teal-a12: rgba(var(--sndct-accent-rgb), 0.12);
  --sndct-teal-a20: rgba(var(--sndct-accent-rgb), 0.2);
  --sndct-teal-a35: rgba(var(--sndct-accent-rgb), 0.35);

  --sndct-line: rgba(255, 255, 255, 0.08);
  --sndct-glow-sm: 0 0 12px var(--sndct-teal-a12);
  --sndct-glow-md: 0 0 28px var(--sndct-teal-a12);

  --sndct-r-field: 8px;
  --sndct-r-box: 12px;
  --sndct-r-lg: 16px;
}

/* ── Гарнитуры ──────────────────────────────────────────────────────────────
   Файлы @font-face — в /branding/fonts/fonts.css, он подключается отдельным
   <link> перед этим файлом (см. scripts/brand-element.py).
   Сайт держит два канала: Wix Madefor Display — интерфейс, JetBrains Mono —
   код, тайминги, служебные подписи. Тот же расклад переносим сюда. */
:root,
.cpd-theme-dark,
.cpd-theme-light {
  --cpd-font-family-sans: "Wix Madefor Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cpd-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

body,
.mx_MatrixChat,
input,
textarea,
button,
select {
  font-family: var(--cpd-font-family-sans);
}

/* Тайминги сообщений — моно: цифры перестают «плясать» по ширине, и это ровно
   тот приём, которым на сайте набраны служебные подписи. */
.mx_MessageTimestamp {
  font-family: var(--cpd-font-family-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ═══ ЭКРАН ВХОДА ═══════════════════════════════════════════════════════════
   Разметка Element (её не трогаем, только красим):

     .mx_AuthPage
       .mx_AuthPage_modal              ← карточка
         .mx_AuthPage_modalBlur
         main.mx_AuthPage_modalContent ← flex-строка из двух колонок
           .mx_AuthHeader              ← ЛЕВАЯ: знак + выбор языка
             aside.mx_AuthHeaderLogo
             .mx_LanguageDropdown
           .mx_AuthBody                ← ПРАВАЯ: заголовок, сервер, форма
       footer.mx_AuthFooter

   Element красит карточку `hsla(0,0%,100%,.59)` — белым на 59%, захардкожено
   мимо Compound, токенами не лечится. На тёмной теме это серая плашка,
   на которой неоновый знак выглядит как ошибка вёрстки. */

.mx_AuthPage {
  background-color: var(--sndct-bg);
}

.mx_AuthPage_modal,
.mx_AuthPage_modalContent {
  background-color: transparent !important;
}

.mx_AuthPage_modal {
  position: relative;
  border-radius: var(--sndct-r-lg);
  background-color: rgba(10, 13, 17, 0.72) !important;
  box-shadow: var(--sndct-glow-md), 0 28px 70px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  overflow: hidden;
}

/* Маскированная светящаяся кромка — приём с `vf-header` Витрины: градиент
   рисуется в padding-box и вырезается маской, поэтому светится только край
   и только с одной стороны. Обычный border так не умеет. */
.mx_AuthPage_modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    var(--sndct-teal-a35) 0%,
    var(--sndct-teal-a08) 38%,
    rgba(255, 255, 255, 0.06) 62%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── Левая колонка: бренд-панель ─────────────────────────────────────────── */
.mx_AuthHeader {
  position: relative;
  justify-content: space-between;
  padding: 2.2rem 1.6rem 1.4rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--sndct-teal-a08), transparent 70%),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset -1px 0 0 var(--sndct-line);
}

.mx_AuthHeaderLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

.mx_AuthHeaderLogo img {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 0 18px var(--sndct-teal-a35));
}

/* Словесный знак. Текстом из CSS, а не картинкой: в <img> шрифты страницы
   не наследуются, а тащить Wix Madefor внутрь SVG ради одного слова — лишние
   килобайты на каждой загрузке.
   Двухцветность «SYN|DICATE» сделана градиентом с ЖЁСТКОЙ остановкой на 34%
   (3 буквы из 9) и background-clip:text — один текстовый узел двумя цветами
   иначе не покрасить. Меняешь слово — пересчитай процент. */
.mx_AuthHeaderLogo::after {
  content: "SYNDICATE";
  font-family: var(--cpd-font-family-sans);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--sndct-accent) 0 34%, #e8eef0 34% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px var(--sndct-teal-a20));
}

.mx_AuthBody_language,
.mx_AuthHeader .mx_Dropdown {
  font-family: var(--cpd-font-family-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Правая колонка: форма ───────────────────────────────────────────────── */
.mx_AuthBody {
  background-color: rgba(7, 9, 12, 0.55);
  padding: 2.2rem 2rem;
}

.mx_AuthBody h1 {
  font-family: var(--cpd-font-family-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Кикер над заголовком — та же сетка моно-микрозаголовков, что и секции
   на дизайн-странице сайта, чтобы экран читался как её продолжение. */
.mx_AuthBody h1::before {
  content: "01 · Доступ";
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--cpd-font-family-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 247, 255, 0.55);
}

/* «Домашний сервер» — служебная подпись, а не заголовок */
.mx_ServerPicker_title,
.mx_ServerPicker .mx_ServerPicker_desc {
  font-family: var(--cpd-font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(224, 224, 224, 0.38);
}

.mx_ServerPicker_server {
  font-family: var(--cpd-font-family-mono);
  color: var(--sndct-accent);
  letter-spacing: 0.04em;
}

.mx_AuthBody_changeFlow {
  font-size: 12px;
  color: rgba(224, 224, 224, 0.5);
}

.mx_AuthBody_changeFlow a {
  color: var(--sndct-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--sndct-teal-a35);
}

.mx_AuthBody_changeFlow a:hover {
  text-shadow: 0 0 12px var(--sndct-teal-a35);
}

/* ── Футер страницы входа ────────────────────────────────────────────────────
   Дефолт — три подчёркнутые ссылки 15px в ряд. Приводим к микрозаголовкам
   сайта: моно, капс, разрядка, точка-разделитель акцентом.
   Ссылки без классов, поэтому селектор по вложенности — при апгрейде Element
   это первое место, где может отвалиться. */
.mx_AuthFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-bottom: 1.6rem;
}

.mx_AuthFooter a {
  position: relative;
  font-family: var(--cpd-font-family-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(224, 224, 224, 0.42);
  padding: 0.35rem 0.9rem;
  transition: color 200ms ease, text-shadow 200ms ease;
}

/* разделитель — псевдоэлемент, в разметку Element не лезем */
.mx_AuthFooter a + a::before {
  content: "·";
  position: absolute;
  left: -0.15em;
  color: var(--sndct-teal-a35);
  letter-spacing: 0;
}

.mx_AuthFooter a:hover,
.mx_AuthFooter a:focus-visible {
  color: var(--sndct-accent);
  text-shadow: 0 0 12px var(--sndct-teal-a35);
  text-decoration: none;
}

/* ── Мобилка: колонки в столбик, бренд-панель ужимается ─────────────────── */
@media (max-width: 640px) {
  .mx_AuthPage_modalContent {
    flex-direction: column;
  }

  .mx_AuthHeader {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    box-shadow: inset 0 -1px 0 var(--sndct-line);
  }

  .mx_AuthHeaderLogo {
    flex-direction: row;
    gap: 0.6rem;
  }

  .mx_AuthHeaderLogo img {
    width: 40px;
    height: 40px;
  }

  .mx_AuthHeaderLogo::after {
    font-size: 1.05rem;
  }

  .mx_AuthBody {
    padding: 1.4rem 1.2rem 1.8rem;
  }

}

/* ── Акцент ─────────────────────────────────────────────────────────────────
   Свечение оставлено ТОЛЬКО на наведении. Постоянный ореол на каждой
   акцентной кнопке в списке комнат и на панелях складывался в мельтешение:
   заливка #00F7FF сама по себе яркая, и подсвечивать её ещё и тенью —
   перебор. Сама заливка приглушена до #0FC4D1 в config.json; чистый #00F7FF
   остался там, где он тонкий: текст, иконки, кромки. */
.mx_AccessibleButton_kind_primary:hover,
button[data-kind="primary"]:hover {
  box-shadow: 0 0 14px var(--sndct-teal-a20);
}

/* ── Поверхности ────────────────────────────────────────────────────────────
   Шкала gray из config.json уже задала базовые фоны; здесь только хайрлайны,
   которых у Compound нет отдельным токеном. */
.mx_RoomView_body,
.mx_RoomHeader {
  border-color: var(--sndct-line);
}

.mx_RoomHeader {
  box-shadow: inset 0 -1px 0 var(--sndct-line);
}

/* активная комната в списке — тонкая акцентная кромка слева, как `sn-list-row` */
.mx_RoomTile[aria-selected="true"],
.mx_RoomTile_selected {
  box-shadow: inset 2px 0 0 var(--sndct-accent);
}

/* ── Композер ───────────────────────────────────────────────────────────────
   Поле ввода — главный элемент экрана; на сайте такие всегда с видимой
   границей и фокус-свечением, а не слитые с фоном. */
.mx_MessageComposer {
  border-radius: var(--sndct-r-box);
  border: 1px solid var(--sndct-line);
  background-color: rgba(255, 255, 255, 0.02);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.mx_MessageComposer:focus-within {
  border-color: var(--sndct-teal-a35);
  box-shadow: var(--sndct-glow-sm);
}

/* ── Скроллбары ─────────────────────────────────────────────────────────────
   Дефолтные светлые полосы выбиваются из тёмной панели. */
* {
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--sndct-r-field);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--sndct-teal-a35);
}

*::-webkit-scrollbar-track {
  background: transparent;
}