/* /monitor: the real live health dashboard. Builds on the bento tiles in
   css/stats.css (.stats-bento, .stats-tile, .stats-kpi); only what is new
   lives here. No borders: fill, gap and radius only. */
#scene .monitor-hero { min-height:200px; }
#scene .monitor-hero-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#scene .monitor-live-chip { padding:5px 10px; border-radius:999px; background:hsl(var(--success, var(--primary)) / .16); color:hsl(var(--success, var(--primary))); font:600 10.5px/1 var(--mono-font,ui-monospace,monospace); letter-spacing:.06em; text-transform:uppercase; }
#scene .monitor-live-chip.is-stale { background:hsl(var(--warning) / .16); color:hsl(var(--warning)); }
#scene .monitor-live { display:inline-flex; align-items:center; gap:8px; font:500 12px/1 var(--mono-font,ui-monospace,monospace); color:var(--bento-muted); font-variant-numeric:tabular-nums; }
#scene .monitor-live i { width:8px; height:8px; border-radius:50%; background:hsl(var(--success, var(--primary))); box-shadow:0 0 0 0 hsl(var(--success, var(--primary)) / .5); animation:monitor-pulse 2s ease-out infinite; }
@keyframes monitor-pulse { 0% { box-shadow:0 0 0 0 hsl(var(--success, var(--primary)) / .5); } 70%,100% { box-shadow:0 0 0 8px hsl(var(--success, var(--primary)) / 0); } }
#scene .monitor-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#scene .monitor-actions .stats-monitor-link { margin:0; min-height:40px; box-sizing:border-box; }

#scene .stats-kpi.is-warn { background:hsl(var(--warning) / .1); }

/* Quorums */
#scene .monitor-quorums { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:14px; }
#scene .monitor-quorums li.is-down { background:hsl(var(--warning) / .1); border-radius:12px; padding:8px; margin:-8px; }
#scene .monitor-q-head { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 4px; }
#scene .monitor-q-name { display:flex; align-items:baseline; gap:8px; }
#scene .monitor-q-name b { font:600 15px/1 var(--font-sans,sans-serif); color:var(--bento-ink); }
#scene .monitor-q-name small { font:500 11px/1 var(--mono-font,ui-monospace,monospace); color:var(--bento-faint); }
#scene .monitor-q-val { font:600 13px/1 var(--mono-font,ui-monospace,monospace); color:var(--bento-ink); font-variant-numeric:tabular-nums; }
#scene .monitor-q-detail { font:500 11.5px/1.4 var(--mono-font,ui-monospace,monospace); color:var(--bento-faint); }

/* Nodes */
#scene .monitor-nodes { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#scene .monitor-nodes li { display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; background:var(--bento-track); transition:background-color .3s; }
#scene .monitor-nodes li.is-down { background:hsl(var(--warning) / .14); }
#scene .monitor-node-head { display:flex; align-items:center; gap:7px; margin:0; }
#scene .monitor-node-head b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font:600 12.5px/1 var(--mono-font,ui-monospace,monospace); color:var(--bento-ink); }
#scene .monitor-node-state { width:7px; height:7px; border-radius:50%; background:hsl(var(--success, var(--primary))); }
#scene .monitor-nodes li.is-down .monitor-node-state { background:hsl(var(--warning)); }
#scene .monitor-node-pct { font:500 11.5px/1 var(--mono-font,ui-monospace,monospace); color:var(--bento-muted); font-variant-numeric:tabular-nums; }
#scene .monitor-nodes small { font-size:11px; line-height:1.3; color:var(--bento-faint); }

@media (prefers-reduced-motion: reduce) {
  #scene .monitor-page .monitor-live i { animation:none; }
}

@media (max-width:1020px) {
  #scene .monitor-nodes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}