/* servers.css — только то, чего нет в основном стиле сайта.
   Все цвета берутся из переменных style.css, поэтому при редизайне сайта
   раздел перекрасится вместе с ним и не отстанет.
   Данные носят акцентный тон, текст — текстовые токены: цвет серии никогда
   не используется как цвет надписи. */

/* =========================================================================
   ИКОНКА СЕРВЕРА
   ========================================================================= */
/* =========================================================================
   ШАПКА КАРТОЧКИ
   ========================================================================= */
.srv-hero{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  background:var(--s-1); border:3px solid var(--line);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  padding:var(--sp-4); margin:var(--sp-4) 0;
}
.srv-hero-body{ flex:1 1 auto; min-width:0; }
.srv-motd{
  margin:0 0 var(--sp-2); color:var(--t-2);
  font-size:1rem; line-height:1.45; overflow-wrap:anywhere;
}
.srv-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.srv-addr{ flex:0 0 auto; }
.srv-addr .addr-row{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.srv-addr code{
  background:var(--s-3); color:var(--t-1);
  border:2px solid var(--line); padding:8px 12px;
  font-size:1.05rem; overflow-wrap:anywhere;
}
.lbl{
  display:block; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-3); margin-bottom:var(--sp-1);
}
@media(max-width:760px){
  .srv-hero{ flex-wrap:wrap; }
  .srv-addr{ flex:1 1 100%; }
}
/* =========================================================================
   ПЛИТКИ ПОКАЗАТЕЛЕЙ
   ========================================================================= */
/* =========================================================================
   ГРАФИКИ
   ========================================================================= */
.chart{ margin:var(--sp-5) 0; }
.chart figcaption{
  font-size:.85rem; color:var(--t-2); margin-bottom:var(--sp-2);
}
.chart figcaption .muted{ font-size:.85rem; }
.g-svg{
  display:block; width:100%; height:auto;
  background:var(--s-1); border:2px solid var(--line);
}
/* Разметка приглушена намеренно: сетка не должна спорить с данными */
.g-grid{ stroke:var(--line-soft); stroke-width:1; }
.g-tick{ fill:var(--t-3); font-size:11px; font-family:var(--font-body); }
.g-area{ fill:var(--brand); opacity:.16; }
.g-line{ fill:none; stroke:var(--brand-hi); stroke-width:2; stroke-linejoin:round; }
.g-dot{ fill:var(--brand-hi); stroke:var(--s-1); stroke-width:2; }
.g-hit{ fill:transparent; cursor:crosshair; }
.g-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:var(--s-3); color:var(--t-1);
  border:2px solid var(--line); padding:5px 9px;
  font-size:.82rem; white-space:nowrap;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.chart{ position:relative; }
