/* SENTINEL v12.5 — Network view. The visual language of Watch and Grid & OT:
   the at-a-glance strip is the Grid strip, cards and sections use the
   energy panel's hairlines, uppercase micro-heads and edge colour bars
   (red = exploited, amber = attention, a dashed rule = no data). The
   internet panel (#netInternet) is styled by network-internet.css. */
#view-network .wrap > * + * { margin-top: var(--s-5); }

/* ── at a glance (the Grid strip) ── */
#view-network .net-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#view-network .net-stats .stat { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
#view-network .net-stats .stat + .stat { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
#view-network .net-stats .stat { min-width: 0; }
#view-network .net-stats .num { font-size: var(--t-28); max-width: 100%; overflow-wrap: anywhere; word-break: break-all; }
#view-network .net-stats .label { max-width: 26ch; }
#view-network .net-stats .label small { display: block; margin-top: 2px; font-size: var(--t-12); color: var(--mist); }
#view-network .net-stats .stat.is-hot .num { color: var(--amber); }
#view-network .net-stats .stat--text .num { white-space: nowrap; }

/* ── edge-vendor board ── */
#view-network .net-how { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--rule); background: var(--ink-2); }
#view-network .net-how > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); font-size: var(--t-14); color: var(--fog); cursor: pointer; list-style: none; padding-block: 2px; }
#view-network .net-how > summary::-webkit-details-marker { display: none; }
#view-network .net-how > summary::before { content: "\25B8"; color: var(--mist); transition: transform var(--t-fast); }
#view-network .net-how[open] > summary::before { transform: rotate(90deg); }
#view-network .net-how > summary b { color: var(--amber); font-weight: 500; }
#view-network .net-how-l .nv-warn { color: var(--sev-high); }
#view-network .net-how-l { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s-5); margin-top: var(--s-3); font-size: var(--t-12); line-height: 1.5; color: var(--mist); }
#view-network .net-how-l li { display: block; padding-left: 22px; text-indent: -22px; }
#view-network .net-how-l .nv-sw { margin-right: 8px; text-indent: 0; }
#view-network .net-how-l b { color: var(--fog); font-weight: 600; }
#view-network .nv-sw { flex: none; display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--slate-2); border: 1px solid var(--rule-2); transform: translateY(1px); }
#view-network .nv-sw--kev { background: color-mix(in srgb, var(--sev-crit) 18%, transparent); border-color: var(--sev-crit); box-shadow: inset 0 2px 0 var(--sev-crit); }
#view-network .nv-sw--down { border-style: dashed; border-color: var(--sev-high); }
#view-network .nv-sw--na { border-style: dashed; }
#view-network .nv-lab, #view-network .nv-kv dt { font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mist); }

