/* screens-netmon-topology.css · NETMON ผังเครือข่าย /netmon/topology (M15 lane N1 · 07-space-netmon.md §2 · §5.4 · DESIGN-TOKENS.md)
   สีจากตัวแปรของชุดสีเท่านั้น (สว่าง/มืดตามชุดสี) · สถานะ = รูปทรง + สี (▼ ล่ม · ◆ ช้า · ● ปกติ · ○ ไม่มีข้อมูล · ? ยังไม่อยู่ในทะเบียน) ·
   ลิงก์ล่ม = เส้นประหนา (ไม่ใช้สีอย่างเดียว) · ไม่มี style ในหน้า (CSP) · จอ 375px เลื่อนแนวนอนเฉพาะกรอบผัง ไม่ใช่ทั้งหน้า */

.nm-topo-count { margin: 0 0 8px; font-weight: 600; }
.nm-topo-fig { margin: 0 0 12px; padding: 8px; min-width: 0; }
.nm-topo-wrap { overflow: auto; max-width: 100%; max-height: 78vh; }
.nm-topo-wrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nm-topo { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.nm-topo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.nm-topo-h2 { display: inline; margin: 0; font-size: 16px; }
.nm-topo-det > summary { cursor: pointer; min-height: 28px; padding: 6px 0; }
.nm-inline { display: inline; margin: 0; }

/* เส้น */
.nm-te { fill: none; stroke: var(--ink2); stroke-width: 1.4; opacity: .7; }
.nm-te-up { stroke: var(--teal-fg); stroke-width: 1.2; opacity: .5; }
.nm-te-down { stroke: var(--p1); stroke-width: 3; stroke-dasharray: 7 4; opacity: 1; }
.nm-te-degraded { stroke: var(--p2); stroke-width: 2.4; stroke-dasharray: 2 3; opacity: 1; }
.nm-te-unknown { stroke: var(--p4); }
.nm-tk-parent { stroke: var(--p4); stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2; }
.nm-tk-unknown { stroke: var(--p4); stroke-dasharray: 4 3; }
.nm-te-n { fill: var(--ink2); font-size: 12px; }

/* จุด */
.nm-tn-s { stroke-width: 2; }
.nm-tn-up .nm-tn-s { fill: var(--teal-fg); stroke: var(--teal-fg); }
.nm-tn-warning .nm-tn-s { fill: var(--p2); stroke: var(--p2-fg); }
.nm-tn-down .nm-tn-s { fill: var(--p1); stroke: var(--p1-fg); }
.nm-tn-unknown .nm-tn-s { fill: var(--surf); stroke: var(--p4); stroke-width: 2.5; }
.nm-tn-new .nm-tn-s { fill: var(--surf); stroke: var(--ink2); stroke-dasharray: 3 2; }
.nm-tn-m { fill: none; stroke: var(--purple-fg); stroke-width: 2; stroke-dasharray: 3 2; }
.nm-tn-g { fill: var(--ink); font-size: 14px; font-weight: 700; text-anchor: middle; }
.nm-tn-l { fill: var(--ink); font-size: 12px; font-weight: 600; text-anchor: middle; }
.nm-tn-a { fill: var(--ink2); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.nm-tn-l, .nm-tn-a, .nm-te-n { paint-order: stroke; stroke: var(--surf); stroke-width: 4px; stroke-linejoin: round; }   /* ขอบรอบตัวอักษร: เส้นที่ผ่านไม่ทับชื่อ */
.nm-topo a { cursor: pointer; }
.nm-topo a:hover .nm-tn-s, .nm-topo a:focus .nm-tn-s { stroke: var(--brand); stroke-width: 3.5; }
.nm-topo a:focus { outline: none; }
.nm-topo a:focus-visible .nm-tn-s { stroke: var(--ring); stroke-width: 4; }
.nm-topo a:hover .nm-tn-l, .nm-topo a:focus-visible .nm-tn-l { text-decoration: underline; }

@media (max-width: 720px) {
  .nm-topo-wrap { max-height: 70vh; }
  .nm-topo { max-width: none; }
}