/* Copyright (C) IPng Networks GmbH, 2026
   SPDX-License-Identifier: Apache-2.0 */
:root {
  --bg: #fff; --fg: #1b1f24; --muted: #667; --line: #d8dbe0; --code: #f3f4f6;
  --g: #1f9d55; --lg: #8fd19e; --a: #e3a008; --r: #d63c3c; --nd: #c9ccd1; --m: #6b8bd6;
  --net: #f08c00; --proto: #c92a2a; --sig: #7b2cbf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417; --fg: #e4e6ea; --muted: #99a; --line: #2c3036; --code: #1d2025;
    --g: #2fb36a; --lg: #2e6b40; --a: #c88a06; --r: #e05252; --nd: #3a3f46; --m: #7f9ee6;
    --net: #f59f00; --proto: #fa5252; --sig: #b57edc;
  }
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1200px; padding: 0 16px; background: var(--bg); color: var(--fg);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
header, footer { position: sticky; z-index: 1; background: var(--bg); }
header { top: 0; border-bottom: 1px solid var(--line); }
header h1 { margin: .4em 0; }
main { flex: 1; padding-bottom: 1em; }
a { color: inherit; }
h1 a { text-decoration: none; }
small, footer { color: var(--muted); }
footer { bottom: 0; padding: .6em 0; border-top: 1px solid var(--line); }
code { background: var(--code); padding: 1px 4px; border-radius: 3px; word-break: break-all; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
td small { white-space: normal; }
td small.ago, td small.keys { white-space: nowrap; }
th a { text-decoration: none; }
summary { cursor: pointer; color: var(--muted); }
tr.retired, tr.disabled { opacity: .6; }
.badge { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 12px; color: #fff; background: var(--r); }
.badge.ok { background: var(--g); }
.badge.nd, .badge.retired, .badge.disabled, .badge.pending, .badge:empty { background: var(--nd); color: var(--fg); }
svg.spark { display: block; max-width: 100%; height: auto; }
svg .g { fill: var(--g); } svg .lg { fill: var(--lg); } svg .a { fill: var(--a); }
svg .r { fill: var(--r); } svg .nd { fill: var(--nd); } svg .m { fill: var(--m); } svg .mx { fill: var(--m); opacity: .5; }
svg .base { fill: var(--line); }
svg .q { fill: var(--fg); opacity: .6; }
svg text { fill: var(--muted); font: 10px system-ui, sans-serif; }
svg text.ql { fill: var(--fg); }
svg .ok { fill: var(--g); } svg .net { fill: var(--net); } svg .proto { fill: var(--proto); } svg .sig { fill: var(--sig); }
.hz { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.hz a { padding: 3px 12px; text-decoration: none; border-left: 1px solid var(--line); }
.hz a:first-child { border-left: 0; }
.hz a.on { background: var(--fg); color: var(--bg); }
.note-mark { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 11px; font-weight: bold;
  background: var(--a); color: #000; cursor: help; }
.notes { margin: 0 0 8px; padding: 6px 10px 6px 28px; border-left: 3px solid var(--a); background: var(--code); }
.legend { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.key { display: inline-block; width: 10px; height: 4px; margin: 0 4px 2px 10px; vertical-align: middle; }
.key:first-child { margin-left: 0; }
.key.ok { background: var(--g); } .key.net { background: var(--net); } .key.proto { background: var(--proto); }
.key.sig { background: var(--sig); } .key.nd { background: var(--nd); }
.strip { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.strip span { width: 7em; color: var(--muted); flex: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; }