/* Оформление снято один-в-один с макета Claude Design («Мониторинг серверов»
   и соседние экраны). Макет свёрстан инлайновыми стилями, и мы их сохраняем в
   шаблонах дословно — так «точь-в-точь» проверяется глазами, а не доверием к
   переписанным классам.

   Здесь остаётся ровно то, чего инлайн не умеет: глобальные правила из
   <helmet>, медиазапросы и наведение. В макете наведение записано атрибутом
   `style-hover`, которого в браузере нет; каждый такой атрибут превращён в
   класс `.h-*` с тем же набором свойств. */

body {
  margin: 0;
  background: #0b0d0c;
  /* Шрифт для эмодзи назван явно и стоит ПОСЛЕ основного. Без него браузер
     подбирает запасной сам и на части систем берёт одноцветный символьный
     шрифт: ☘ и ⚔ в MOTD выходят белыми буквами вместо картинок. Само по себе
     это половина дела — вторая половина в `web/render.py`, где символу
     дописывается указание цветного начертания. */
  font-family: 'Exo 2', system-ui, 'Apple Color Emoji', 'Segoe UI Emoji',
               'Noto Color Emoji', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #2ecc71; text-decoration: none; }
a:hover { color: #6fe49c; }
::selection { background: rgba(46, 204, 113, .28); }

@keyframes pulseDot { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ── Наведение (бывшие style-hover макета) ─────────────────────────────────── */

/* Пункт меню и прочий приглушённый текст, который на наведении становится
   основным. */
.h-soft:hover { color: #e9ede9 !important; }

/* Тёмная плашка-кнопка: #1b1f1c → #232823. Самый частый случай в макете. */
.h-dim:hover { background: #232823 !important; }
.h-dim-w:hover { background: #232823 !important; color: #fff !important; }

/* Зелёная кнопка действия. Цвет текста задаётся повторно: у ссылок-кнопок
   иначе сработает общее правило `a:hover`. */
.h-green:hover { background: #48dd88 !important; color: #08150d !important; }

/* Пилюля популярного запроса. */
.h-chip:hover { background: #243027 !important; color: #fff !important; }

/* Заголовок карточки: наследует цвет текста, зеленеет на наведении. */
.h-title:hover { color: #2ecc71 !important; }

/* Ссылки подвала и прочий мелкий приглушённый текст. */
.h-foot:hover { color: #c9d2cb !important; }

/* Кнопка «Обзор сервера» — контур вместо заливки. */
.h-outline:hover { color: #fff !important; box-shadow: inset 0 0 0 1px #3a423c !important; }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 940px) {
  article { display: flex !important; flex-direction: column !important; }
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 620px) {
  h1 { font-size: 26px !important; letter-spacing: -.5px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  body { font-size: 15px; }
  input, textarea { min-width: 0 !important; }
  p { overflow-wrap: anywhere; }
  button, a { white-space: nowrap; }
  [data-tabs] { overflow-x: auto !important; scrollbar-width: none; max-width: 100%; }
  [data-tabs] > * { flex: none !important; }
  article { padding: 16px !important; gap: 16px !important; }
  article > div:first-child { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
  article > div:first-child > button { margin-left: auto; }
  article h3 { font-size: 19px !important; }
}

@media (max-width: 460px) {
  header nav { display: none !important; }
}

/* ── Состояния, которыми в макете заведовал DCLogic ────────────────────────── */

/* `<sc-if>` разворачивается в скрытый блок: раскрытием заведует app.js. */
[data-collapse] { display: none; }
[data-collapse].open { display: flex; }
[data-collapse].open-block { display: block; }

/* Подложка, гасящая открытое меню кликом мимо. */
.menu-scrim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; display: none; }
.menu-scrim.open { display: block; }

/* Описание в карточке листинга.

   В макете под него отведены две-три строки, и текст там написан под этот
   размер. У нас описание приходит с мониторинга-источника как есть: у трети
   каталога это простыня на два экрана, которая растягивает карточку и рвёт
   ритм списка. Обрезаем визуально, а не в Python: в разметке остаётся весь
   текст — он нужен поисковику и превращается в сниппет выдачи.

   `server_text.short_text` заведён ровно под это (см. ops/schema.sql): когда
   переписанные тексты появятся, обрезка станет страховкой, а не основным
   механизмом. */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

/* Название сервера. Владельцы пишут в него всё подряд — режимы, эмодзи и
   восклицательные знаки; рекорд каталога это 96 символов. В макете под
   заголовок отведена одна строка, и без ограничения такая карточка ломает
   сетку списка. */
h3.clamp { overflow-wrap: anywhere; }

/* ── Логотип: крипер-радар ─────────────────────────────────────────────────── */

    /* Размер вычисляется только из аргумента макроса, а SVG заполняет квадрат. */
    .logo-minecraft-radar {
      display: inline-block;
      width: var(--logo-size);
      height: var(--logo-size);
      overflow: hidden;
      vertical-align: middle;
      line-height: 0;
      background: #2ecc71;
    }

    .logo-minecraft-radar__svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Центр SVG совпадает с центром радара, а steps(16) даёт цифровой ритм. */
    .logo-minecraft-radar__sweep {
      transform-box: view-box;
      transform-origin: 50% 50%;
      animation: logo-minecraft-radar-sweep 3.2s steps(16, end) infinite;
    }

    @keyframes logo-minecraft-radar-sweep {
      from { transform: rotate(0turn); }
      to { transform: rotate(1turn); }
    }

    /* При reduced motion развёртка остаётся видимой, но неподвижной. */
    @media (prefers-reduced-motion: reduce) {
      .logo-minecraft-radar__sweep {
        animation: none;
      }
    }


/* ── Эмодзи в моноширинных плашках ────────────────────────────────────────────
   Адреса, версии и MOTD набраны 'JetBrains Mono' инлайновым стилем прямо в
   вёрстке (так перенесён макет). Эмодзи в этом шрифте нет вовсе, и запасной
   браузер выбирает сам — на части систем одноцветный. Дописать шрифт в сорок
   атрибутов style значило бы сорок мест, которые разойдутся; правило ниже
   делает то же самое одним. */
[style*="JetBrains Mono"], .motd__ln {
  font-family: 'JetBrains Mono', ui-monospace, 'Apple Color Emoji',
               'Segoe UI Emoji', 'Noto Color Emoji', monospace !important;
}