/* --- суточный профиль --- */
.dayprofile{
  display:grid; grid-template-columns:repeat(24,1fr); gap:2px;
  align-items:end; height:140px;
  background:var(--s-1); border:2px solid var(--line); padding:var(--sp-2);
}
.dp-bar{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.dp-bar i{
  display:block; background:var(--brand); min-height:2px;
  border-radius:3px 3px 0 0;               /* скруглён только конец у данных */
}
.dp-bar.is-peak i{ background:var(--brand-hi); }
.dp-bar b{
  display:block; text-align:center; font-weight:400;
  font-size:.62rem; color:var(--t-3); margin-top:4px; min-height:.8em;
}
/* =========================================================================
   РАЗБИВКА БАЛЛА
   ========================================================================= */
.score-table{ width:100%; border-collapse:collapse; }
.minibar{
  display:inline-block; width:96px; height:10px; vertical-align:middle;
  background:var(--s-3); border:1px solid var(--line); margin-right:var(--sp-2);
}
.minibar i{ display:block; height:100%; background:var(--brand-hi); }
/* Узкие экраны: колонки делятся долями и обязаны поместиться в ширину.
   Полоска фиксированной ширины иначе распирает таблицу за край экрана,
   а прокрутки по горизонтали у страницы нет — «Вес» становился не виден. */
/* Минимум в 420px из style.css рассчитан на широкие таблицы в .table-wrap.
   Разбивка балла лежит без обёртки, и этот минимум выталкивал последний
   столбец за край. Селектор с типом — чтобы перебить .seo-section table. */
@media(max-width:640px){
  .seo-section table.score-table{ min-width:0; }
}
@media(max-width:520px){
  .score-table{ table-layout:fixed; font-size:.85rem; }
  .score-table th, .score-table td{ padding-right:6px; word-break:break-word; }
  .score-table th:last-child, .score-table td:last-child{ padding-right:0; text-align:right; }
  .minibar{ width:44px; margin-right:6px; }
}
/* =========================================================================
   СПИСОК СЕРВЕРОВ
   ========================================================================= */
.srv-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
/* Состояние передаётся не только цветом: рядом с точкой стоит само число
   или слово «офлайн», поэтому смысл читается и без различения оттенков. */
.srv-stat b.dot::before{
  content:''; display:inline-block; width:7px; height:7px;
  margin-right:6px; vertical-align:middle;
  background:var(--t-3);
}
@media(max-width:860px){
  .srv-row{ grid-template-columns:32px 48px minmax(0,1fr) 84px; row-gap:var(--sp-2); }
  .srv-stat:nth-of-type(2), .srv-stat:nth-of-type(3){ display:none; }
}
.muted{ color:var(--t-3); font-size:.9rem; }
.table-wrap{ overflow-x:auto; }
/* Час без измерений: пустое место, а не столбик нулевой высоты —
   иначе «не наблюдали» выглядит как «никого не было». */
.dp-bar.is-empty i{ background:none; min-height:0; }
.dp-bar.is-empty{ opacity:.5; }
/* Счётчик серверов в чипе фасета: подсказывает, есть ли смысл нажимать */
.cat-chip i{ font-style:normal; color:var(--t-3); font-size:.85em; }
/* Чип режима игры: отличается от версии тоном, чтобы два вида меток
   не сливались в одну кашу в строке списка. */
.mode-chip{
  display:inline-block; padding:3px 8px;
  background:var(--accent-soft, #22320f); border:1px solid var(--brand);
  color:var(--brand-hi); font-size:.78rem; text-decoration:none;
}
/* Сводка над списком описана в style.css вместе с медиазапросами.
   Копия без них жила здесь и, загружаясь последней, ломала перенос плиток
   на телефоне — правило намеренно не дублируем. */
.seo-section details{
  border:2px solid var(--line); background:var(--s-1);
  padding:var(--sp-3); margin-bottom:var(--sp-2);
}
.seo-section details summary{ cursor:pointer; color:var(--t-1); font-weight:600; }
.seo-section details p{ margin:var(--sp-2) 0 0; color:var(--t-2); }
/* Блок для владельца сервера: единственное место, где предложение хостинга
   уместно — человек смотрит на свой сервер и видит его аптайм. */
.owner-cta{ border-left:6px solid var(--brand); }
.owner-cta h3{ margin:0 0 var(--sp-2); color:var(--t-1); }
.owner-cta p{ margin:0; color:var(--t-2); }

/* правка 2026-09-08: сводка над списком описана в style.css вместе с
   медиазапросами; дубль отсюда убран, иначе на телефоне четыре плитки
   оставались в одну строку. */

/* Подпись под числом онлайна: когда сервер опрашивали в последний раз. */
.tile-note{ display:block; margin-top:4px; font-size:.78rem; color:var(--t-3); }

/* Вкладки периода над графиком. */
.chart-tabs{ display:flex; gap:6px; margin:var(--sp-3) 0 0; }
.chart-tabs .cat-chip{ cursor:pointer; font:inherit; }
.chart-tabs .is-cur{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* Свёрнутые списки ссылок под первым экраном. */
.nav-more{ margin:var(--sp-2) 0 0; }
.nav-more>summary{ cursor:pointer; color:var(--t-2); font-size:.9rem; padding:6px 0; }
.nav-more>summary:hover{ color:var(--t-1); }
.nav-more[open]>summary{ margin-bottom:var(--sp-1); }