/* exploited vendors: full cards; a short last row stretches to fill */
#view-network .net-hot { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
#view-network .net-hot > .net-wait, #view-network .net-hot > .net-none { flex: 1 1 100%; padding: var(--s-5); background: var(--slate); font-size: var(--t-14); color: var(--fog); }
#view-network .net-none b { color: var(--paper); }
#view-network .nv { position: relative; flex: 1 1 380px; display: flex; flex-direction: column; min-width: 0; padding: var(--s-4) var(--s-5); background: var(--slate); }
#view-network .nv--kev { background: color-mix(in srgb, var(--sev-crit) 6%, var(--slate)); box-shadow: inset 0 3px 0 var(--sev-crit); }
#view-network .nv--focus, #view-network .nr--focus { outline: 2px solid var(--amber); outline-offset: -2px; }
#view-network .nv-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); }
#view-network .nv-name { font-size: var(--t-18); font-weight: 700; line-height: 1.25; color: var(--paper); overflow-wrap: anywhere; }
#view-network .nv-st { font-size: var(--t-12); color: var(--mist); display: inline-flex; align-items: center; gap: 6px; }
#view-network .nv-st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); }
#view-network .nv-st--ok::before { background: var(--ok); }
#view-network .nv-st--down { color: var(--sev-high); }
#view-network .nv-st--down::before { background: var(--sev-high); }
#view-network .nv-st--na::before { background: transparent; border: 1px dashed var(--mist); }
#view-network .nv-st--na { color: var(--sev-med); cursor: help; }
#view-network .nv-st--na::before { border-color: var(--sev-med); }
#view-network .nv-na b { color: var(--sev-med); font-weight: 700; }
#view-network .nv-kev { margin-top: var(--s-3); }
#view-network .nv-kh { font-size: var(--t-13); color: var(--fog); line-height: 1.4; }
#view-network .nv-kh b { font-size: var(--t-22); font-weight: 500; color: var(--sev-crit); margin-right: 4px; line-height: 1; vertical-align: -2px; }
#view-network .nv-cves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
#view-network .nv-cve { background: none; border: 0; padding: 0; font-size: var(--t-13); color: var(--paper); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sev-crit) 60%, transparent); text-underline-offset: 3px; }
#view-network .nv-cve:hover { color: var(--cyan); text-decoration-color: currentColor; }
#view-network .nv-more { font-size: var(--t-13); color: var(--mist); }
#view-network .nv-kp { font-size: var(--t-12); color: var(--mist); overflow-wrap: anywhere; }
#view-network .nv-latest { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); flex: 1 0 auto; }
#view-network .nv-t { margin-top: 4px; font-size: var(--t-14); line-height: 1.45; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#view-network .nv-t a { color: var(--paper); text-decoration: none; }
#view-network .nv-t a:hover { color: var(--cyan); text-decoration: underline; }
#view-network .nv-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--t-12); color: var(--mist); }
#view-network .nv-m .mono { color: var(--fog); }
#view-network .nv-m .sev { font-size: var(--t-12); }
#view-network .nv-na { margin-top: 2px; font-size: var(--t-13); line-height: 1.5; color: var(--mist); }
#view-network .nv-warn { margin-top: 2px; font-size: var(--t-13); line-height: 1.5; color: var(--sev-high); }
#view-network .nv-kv { display: grid; grid-template-columns: minmax(5.5em, .7fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
#view-network .nv-kv > div { min-width: 0; max-width: 100%; }
#view-network .nv-kv dd b, #view-network .nr td b, #view-network .eol td, #view-network .eol-p a { overflow-wrap: anywhere; word-break: break-word; }
#view-network .nv-kv dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-13); line-height: 1.35; color: var(--paper); overflow-wrap: anywhere; }
#view-network .nr-n, #view-network .nr-p, #view-network .nr-e { font-size: var(--t-13); line-height: 1.35; color: var(--paper); }
#view-network .nr-n b, #view-network .nr-p b, #view-network .nr-e b, #view-network .nr-p small, #view-network .nr-e small { display: block; }
#view-network .nr-p small, #view-network .nr-e small { margin-top: 2px; }
#view-network .nr-v .nv-st { display: flex; align-items: flex-start; }
#view-network .nr-v .nv-st::before { margin-top: 5px; }
#view-network .nv-kv dd { margin-top: 4px; }
#view-network .nv-kv dd b, #view-network .net-rest b { font-weight: 600; }
#view-network .nv-kv dd b.mono, #view-network .nr-n b.mono { font-size: var(--t-18); font-weight: 500; line-height: 1.1; }
#view-network .nv-kv dd small, #view-network .net-rest small { font-size: var(--t-12); color: var(--mist); }
#view-network .nv-kv dd a, #view-network .net-rest td small a { color: var(--fog); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
#view-network .nv-kv dd a:hover, #view-network .net-rest td small a:hover { color: var(--cyan); text-decoration-color: currentColor; }
#view-network .nv-q { color: var(--fog); font-weight: 500 !important; }
#view-network .nv-dash { color: var(--mist); }
#view-network .nv-eol--past { color: var(--sev-crit); }
#view-network .nv-eol--soon { color: var(--amber); }
#view-network .nv-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-3); margin-top: var(--s-3); font-size: var(--t-13); }
#view-network .nv-f .out, #view-network .nr-a .out { color: var(--cyan); }
#view-network .nv-note { font-size: var(--t-12); color: var(--mist); }

