/* Центр алертов. Живёт на тех же токенах, что портфель и избранное
   (переменные объявлены на `.pf3`), поэтому своей палитры здесь нет.

   Раскладка нарочно не таблица котировок: здесь не сравнивают числа по
   колонкам, а читают строку целиком - «что, при каком условии, в каком
   состоянии». Поэтому строки высокие и без моноширинных столбцов. */

.al-journal { margin-bottom: 14px; }
.al-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.al-h h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }

.al-evs { list-style: none; margin: 0; padding: 0; }
.al-ev {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: 13.5px;
}
.al-ev:first-child { border-top: 0; }
.al-ev-t { flex: 1; min-width: 0; }
/* Непрочитанное помечаем точкой, а не цветом всей строки: цвет в списке,
   где все строки одинаково важны, читается как тревога. */
.al-ev.unread .al-ev-t { font-weight: 600; position: relative; padding-left: 14px; }
.al-ev.unread .al-ev-t::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc);
}
.al-ev-d { color: var(--ink3); font-size: 12px; white-space: nowrap; }

.al-list { padding: 0 14px 4px; }
.al-row {
  display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) 150px 130px 150px;
  align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.al-row:last-child { border-bottom: 0; }
.al-head {
  padding: 10px 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line);
}
.al-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.al-name a { color: inherit; text-decoration: none; }
.al-name a:hover { color: var(--acc); }
.al-sub { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
.al-cond { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Состояние - словами и одним цветом. Три оттенка достаточно: ждёт, сработал,
   молчит. Больше цветов в списке означало бы, что каждый надо запоминать. */
.al-state { font-size: 13px; font-weight: 600; }
.al-state.wait { color: var(--ink2); }
.al-state.fired { color: var(--acc); }
.al-state.paused { color: var(--ink3); text-decoration: line-through;
                   text-decoration-thickness: 1px; text-underline-offset: 2px; }

.al-ch { font-size: 12.5px; color: var(--ink3); }
.al-act { display: flex; gap: 7px; justify-content: flex-end; }

.al-chips { margin-bottom: 0; }
.al-quota { margin-left: auto; font-size: 12px; color: var(--ink3); display: inline-flex;
            align-items: center; gap: 7px; }

@media (max-width: 860px) {
  /* На телефоне строка превращается в карточку: пять колонок в 375 пикселях
     сжимаются в кашу, а читать здесь надо предложение, а не столбик. */
  .al-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; }
  .al-head { display: none; }
  .al-cond { grid-column: 1; font-size: 13.5px; }
  .al-state { grid-column: 2; grid-row: 1; text-align: right; }
  .al-ch { grid-column: 1; }
  .al-act { grid-column: 2; grid-row: 3; }
}