/* Live network status widget (assets/js/status.js). Mounts into any [data-status-panel].
   Uses the site tokens from site.css (--bg-2, --line, --accent, --live, --amber, --accent-2, --mono ...).
   Height is reserved before the data arrives (fixed row heights + min-height), so nothing shifts.
   Override per placement if needed: --ns-cols (columns) and --ns-rows (rows = ceil(nodes / cols)).
   11 nodes today: 6 rows of 2 below 480px, 4 rows of 3 above. */

[data-status-panel] {
  --ns-cols: 2;
  --ns-rows: 6;
  --ns-row: 46px;
  --ns-gap: 8px;
  display: block;
  /* border 2 + padding 28 + head 20 + 12 + rows + 12 + foot 18 */
  min-height: calc(92px + var(--ns-rows) * (var(--ns-row) + var(--ns-gap)) - var(--ns-gap));
}
@media (min-width: 480px) {
  [data-status-panel] { --ns-cols: 3; --ns-rows: 4; }
}

.ns {
  box-sizing: border-box;
  min-height: inherit;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 4px);
  background:
    linear-gradient(var(--grid, transparent) 1px, transparent 1px) 0 0 / 100% 12px,
    var(--bg-2);
  font-family: var(--mono);
  color: var(--ink-2);
  position: relative;
}
/* HUD corner brackets */
.ns::before, .ns::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border: 0 solid var(--accent);
}
.ns::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ns::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.ns-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 20px; margin: 0 0 12px; overflow: hidden;
  font: 600 0.75rem/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.ns-title { color: var(--accent); }
.ns-count { color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; }
.ns-count b { color: var(--ink); font-weight: 700; }
@media (max-width: 399px) { .ns-head { letter-spacing: 0.03em; } }
@media (max-width: 359px) { .ns-word { display: none; } }
.ns-lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.ns[data-state="ok"] .ns-lamp { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.ns[data-state="degraded"] .ns-lamp { background: var(--amber); }
.ns[data-state="error"] .ns-lamp { background: transparent; border: 1.5px solid var(--accent-2); }

.ns-body {
  height: calc(var(--ns-rows) * (var(--ns-row) + var(--ns-gap)) - var(--ns-gap));
  overflow: hidden;
}
.ns-grid {
  display: grid; grid-template-columns: repeat(var(--ns-cols), minmax(0, 1fr));
  grid-auto-rows: var(--ns-row); gap: var(--ns-gap);
  margin: 0; padding: 0; list-style: none;
}
.ns-grid li { min-width: 0; }
.ns-node {
  box-sizing: border-box; display: grid; grid-template-rows: 18px 16px; align-content: center; row-gap: 2px;
  height: var(--ns-row); padding: 0 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius, 4px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: inherit; text-decoration: none;
}
a.ns-node { transition: border-color 0.15s; }
@media (hover: hover) { a.ns-node:hover { border-color: var(--line-2); } a.ns-node:hover .ns-name { color: var(--accent); } }
.ns-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ns-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-2); box-sizing: border-box; }
.ns-name {
  font: 600 0.8125rem/18px var(--sans); color: var(--ink); letter-spacing: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ns-l2 {
  display: flex; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap;
  font: 500 0.75rem/16px var(--mono); letter-spacing: 0.04em; color: var(--ink-3);
}
.ns-state { font-weight: 700; text-transform: uppercase; }
.ns-ms { overflow: hidden; text-overflow: ellipsis; }

.ns-node[data-state="up"] .ns-dot { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent); }
.ns-node[data-state="up"] .ns-state { color: var(--live); }
.ns-node[data-state="slow"] .ns-dot { background: var(--amber); }
.ns-node[data-state="slow"] .ns-state { color: var(--amber); }
.ns-node[data-state="down"] { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
.ns-node[data-state="down"] .ns-dot { background: transparent; border: 1.5px solid var(--accent-2); }
.ns-node[data-state="down"] .ns-state { color: var(--accent-2); }

/* loading placeholders */
.ns-node.is-skel .ns-name, .ns-node.is-skel .ns-l2 span {
  color: transparent; background: var(--bg-3); border-radius: 3px;
}
.ns-node.is-skel .ns-name { width: 70%; height: 12px; }
.ns-node.is-skel .ns-l2 span { width: 45%; height: 10px; margin-top: 3px; }

.ns-msg {
  height: 100%; display: grid; place-content: center; text-align: center; gap: 4px;
  border: 1px dashed var(--line-2); border-radius: var(--radius, 4px);
  font: 500 0.8125rem/1.4 var(--mono); color: var(--ink-2); padding: 0 12px;
}
.ns-msg b { color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }

.ns-foot {
  height: 18px; margin: 12px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 0.75rem/18px var(--mono); color: var(--ink-3); letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: no-preference) {
  .ns[data-state="ok"] .ns-lamp { animation: ns-pulse 2.4s ease-in-out infinite; }
  @keyframes ns-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--live) 8%, transparent); } }
}

/* Per-card lamps: any element with data-status-slug="<slug>" gets data-state from the widget.
   Zero specificity (:where) so page styles can restyle it freely. Empty elements get a dot. */
:where([data-status-slug]) { display: inline-flex; align-items: center; gap: 6px; }
:where([data-status-slug]:empty)::before,
:where([data-status-slug].ns-auto)::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); box-sizing: border-box; flex: none;
}
:where([data-status-slug][data-state="up"].ns-auto)::before { background: var(--live); }
:where([data-status-slug][data-state="slow"].ns-auto)::before { background: var(--amber); }
:where([data-status-slug][data-state="down"].ns-auto)::before { background: transparent; border: 1.5px solid var(--accent-2); }
.ns-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }