/* ---------- lists, notes, banners ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.li:first-child { padding-top: 2px; }
.li:last-child { border-bottom: 0; padding-bottom: 0; }
.li .grow { flex: 1; min-width: 0; }
.li .when { width: 56px; flex: none; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.note { font-size: 12.5px; color: var(--ink-3); }
.banner { display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.banner.warn { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); }
.banner.crit { border-color: color-mix(in srgb, var(--crit) 50%, var(--line)); }
.banner.good { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.banner .grow { flex: 1 1 240px; min-width: 0; }
.banner svg { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--info); }
.banner.warn svg { color: var(--warn); } .banner.crit svg { color: var(--crit); } .banner.good svg { color: var(--good); }
.obs { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.obs:last-child { border-bottom: 0; }
.obs::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex: none; }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink-strong); margin-bottom: 4px; font-size: 15px; font-weight: 500; }