/* SENTINEL v12.5 — Network: "Internet routing & outages" panel (Cloudflare Radar).
   Visual language copied from the Grid & OT energy panel (grid.css .en-*): serif
   bottom line, pulse tiles, uppercase section labels, inset bars on rows. Amber
   marks rows that involve the United States; the "needs setup" state is calm.
   Width-aware through a container query, because the Network view decides the
   column this panel sits in. Every rule is scoped to #view-network .ni-…. */

#view-network .ni { container: ni / inline-size; }

/* ── lead ── */
#view-network .ni-lead { padding: var(--s-4) var(--s-5) 0; }
#view-network .ni-bl { font-family: var(--f-display); font-size: var(--t-22); line-height: 1.38; color: var(--paper); max-width: 72ch; text-wrap: pretty; }
#view-network .ni-sample { margin-top: var(--s-2); font-size: var(--t-13); line-height: 1.5; color: var(--fog); }
#view-network .ni-sample .chip { margin-right: 6px; padding: 0 6px; }
#view-network .ni-lead .learn-note { margin-top: var(--s-3); }

/* ── at a glance (the Watch pulse, scoped) ── */
#view-network .ni-pulse { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s-5) var(--s-5) 0;
  background: var(--slate); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
#view-network .ni-pulse > li { min-width: 0; }
#view-network .ni-pulse > li + li { border-left: 1px solid var(--rule); }
#view-network .ni-tile { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: none; border: 0; border-radius: 0; text-align: left; font: inherit; color: var(--fog); cursor: pointer; transition: background var(--t-fast); }
#view-network .ni-tile:hover { background: var(--slate-2); }
#view-network .ni-tile:hover span { color: var(--paper); }
#view-network .ni-tile:focus-visible { outline-offset: -2px; }
#view-network .ni-tile b { font-size: var(--t-36); font-weight: 500; line-height: 1; color: var(--paper); }
#view-network .ni-tile span { font-size: var(--t-14); line-height: 1.35; }
#view-network .ni-tile small { display: block; font-size: var(--t-12); color: var(--mist); margin-top: 2px; }
#view-network .ni-tile small:empty { display: none; }
#view-network .ni-tile.is-hot b { color: var(--amber); }
#view-network .ni-tile.is-hot { background: color-mix(in srgb, var(--amber) 6%, transparent); }
#view-network .ni-tile.is-hot:hover { background: color-mix(in srgb, var(--amber) 10%, var(--slate-2)); }
#view-network .ni--setup .ni-tile { cursor: default; }
#view-network .ni--setup .ni-tile:hover { background: none; }
#view-network .ni--setup .ni-tile b { color: var(--mist); }

/* ── tabs + filter ── */
#view-network .ni-body { border-top: 1px solid var(--rule); }
/* disclosure: summary and tiles always; the event lists and DDoS mix on demand */
#view-network .ni-disc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-4) var(--s-5); }
#view-network .ni-disc[hidden] { display: none; }
#view-network .ni-toggle { display: inline-flex; align-items: center; gap: 8px; }
#view-network .ni-chev { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--t-fast); }
#view-network .ni-toggle[aria-expanded="true"] .ni-chev { transform: rotate(90deg); }
#view-network .ni-disc-note { font-size: var(--t-13); color: var(--mist); }
#view-network .ni--open .ni-disc-note { display: none; }
#view-network .ni-body[hidden] { display: none; }
#view-network .ni-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: 0 var(--s-5); border-bottom: 1px solid var(--rule); }
#view-network .ni-tabs { display: flex; gap: var(--s-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
#view-network .ni-tabs::-webkit-scrollbar { display: none; }
#view-network .ni-tab { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); background: none; border: 0; font: inherit; font-size: var(--t-12); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); cursor: pointer; white-space: nowrap; transition: color var(--t-fast); }
#view-network .ni-tab:first-child { padding-left: 0; }
#view-network .ni-tab .mono { margin-left: 4px; color: var(--mist); font-weight: 500; letter-spacing: 0; }
#view-network .ni-tab:hover { color: var(--paper); }
#view-network .ni-tab[aria-selected="true"] { color: var(--paper); }
#view-network .ni-tab[aria-selected="true"] .mono { color: var(--paper); }
#view-network .ni-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; background: var(--cyan); border-radius: 1px; }
#view-network .ni-tab:first-child[aria-selected="true"]::after { left: 0; }
#view-network .ni-tab.has-us .mono::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--amber); vertical-align: 2px; }
#view-network .ni-tab:focus-visible { outline-offset: -3px; }
#view-network .ni-us { margin-bottom: var(--s-2); white-space: nowrap; }
#view-network .ni-ts { display: none; }

