/* Посадочные страницы: инфографика, таблицы разделов и FAQ.
   Отдельный файл, потому что карта этого не грузит: приложению нужны слои и панели,
   а тексту — полосы и таблицы. Все цвета и радиусы берутся токенами из style.css,
   своей палитры здесь нет, иначе тёмная тема разъедется. */

/* Дата обновления: поисковики читают её как подтверждение «сегодня», человек — как
   обещание, что цифры не прошлогодние. Ставится сразу под первым абзацем. */
.updated {
  margin: -12px 0 18px;
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ полосы наличия */

.fuelbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.fuelbar { display: flex; align-items: center; gap: 10px; }
.fuelbar .fuel-tag { flex: none; min-width: 52px; text-align: center; }

.fuelbar-num {
  flex: none;
  min-width: 84px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fuelbar-num small {
  display: block;
  font-size: 10.5px;
  font-weight: 450;
  color: var(--ink-4);
}

.bar {
  flex: 1;
  min-width: 0;               /* иначе сегменты раздувают строку по содержимому */
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
}

.bar i { display: block; height: 100%; }

.b-yes   { background: var(--sig-ok); }
.b-queue { background: var(--sig-queue); }
.b-low   { background: var(--sig-low); }
.b-no    { background: var(--sig-empty); }

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--ink-4);
}

.bar-legend span { display: inline-flex; align-items: center; gap: 5px; }

.bar-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
}

.bar-legend .b-yes::before   { background: var(--sig-ok); }
.bar-legend .b-queue::before { background: var(--sig-queue); }
.bar-legend .b-low::before   { background: var(--sig-low); }
.bar-legend .b-no::before    { background: var(--sig-empty); }
.bar-legend .b-idle::before  { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.bar-legend .b-yes, .bar-legend .b-queue, .bar-legend .b-low,
.bar-legend .b-no, .bar-legend .b-idle { background: none; }

/* ------------------------------------------------------------------- статусы связи */

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--ink-3);
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig-idle);
}

.pill[data-status="ok"]::before        { background: var(--sig-ok); }
.pill[data-status="throttled"]::before { background: var(--sig-queue); }
.pill[data-status="down"]::before      { background: var(--sig-empty); }
.pill[data-status="ok"],
.pill[data-status="throttled"],
.pill[data-status="down"] { color: var(--ink-2); }

/* ---------------------------------------------------------------------- таблицы */

/* Широкая таблица катается внутри своего контейнера, страница по горизонтали
   не едет: на 390px в ней 8 колонок. */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--ink-4);
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.tbl td { padding: 9px 12px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.tbl tbody tr:first-child td { border-top: none; }
.tbl tbody tr:hover td { background: var(--panel-2); }

.tbl-name { min-width: 190px; }
.tbl-name a { color: var(--ink); text-decoration: none; font-weight: 550; }
.tbl-name a:hover { text-decoration: underline; }
.tbl-name small { display: block; font-size: 11px; color: var(--ink-4); }

.tbl-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
}

.tbl-num small { display: block; font-size: 10.5px; font-weight: 450; color: var(--ink-4); }

.tbl td[data-status] { text-align: center; }

.tbl .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sig-idle);
  opacity: .35;
}

.tbl td[data-status="ok"] .dot        { background: var(--sig-ok); opacity: 1; }
.tbl td[data-status="throttled"] .dot { background: var(--sig-queue); opacity: 1; }
.tbl td[data-status="down"] .dot      { background: var(--sig-empty); opacity: 1; }

/* -------------------------------------------------------------------------- FAQ */

.faq-item { padding: 14px 0; border-top: 1px solid var(--hairline); }
.faq-item:first-of-type { border-top: none; padding-top: 0; }
.faq-item h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 5px; }
.faq-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------------------ график */

.chart {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 10px 12px;
}

.chart svg { display: block; width: 100%; height: auto; }

/* Линии различаются штрихом и подписью: единственный акцент на сайте занят зелёным
   «топливо есть», и подорожание бензина им красить нельзя. */
.chart .ln { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; }
.chart .ax { stroke: var(--hairline); stroke-width: 1; }
.chart .axl { fill: var(--ink-4); font-size: 10px; }
.chart .lbl { fill: var(--ink-3); font-size: 10.5px; font-weight: 600; }

/* ------------------------------------------------------------------- подвал разделов */

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
}

.foot-nav a { color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 560px) {
  .fuelbar-num { min-width: 62px; font-size: 12px; }
  .fuelbar .fuel-tag { min-width: 44px; }
  .tbl-name { min-width: 150px; }
  .tbl th, .tbl td { padding: 8px 10px; }
}