/* the rest: a dense table */
#view-network .net-rest-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); padding: var(--s-4) var(--s-5) var(--s-2); font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); }
#view-network .net-rest-h span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mist); }
#view-network .nr-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--t-13); }
#view-network .nr-t thead th { padding: 6px var(--s-3); font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mist); text-align: left; border-bottom: 1px solid var(--rule); }
#view-network .nr-t thead th:first-child { padding-left: var(--s-5); width: 16em; }
#view-network .nr-t thead th:nth-child(3) { width: 5.5em; text-align: right; }
#view-network .nr-t thead th:nth-child(4) { width: 11em; }
#view-network .nr-t thead th:nth-child(5) { width: 12em; }
#view-network .nr-t thead th:nth-child(6) { width: 7.5em; }
#view-network .nr td, #view-network .nr th { padding: 10px var(--s-3); vertical-align: top; text-align: left; border-bottom: 1px solid var(--rule); }
#view-network .nr:last-child td, #view-network .nr:last-child th { border-bottom: 0; }
#view-network .nr:hover td, #view-network .nr:hover th { background: color-mix(in srgb, var(--slate-2) 60%, transparent); }
#view-network .nr-v { padding-left: var(--s-5) !important; display: table-cell; }
#view-network .nr-name { display: block; font-size: var(--t-14); font-weight: 700; color: var(--paper); margin-bottom: 2px; }
#view-network .nr-l { min-width: 0; }
#view-network .nr-l .nv-t { margin-top: 0; -webkit-line-clamp: 1; font-size: var(--t-13); }
#view-network .nr-d { display: none; margin-right: 8px; font-size: var(--t-12); font-weight: 400; color: var(--fog); }
#view-network .nr td.nr-n { text-align: right; }
#view-network .nr-a { text-align: right; padding-right: var(--s-5) !important; white-space: nowrap; }
#view-network .nr--down .nr-name { color: var(--paper); }
#view-network .nr--down th { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sev-high) 70%, transparent); }
#view-network .nr--not_used th { box-shadow: inset 3px 0 0 var(--rule-2); }
#view-network .net-foot { line-height: 1.6; }

/* ── patch calendar + Microsoft (side by side, equal height) ── */
#view-network .net-mid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
#view-network .net-mid > .panel { display: flex; flex-direction: column; }
#view-network .net-mid > .panel > div { flex: 1 0 auto; }
#view-network .pc { padding: var(--s-4) var(--s-5) var(--s-4); }
#view-network .pc-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); }
#view-network .pc-next b { font-family: var(--f-display); font-size: var(--t-28); font-weight: 400; color: var(--amber); }
#view-network .pc-next span { font-size: var(--t-14); color: var(--fog); }
#view-network .pc-axis, #view-network .pc-lane { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: center; gap: var(--s-4); }
#view-network .pc-axis { margin-top: var(--s-4); }
#view-network .pc-scale { position: relative; height: 1.6em; border-bottom: 1px solid var(--rule-2); }
#view-network .pc-tick { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: var(--t-12); color: var(--mist); white-space: nowrap; }
#view-network .pc-tick::after { content: ""; position: absolute; left: 50%; bottom: -5px; height: 5px; border-left: 1px solid var(--rule-2); }
#view-network .pc-today { position: absolute; left: 0; bottom: 4px; font-size: var(--t-12); color: var(--amber); }
#view-network .pc-lanes { list-style: none; }
#view-network .pc-lane { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
#view-network .pc-v { font-size: var(--t-14); font-weight: 600; color: var(--paper); overflow-wrap: anywhere; }
#view-network .pc-v small { display: block; font-size: var(--t-12); font-weight: 400; margin-top: 2px; }
#view-network .pc-v small a { color: var(--cyan); text-decoration: none; }
#view-network .pc-v small a:hover { text-decoration: underline; }
#view-network .pc-track { position: relative; height: 40px; }
#view-network .pc-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; border-top: 1px solid var(--rule-2); }
#view-network .pc-track::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 14px; border-left: 2px solid var(--amber); }
#view-network .pc-dot { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
#view-network .pc-dot i { order: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px var(--slate); margin-bottom: 2px; }
#view-network .pc-dot b { order: 1; font-size: var(--t-12); font-weight: 500; color: var(--fog); white-space: nowrap; }
#view-network .pc-dot--soon i { background: var(--amber); }
#view-network .pc-dot--soon b { color: var(--amber); }
#view-network .pc-later { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s-4); margin-top: var(--s-4); font-size: var(--t-13); color: var(--fog); }
#view-network .pc-later b { color: var(--paper); font-weight: 600; }
#view-network .pc-later a { color: var(--cyan); text-decoration: none; font-family: var(--f-data); }
#view-network .pc-later a:hover { text-decoration: underline; }
#view-network .pc-later small { font-size: var(--t-12); color: var(--mist); }
#view-network .net-cal .empty { margin-top: var(--s-3); }