#view-network .ni-panel:focus { outline: none; }
#view-network .ni-panel:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
#view-network .ni-cap { padding: var(--s-3) var(--s-5); font-size: var(--t-12); line-height: 1.55; color: var(--mist); overflow-wrap: anywhere; }
#view-network .ni-cap:empty { display: none; }
#view-network .ni-cap a { color: var(--cyan); }
#view-network .ni-warn { color: var(--sev-high); }
#view-network .ni-list { border-top: 1px solid var(--rule); }
#view-network .ni-list > li.empty, #view-network .ni-list .empty { padding-block: var(--s-5); }
#view-network .ni-more { padding: var(--s-2) var(--s-5) var(--s-3); border-top: 1px solid var(--rule); }
#view-network .ni-more:empty { display: none; }

/* ── rows ── */
#view-network .ni-row { padding-block: var(--s-3); }
#view-network .ni-row .row-side { white-space: nowrap; }
#view-network .ni-row--us { box-shadow: inset 3px 0 0 var(--amber); background: color-mix(in srgb, var(--amber) 4%, transparent); }
#view-network .ni-tags { display: flex; flex-wrap: wrap; gap: 4px; }
#view-network .ni-tags .chip { padding: 0 6px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#view-network .ni-uschip { font-weight: 700; }
#view-network .ni-what { margin-top: 6px; font-size: var(--t-16); color: var(--paper); }
#view-network .ni-region { font-weight: 400; color: var(--fog); font-size: var(--t-14); }
#view-network .ni-pfx { font-weight: 500; font-size: var(--t-16); }
#view-network .ni-verb { font-weight: 400; color: var(--fog); }
#view-network .ni-asns { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); margin-top: 4px; font-size: var(--t-13); color: var(--fog); }
#view-network .ni-as { color: var(--paper); }
#view-network .ni-what .ni-as { font-weight: 500; }
#view-network .ni-what .ni-cc { font-weight: 400; font-size: var(--t-14); }
#view-network .ni-org { overflow-wrap: anywhere; }
#view-network .ni-cc { color: var(--mist); }
#view-network .ni-cc.is-us { color: var(--amber); }
#view-network .ni-desc { margin-top: 4px; font-size: var(--t-13); line-height: 1.5; color: var(--fog); max-width: 80ch; }
#view-network .ni-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s-3); margin-top: 6px; font-size: var(--t-13); line-height: 1.5; }
#view-network .ni-kv dt { color: var(--mist); }
#view-network .ni-kv dd { margin: 0; color: var(--fog); overflow-wrap: anywhere; }
#view-network .ni-v { display: block; }
#view-network .ni-evs { margin-top: 6px; }
#view-network .ni-ev { color: var(--fog); font-size: var(--t-12); }
#view-network .ni-ev .mono { color: var(--sev-high); }
#view-network .ni-ev.is-neg .mono { color: var(--ok); }
#view-network .ni-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 6px; font-size: var(--t-13); color: var(--fog); }
#view-network .ni-path .mono { padding: 1px 6px; border: 1px solid var(--rule-2); border-radius: var(--radius); }
#view-network .ni-path .ni-leaker { color: var(--paper); border-color: var(--sev-high); }
#view-network .ni-arrow { color: var(--mist); }
#view-network .ni-live { color: var(--cyan); }
#view-network .ni-links { margin-top: 6px; font-size: var(--t-13); color: var(--mist); }
#view-network .ni-links a, #view-network .ni-foot a, #view-network .ni-src a, #view-network .ni-setup a { color: var(--cyan); text-decoration: none; }
#view-network .ni-links a:hover, #view-network .ni-foot a:hover, #view-network .ni-src a:hover, #view-network .ni-setup a:hover { text-decoration: underline; }

/* ── DDoS mix ── */
#view-network .ni-ddos { border-top: 1px solid var(--rule); padding: var(--s-4) var(--s-5) var(--s-4); }
#view-network .ni-h { font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); line-height: 1.4; }
#view-network .ni-ddos .ni-cap { padding: 4px 0 var(--s-3); }
#view-network .ni-dd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3) var(--s-6); align-items: start; }
#view-network .ni-proto { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
#view-network .ni-proto th, #view-network .ni-proto td { padding: 3px 0; vertical-align: middle; }
#view-network .ni-proto th { width: 9em; text-align: left; color: var(--fog); font-weight: 500; }
#view-network .ni-proto td.mono { width: 4.2em; padding-right: var(--s-3); text-align: right; color: var(--paper); }
#view-network .ni-proto .meter { min-width: 0; }
#view-network .ni-ddkv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s-3); font-size: var(--t-13); line-height: 1.5; }
#view-network .ni-ddkv dt { color: var(--mist); }
#view-network .ni-ddkv dd { margin: 0; color: var(--fog); overflow-wrap: anywhere; }
#view-network .ni-ddkv .mono { color: var(--paper); }
#view-network .ni-tgt-us, #view-network .ni-tgt-us .mono { color: var(--amber); }
#view-network .ni-src { margin-top: var(--s-3); font-size: var(--t-12); color: var(--mist); }

