/* ── alerts.css — the Alerts page (UI 7.0) ──
   A sortable table on the desk. On a phone each alert is a notification:
   what happened, why (three lines, tap to read all), when and where, and
   the two things you can do about it. Unread carries the accent on its edge. */
/* Section switch above the Critical / Activity tabs (Accounts / Strategy /
   System, from the server's `scope`). Scrolls sideways on a narrow phone. */
.al-sections { margin-bottom: var(--gap); }
.al-sections .tabs { overflow-x: auto; scrollbar-width: none; }

@media (max-width: 640px) {
  #alertsBody tr { row-gap: 4px; }
  #alertsBody tr.unread { box-shadow: inset 2px 0 0 var(--accent); }
  #alertsBody tr:not(.unread) td.pri { font-weight: 500; color: var(--text-2); }
  #alertsBody td.pri .side, #alertsBody td.pri .qty { font-size: 11.5px; }
  #alertsBody td.reason.wide { max-width: none; font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #alertsBody td.err.reason.wide { color: var(--text-2); }
  #alertsBody tr.expanded td.reason.wide { display: block; -webkit-line-clamp: unset; }
  #alertsBody td.meta b { font-weight: 500; }
  #alertsBody td.actions .btn { min-width: 0; padding: 0 12px; border-color: transparent; background: none; color: var(--muted); }
  #alertsBody td.actions .btn:last-child { color: var(--text-2); }
  #page-alerts .tabbar-end .btn, #page-alerts .tabbar-end .chip { height: 40px; }
}