#view-network .ms { padding: var(--s-4) var(--s-5) var(--s-5); }
#view-network .ms-h { font-family: var(--f-display); font-size: var(--t-22); line-height: 1.25; color: var(--paper); }
#view-network .ms-h .mono { display: block; font-family: var(--f-data); font-size: var(--t-12); color: var(--mist); margin-top: 4px; }
#view-network .ms-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-4); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#view-network .ms-figs > div { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-3) var(--s-3) 0; }
#view-network .ms-figs > div + div { padding-left: var(--s-3); border-left: 1px solid var(--rule); }
#view-network .ms-figs b { font-size: var(--t-28); font-weight: 500; line-height: 1; color: var(--paper); }
#view-network .ms-figs b.ms-crit { color: var(--sev-crit); }
#view-network .ms-figs .is-hot b { color: var(--amber); }
#view-network .ms-figs span { font-size: var(--t-12); color: var(--fog); line-height: 1.35; }
#view-network .ms-x { list-style: none; margin-top: var(--s-3); }
#view-network .ms-x li { padding: var(--s-2) 0 var(--s-2) var(--s-3); box-shadow: inset 2px 0 0 var(--amber); }
#view-network .ms-x li + li { margin-top: var(--s-2); }
#view-network .ms-xc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
#view-network .ms-xc a { font-size: var(--t-14); color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
#view-network .ms-xc a:hover { color: var(--cyan); text-decoration-color: currentColor; }
#view-network .ms-xc .chip { padding: 0 6px; }
#view-network button.ms-kev { cursor: pointer; background: none; font: inherit; font-size: var(--t-12); }
#view-network .ms-xt { margin-top: 4px; font-size: var(--t-13); line-height: 1.45; color: var(--fog); }
#view-network .ms-none { margin-top: var(--s-3); font-size: var(--t-13); color: var(--fog); }
#view-network .ms-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-13); color: var(--fog); }
#view-network .ms-next b { font-size: var(--t-18); font-weight: 500; color: var(--paper); }
#view-network .ms-next a { color: var(--cyan); text-decoration: none; }
#view-network .ms-next a:hover { text-decoration: underline; }
#view-network .ms-note { margin-top: var(--s-4); font-size: var(--t-12); line-height: 1.55; color: var(--mist); }