/* ── needs setup: plain, no alarm colour ── */
#view-network .ni-setup { margin: var(--s-5) var(--s-5) 0; padding: var(--s-4) var(--s-5); border: 1px dashed var(--rule-2); border-radius: var(--radius-lg);
  font-size: var(--t-14); line-height: 1.6; color: var(--fog); max-width: 80ch; }
#view-network .ni-setup p + p { margin-top: var(--s-2); }
#view-network .ni-setup-h { font-size: var(--t-16); font-weight: 600; color: var(--paper); }
#view-network .ni-setup .quiet { font-size: var(--t-13); }
#view-network .ni-setup b { color: var(--paper); font-weight: 600; }
#view-network .ni--setup .ni-foot { margin-top: var(--s-5); }
#view-network .ni-foot { line-height: 1.6; }

/* ── width-aware ── */
@container ni (max-width: 760px) {
  #view-network .ni-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-network .ni-pulse > li { border-left: 0; border-top: 1px solid var(--rule); }
  #view-network .ni-pulse > li:nth-child(-n+2) { border-top: 0; }
  #view-network .ni-pulse > li:nth-child(2n) { border-left: 1px solid var(--rule); }
  #view-network .ni-dd { grid-template-columns: minmax(0, 1fr); }
}
@container ni (max-width: 520px) {
  #view-network .ni-disc { padding-inline: var(--s-4); }
  #view-network .ni-lead, #view-network .ni-bar, #view-network .ni-cap, #view-network .ni-more, #view-network .ni-ddos { padding-left: var(--s-4); padding-right: var(--s-4); }
  #view-network .ni-ddos .ni-cap { padding-inline: 0; }
  #view-network .ni-bl { font-size: var(--t-18); }
  #view-network .ni-pulse, #view-network .ni-setup { margin: var(--s-4) var(--s-4) 0; }
  #view-network .ni-setup { padding: var(--s-3) var(--s-4); }
  #view-network .ni-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
  #view-network .ni-tile b { font-size: var(--t-22); min-width: 1.6em; }
  #view-network .ni-tile span { font-size: var(--t-13); line-height: 1.25; }
  #view-network .ni-tile small { display: none; }
  #view-network .ni-bar { align-items: center; }
  #view-network .ni-us { margin: var(--s-2) 0; }
  #view-network .ni-tabs { flex: 1 0 100%; }
  #view-network .ni-tl { display: none; }
  #view-network .ni-ts { display: inline; }
  #view-network .ni-tab { padding: var(--s-3) var(--s-2) var(--s-2); }
  #view-network .ni-tab[aria-selected="true"]::after { left: var(--s-2); right: var(--s-2); }
  #view-network .ni-list .row { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-4); }
  #view-network .ni-list .row-side { grid-row: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 2px var(--s-3); text-align: left; }
  #view-network .ni-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #view-network .ni-kv dd + dt { margin-top: 4px; }
  #view-network .ni-ddkv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #view-network .ni-ddkv dd + dt { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  #view-network .ni-tile, #view-network .ni-tab, #view-network .ni-chev { transition: none; }
}
#view-network .ni-proto td:last-child { width: 100%; }
#view-network .ni-proto .meter { display: block; }
#view-network .ni-proto th { padding-right: var(--s-3); overflow-wrap: anywhere; }
/* fault block: heading and text are separate blocks with their own line boxes */
#view-network .ni-fault { display: flow-root; padding: var(--s-5); }
#view-network .ni-fault-h { display: block; margin: 0 0 var(--s-1); font-size: var(--t-16); font-weight: 700; line-height: 1.4; color: var(--sev-high); }
#view-network .ni-fault-t { display: block; margin: 0; font-size: var(--t-14); line-height: 1.55; color: var(--fog); }
@container ni (max-width: 520px) { #view-network .ni-fault { padding: var(--s-4); } }
/* fixed layout so a long protocol label wraps inside its own column instead of
   collapsing it (review 12.5); labels are already cut to 16 characters */
#view-network .ni-proto { table-layout: fixed; }
#view-network .ni-proto th[scope="row"] { width: 9.5em; }
#view-network .ni-proto td.mono { width: 4.5em; }
#view-network .ni-proto td:last-child { width: auto; }
@container ni (max-width: 520px) { #view-network .ni-proto th[scope="row"] { width: 8.5em; } }