/* Состояние системы — служебный экран администратора.

   Своим листом, а не куском `app.css`, по той же причине, что и почта: над
   разными разделами работают в несколько рук, а общий файл означает, что
   правки затирают друг друга. Заодно `app.css` не растёт: он и так грузится
   целиком ради любого экрана, а этот раздел открывают раз в неделю.

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

/* Подпись в шапке блока — откуда взяты его числа. Прижата вправо: это не
   продолжение названия, а сноска к нему. */
.sys-note { margin-left: auto; text-align: right; }

/* Полоска «докопано до начала». Число в ней приблизительное (считается по
   номерам писем в IMAP, а они идут с пропусками), поэтому и показано
   полоской: она честно отвечает «сколько осталось идти». */
.sys-bar {
  position: relative;
  height: 16px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.sys-bar__fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--accent-soft);
  border-right: 1px solid var(--accent);
  transition: width var(--speed, .18s) ease;
}
.sys-bar__text {
  position: relative;
  display: block; text-align: center;
  font-size: 11px; line-height: 16px; color: var(--text-soft);
}

/* Текст ошибки почтовой службы. Показываем как есть — «пароль не принят»
   чинится за минуту, — но в одну строку: иначе одна многословная ошибка
   растягивает всю таблицу и остальные семь ящиков уезжают с экрана.
   Целиком она в подсказке. */
.sys-error { max-width: 280px; }
.sys-error__text {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--red);
}

/* Сноска под блоком: то, что число само о себе не расскажет. */
.sys-foot { margin-top: 12px; line-height: 1.45; }

/* Последние строки журнала. Не журнал целиком — панель отвечает «есть или
   нет», разбираются всё равно в `docker logs`. */
.sys-log {
  margin-top: 14px; display: grid; gap: 6px;
  border-top: 1px solid var(--border); padding-top: 12px;
}
.sys-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sys-line__level {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 640; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 4px;
}
.sys-line__level.is-warn { background: var(--amber-soft); color: var(--amber); }
.sys-line__level.is-error { background: var(--red-soft); color: var(--red); }
.sys-line__text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Узкий экран.

   Здесь раньше стояло `max-width: 160px` с пояснением «на телефоне её всё
   равно читают подсказкой». Это было неверно: подсказка живёт по наведению, а
   наведения на сенсорном экране не бывает — ни разу. Текст ошибки ящика при
   окне в 132 точки прятал 252, строка журнала при окне в 127 — до 557, и
   прочитать, что случилось с почтой, с телефона было нельзя в принципе.
   Раздел админский, а админ смотрит его именно тогда, когда что-то легло, —
   и чаще всего не за столом.

   Поэтому на телефоне обрезка по ширине снята, а вместо неё — зажим по
   строкам: две-три строки видно всегда, остальное открывается нажатием
   (`is-open`, ставится в `health.js`). Таблица ящиков при этом остаётся
   таблицей: раскладывать её карточками — отдельная работа. */
@media (max-width: 640px) {
  .sys-error { max-width: none; }
  .sys-error__text {
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  .sys-note { display: none; }

  /* Метка уровня и время остаются в первой строке, текст уходит под них во
     всю ширину: рядом с «ERROR 07.09.26, 13:12» ему доставалось 127 точек из
     317, то есть три слова. */
  .sys-line { flex-wrap: wrap; row-gap: 2px; cursor: pointer; }
  .sys-line__text {
    flex: 1 1 100%;
    white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* Раскрытая строка показывает ругань целиком — с трассировкой в ней бывает
     и десять строк, но человек нажал именно затем, чтобы её прочитать. */
  .sys-line.is-open .sys-line__text { display: block; -webkit-line-clamp: none; }
}