/* ── end of life ── */
#view-network .eol-wrap { overflow-x: auto; }
#view-network .eol { font-size: var(--t-14); border-collapse: collapse; }
#view-network .eol thead th { font-size: var(--t-12); }
#view-network .eol th, #view-network .eol td { padding: 8px var(--s-4); }
#view-network .eol tbody + tbody { border-top: 1px solid var(--rule-2); }
#view-network .eol td { border-bottom: 1px solid var(--rule); }
#view-network .eol tbody tr:last-child td { border-bottom: 0; }
#view-network .eol-p { text-align: left; vertical-align: top; width: 13em; padding-left: var(--s-5) !important; font-size: var(--t-14) !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; color: var(--paper); background: none; }
#view-network .eol-p a { color: var(--paper); text-decoration: none; }
#view-network .eol-p a:hover { color: var(--cyan); text-decoration: underline; }
#view-network .eol-p small { display: block; text-transform: none; letter-spacing: 0; margin-top: 2px; font-size: var(--t-12); font-weight: 400; color: var(--mist); }
#view-network .eol-c { white-space: nowrap; }
#view-network .eol-c .chip { padding: 0 5px; margin-left: 4px; }
#view-network .eol-d { font-family: var(--f-data); color: var(--fog); white-space: nowrap; }
#view-network .eol-d--soon { color: var(--amber); font-weight: 600; }
#view-network .eol-d--past { color: var(--sev-crit); }
#view-network .eol-d--none { color: var(--mist); font-family: var(--f-body); }
#view-network .eol-r--soon td { background: color-mix(in srgb, var(--amber) 6%, transparent); }
#view-network .eol-r--soon td:first-of-type { box-shadow: inset 2px 0 0 var(--amber); }
#view-network .eol-r--past td { color: var(--fog); }
#view-network .eol-r--past td:first-of-type { box-shadow: inset 2px 0 0 var(--sev-crit); }
#view-network .eol-l a { color: var(--cyan); text-decoration: none; }
#view-network .eol-l a:hover { text-decoration: underline; }
#view-network .eol-down { color: var(--sev-high); font-size: var(--t-13); }
#view-network .eol-focus { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ── responsive ── */
@media (max-width: 1180px) {
  #view-network .net-mid { grid-template-columns: minmax(0, 1fr); }
  #view-network .nr-t thead th:nth-child(5) { width: 10em; }
}
@media (max-width: 900px) {
  #view-network .net-stats .stat--text .num { font-size: var(--t-22); line-height: 1.25; }
  #view-network .net-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-network .net-stats .stat { border-left: 0 !important; border-top: 1px solid var(--rule); padding-left: 0 !important; }
  #view-network .net-stats .stat:nth-child(-n+2) { border-top: 0; }
  #view-network .net-stats .stat:nth-child(2n) { border-left: 1px solid var(--rule) !important; padding-left: var(--s-4) !important; }
  #view-network .net-stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #view-network .net-how-l { grid-template-columns: minmax(0, 1fr); }
}
/* the compact rows as blocks: name and count, then the latest advisory, then patch day / end of life / link */
@media (max-width: 820px) {
  #view-network .nr-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #view-network .nr-t, #view-network .nr-t tbody { display: block; }
  #view-network .nr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "v v v" "l l l" "p e a"; gap: 4px var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); }
  #view-network .nr:last-child { border-bottom: 0; }
  #view-network .nr td, #view-network .nr th { display: block; padding: 0 !important; border: 0; background: none !important; }
  #view-network .nr-v { grid-area: v; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); }
  #view-network .nr-name { margin: 0; }
  #view-network .nr-l { grid-area: l; }
  #view-network .nr-v { padding-right: 2.5em !important; }
  #view-network .nr-n { position: absolute; top: 10px; right: var(--s-4); }
  #view-network .nr-n b.mono { font-size: var(--t-16); }
  #view-network .nr-p { grid-area: p; } #view-network .nr-e { grid-area: e; } #view-network .nr-a { grid-area: a; align-self: end; }
  #view-network .nr-p small, #view-network .nr-e small { display: none; }
  #view-network .nr-p, #view-network .nr-e { display: flex !important; align-items: baseline; gap: 6px; font-size: var(--t-12); }
  #view-network .nr-p b, #view-network .nr-e b { font-size: var(--t-12); }
  #view-network .nr-p::before { content: "Patch"; font-size: var(--t-12); color: var(--mist); }
  #view-network .nr-e::before { content: "EOL"; font-size: var(--t-12); color: var(--mist); }
  #view-network .nr .nv-t { font-size: var(--t-13); }
  #view-network .nr { gap: 2px var(--s-3); padding-block: 10px; }
  #view-network .nr-v { gap: 0 var(--s-2); }
  #view-network .nr-v .nv-st { display: inline-flex !important; align-items: center; }
  #view-network .nr-v .nv-st::before { margin-top: 0; }
  #view-network .nr-l .nv-m { display: none; }
  #view-network .nr-d { display: inline; }
  #view-network .nr .nr-na { display: none; }
  #view-network .nr--not_used { grid-template-areas: "v v v" "p e a"; }
  #view-network .nr--down, #view-network .nr--not_used { box-shadow: inset 3px 0 0 var(--rule-2); }
  #view-network .nr--down { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sev-high) 70%, transparent); }
  #view-network .nr th { box-shadow: none !important; }
}
@media (max-width: 720px) {
  #view-network .pc-axis, #view-network .pc-lane { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #view-network .pc-axis .pc-v { display: none; }
  #view-network .pc-tick:nth-child(even) { display: none; }
}
@media (max-width: 640px) {
  #view-network .eol thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #view-network .eol, #view-network .eol tbody, #view-network .eol tr, #view-network .eol th, #view-network .eol td { display: block; width: auto; }
  #view-network .eol tbody { padding: var(--s-3) var(--s-4); }
  #view-network .eol-p { padding: 0 0 var(--s-2) !important; width: auto; }
  #view-network .eol tr.eol-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: 8px 0 8px 10px; border-top: 1px solid var(--rule); }
  #view-network .eol tr.eol-r > th { grid-column: 1 / -1; border-top: 0; order: 0; }
  #view-network .eol td { padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  #view-network .eol-r--soon { box-shadow: inset 2px 0 0 var(--amber); background: color-mix(in srgb, var(--amber) 6%, transparent); }
  #view-network .eol-r--past { box-shadow: inset 2px 0 0 var(--sev-crit); }
  #view-network .eol td[data-l="End of life"], #view-network .eol td[data-l="Latest"] { font-size: var(--t-12); color: var(--mist); }
  #view-network .eol td[data-l="End of life"]::before { content: "ends "; }
  #view-network .eol td[data-l="Latest"]::before { content: "latest "; font-family: var(--f-body); }
  #view-network .eol td[data-l="Release"] { order: 1; }
  #view-network .eol td[data-l="Days left"] { order: 2; text-align: right; }
  #view-network .eol td[data-l="End of life"] { order: 3; }
  #view-network .eol td[data-l="Latest"] { order: 4; text-align: right; }
}
@media (max-width: 560px) {
  #view-network .net-how { padding: var(--s-3) var(--s-4); }
  #view-network .net-how-l { gap: 4px; }
  #view-network .nv { flex-basis: 100%; padding: var(--s-3) var(--s-4); }
  #view-network .nv-name { font-size: var(--t-16); }
  #view-network .nv-latest { margin-top: var(--s-2); padding-top: var(--s-2); }
  #view-network .nv-latest > .nv-lab { display: none; }
  #view-network .nv-kv { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); }
  #view-network .nv-kv > div { display: flex; align-items: baseline; gap: 6px; }
  #view-network .nv-kv dt { font-size: var(--t-12); letter-spacing: 0; text-transform: none; font-weight: 400; }
  #view-network .nv-kv dd { margin: 0; display: block; }
  #view-network .nv-kv dd b, #view-network .nv-kv dd b.mono { font-size: var(--t-13); }
  #view-network .nv--na .nv-na { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #view-network .nv-kv { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); margin-top: var(--s-2); padding-top: var(--s-2); }
  #view-network .nv-kv dd small { display: none; }
  #view-network .nv-kv dd b.mono { font-size: var(--t-16); }
  #view-network .nv-f { margin-top: var(--s-2); }
  #view-network .net-rest-h { padding: var(--s-3) var(--s-4) var(--s-2); }
  #view-network .pc { padding-inline: var(--s-4); }
  #view-network .ms { padding-inline: var(--s-4); }
  #view-network .ms-h { font-size: var(--t-18); }
}

/* v12.5.1: warm-up is calm grey, not the failure colour */
#view-network .eol-wait { color: var(--mist); font-size: var(--t-13); }
#view-network .nv-why { display: block; margin-top: .35em; color: var(--mist); font-size: max(12px, .8em); }