/* Case "Red exclamation mark" (cases/networks/red-exclamation/): builds on case-site.css and case-note.css; every rule is
   scoped to .case-net. Illustrations are inline SVG and HTML, so their labels translate with the page.
   Layout follows the home page (AGENTS.md): full .home-wrap width, gaps 22px / up to 60px, breakpoints 1099px and 699px. */
.case-net {
  --red:#d23b2f;
  --red-soft:#fdebe8;
  --green:#2f8a55;
  --green-soft:#e7f6ec
}
.case-net .nx-text,.case-net .nx-split-text p,.case-net .nx-lead2,.case-net .nx-update-text p,.case-net .nx-end p {
  margin:0 0 12px;
  font-size:17px;
  line-height:1.6
}
.case-net .nx-split-text p:last-child,.case-net .nx-update-text p:last-child,.case-net .nx-end p {
  margin-bottom:0
}
.case-net .cs-lead {
  margin:0 0 12px
}
.case-net .cs-top {
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  align-items:start
}
/* Text beside its illustration: the pair fills the whole width, like the home "About" block. */
.case-net .nx-split {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:22px clamp(32px,3.2vw,60px);
  align-items:start
}
.case-net .nx-split .nt-fig {
  margin:0
}
.case-net .nx-split+.nt-cols {
  margin-top:28px
}
.case-net .nt-demo {
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:#fff1d6;
  border:1px solid var(--amber);
  color:#7a4a0c;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none
}
.case-net .nt-fig-head .nt-demo {
  margin-left:auto
}
/* Illustration 1: two states of the same map. */
.case-net .nx-map-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.case-net .nx-map {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:12px 12px 10px;
  border-radius:14px;
  background:#fbf7f0;
  border:1px solid var(--line)
}
.case-net .nx-map.is-alert {
  background:#fff6f3;
  border-color:#f1c4bb
}
.case-net .nx-map-state {
  margin:0 0 6px;
  font-size:15px;
  font-weight:800
}
.case-net .nx-map.is-alert .nx-map-state {
  color:var(--red)
}
.case-net svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.case-net svg text {
  font-family:inherit;
  fill:var(--ink)
}
.case-net .nx-links path {
  fill:none;
  stroke:#cdbfa9;
  stroke-width:2.5
}
.case-net .nx-node rect {
  fill:#fffdf9;
  stroke:#cdbfa9;
  stroke-width:1.5
}
.case-net .nx-node text {
  font-size:14px;
  font-weight:700;
  text-anchor:middle
}
.case-net .nx-core rect {
  stroke:var(--green);
  stroke-width:2.5
}
.case-net .is-alert .nx-core rect {
  fill:#fff1ee;
  stroke:var(--red)
}
.case-net .nx-badge circle {
  fill:var(--red)
}
.case-net .nx-badge text {
  fill:#fff;
  font-size:22px;
  font-weight:900;
  text-anchor:middle
}
.case-net .nx-badge {
  transform-origin:252px 80px;
  animation:nx-pulse 1.6s ease-in-out infinite
}
@keyframes nx-pulse {
  50% {
    transform:scale(1.14)
  }
}
.case-net .nx-tip rect {
  fill:#2b2f33
}
.case-net .nx-tip text {
  fill:#fff;
  font-size:12px;
  text-anchor:middle
}
.case-net .nx-tip .nx-tip-val {
  font-size:13px;
  font-weight:800;
  fill:#ffb4a8
}
.case-net .nx-empty-log {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 0;
  padding:8px 12px;
  border-radius:10px;
  border:1px dashed #cdbfa9;
  background:#fffdf9;
  font-size:14.5px
}
.case-net .nx-empty-log span {
  color:var(--muted)
}
/* Illustration 2: waves of the storm. */
.case-net .nx-grid path {
  stroke:#efe6d8;
  stroke-width:1
}
.case-net .nx-axis {
  fill:none;
  stroke:#9a8f80;
  stroke-width:1.5
}
.case-net .nx-thresh {
  stroke:var(--red);
  stroke-width:1.5;
  stroke-dasharray:6 6
}
.case-net .nx-area {
  fill:#c4561b1f
}
.case-net .nx-line {
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linejoin:round
}
.case-net .nx-calm,.case-net .nx-burst {
  font-size:13px;
  text-anchor:middle;
  font-weight:700
}
.case-net .nx-calm {
  fill:var(--green) !important
}
.case-net .nx-burst {
  fill:var(--accent) !important
}
.case-net .nx-ax-l {
  font-size:12.5px;
  fill:var(--muted) !important
}
.case-net .nx-ax-l.is-end {
  text-anchor:end
}
.case-net .nx-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:16px 0 0;
  padding:0;
  list-style:none
}
.case-net .nx-facts li {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:12px;
  background:#fbf7f0;
  border:1px solid var(--line);
  font-size:14.5px;
  line-height:1.4
}
.case-net .nx-facts b {
  font-size:24px;
  letter-spacing:-.02em;
  color:var(--accent);
  white-space:nowrap
}
/* Illustration 3: a stylised router management window with demo rows. */
.case-net .nx-ui {
  border-radius:14px;
  overflow:hidden;
  border:1px solid #c9ced4;
  background:#f4f6f8;
  font-size:14.5px
}
.case-net .nx-ui-bar {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:9px 14px;
  background:#2b3138;
  color:#e8ecf0;
  font-weight:700;
  font-size:14px
}
.case-net .nx-dots {
  display:flex;
  gap:6px
}
.case-net .nx-dots i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#59626c
}
.case-net .nx-ui-body {
  padding:12px 14px 14px;
  overflow-x:auto
}
.case-net .nx-ui-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px
}
.case-net .nx-ui-tabs span {
  padding:4px 12px;
  border-radius:8px;
  border:1px solid #c9ced4;
  background:#fff;
  color:#4a525b;
  font-size:13.5px
}
.case-net .nx-ui-tabs .is-on {
  background:#2b3138;
  border-color:#2b3138;
  color:#fff
}
.case-net .nx-ui-table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-variant-numeric:tabular-nums
}
.case-net .nx-ui-table th,.case-net .nx-ui-table td {
  padding:8px 10px;
  border-bottom:1px solid #e2e6ea;
  text-align:left;
  white-space:nowrap
}
.case-net .nx-ui-table th {
  background:#eef1f4;
  color:#4a525b;
  font-size:13px;
  font-weight:700
}
.case-net .nx-ui-table .is-alien td {
  background:var(--red-soft);
  color:#8d2219;
  border-top:2px solid var(--red);
  border-bottom:2px solid var(--red)
}
.case-net .nx-ui-none {
  color:#b0726b
}
.case-net .nx-ui-rights {
  margin:10px 0 0;
  color:#4a525b;
  font-size:13.5px
}
.case-net .nx-ui-rights code {
  font-size:13px;
  white-space:normal
}
.case-net .nx-ui-flag {
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin:0;
  padding:10px 14px;
  background:var(--red);
  color:#fff;
  font-size:14.5px
}
.case-net .nx-open {
  padding:14px 18px;
  border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;
  background:#fff4df
}
.case-net .nx-sources {
  margin:18px 0 0;
  color:var(--muted);
  font-size:14.5px
}
.case-net .nx-sources a {
  color:var(--accent)
}
/* Illustration 4: memory of an event, then and now. */
.case-net .nx-mem {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:18px
}
.case-net .nx-mem-col {
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fbf7f0
}
.case-net .nx-mem-col.is-new {
  background:#f3faf5;
  border-color:#bfe3cb
}
.case-net .nx-mem-h {
  margin:0 0 10px;
  font-weight:800
}
.case-net .nx-mem-steps {
  display:grid;
  gap:8px;
  margin:0 0 12px;
  padding:0;
  list-style:none;
  font-size:14.5px;
  line-height:1.35
}
.case-net .nx-mem-steps li {
  display:flex;
  align-items:center;
  gap:10px
}
.case-net .nx-chip {
  flex:none;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font-weight:900
}
.case-net .nx-chip.is-red {
  background:var(--red);
  color:#fff
}
.case-net .nx-chip.is-ghost {
  background:#fff;
  border:1px dashed #b9ab96;
  color:#9a8f80
}
.case-net .nx-mem-kv {
  display:grid;
  gap:6px;
  margin:0;
  font-size:14.5px
}
.case-net .nx-mem-kv div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-bottom:6px;
  border-bottom:1px solid #e9e1d4
}
.case-net .nx-mem-kv dt {
  color:var(--muted)
}
.case-net .nx-mem-kv dd {
  margin:0;
  font-weight:700;
  text-align:right
}
.case-net .nx-event {
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid #bfe3cb
}
.case-net .nx-event-title {
  margin:0 0 10px;
  color:#8d2219;
  font-weight:800;
  font-size:15px
}
.case-net .nx-strip {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:3px;
  margin:12px 0 4px;
  padding:0;
  list-style:none
}
.case-net .nx-strip li {
  height:14px;
  border-radius:3px;
  background:#d9efe0
}
.case-net .nx-strip .is-hit {
  background:var(--red)
}
.case-net .nx-strip-l {
  margin:0;
  color:var(--muted);
  font-size:13.5px
}
/* Linux: server health and the schedule timeline side by side. */
.case-net .nx-lead2 {
  max-width:none
}
.case-net .nx-split-linux {
  margin-top:18px
}
.case-net .nx-split-linux h3,.case-net .nx-update h3 {
  margin:0 0 10px
}
.case-net .nx-linux {
  display:grid;
  gap:18px
}
.case-net .nx-health {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px
}
.case-net .nx-health li {
  display:flex;
  flex-direction:column;
  padding:8px 10px 8px 34px;
  position:relative;
  border-radius:10px;
  background:var(--green-soft);
  border:1px solid #bfe3cb
}
.case-net .nx-health li::before {
  content:'✓';
  position:absolute;
  left:11px;
  top:8px;
  color:var(--green);
  font-weight:900
}
.case-net .nx-health li.is-bad {
  background:var(--red-soft);
  border-color:#f1c4bb
}
.case-net .nx-health li.is-bad::before {
  content:'?';
  color:var(--red)
}
.case-net .nx-health span {
  color:var(--muted)
}
.case-net .nx-row-l {
  font-size:16px;
  font-weight:800
}
.case-net .nx-tl {
  stroke:#cdbfa9;
  stroke-width:2
}
.case-net .nx-hour {
  stroke:#9a8f80;
  stroke-width:1.5;
  stroke-dasharray:4 4
}
.case-net .nx-hour-l {
  font-size:14px;
  font-weight:700;
  text-anchor:middle;
  fill:var(--muted) !important
}
.case-net .nx-fresh {
  fill:var(--green-soft);
  stroke:#9fd2b0
}
.case-net .nx-stale {
  fill:var(--red-soft);
  stroke:var(--red)
}
.case-net .nx-stale-l {
  font-size:16px;
  font-weight:900;
  text-anchor:middle;
  fill:var(--red) !important
}
.case-net .nx-fresh-l {
  font-size:14px;
  text-anchor:middle;
  fill:var(--green) !important;
  font-weight:700
}
.case-net .nx-gap {
  stroke:var(--red);
  stroke-width:2;
  marker-start:none
}
.case-net .nx-gap-l {
  font-size:15px;
  text-anchor:middle;
  font-weight:800;
  fill:var(--red) !important
}
.case-net .nx-runs circle {
  fill:var(--accent);
  stroke:#fff;
  stroke-width:2
}
.case-net .nx-runs.is-fixed circle {
  fill:var(--green)
}
.case-net .nx-ticks text {
  font-size:15px;
  text-anchor:middle;
  fill:var(--muted) !important;
  font-variant-numeric:tabular-nums
}
.case-net .nx-update {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:22px clamp(32px,3.2vw,60px);
  align-items:start;
  margin-top:32px
}
.case-net .nx-update-text a {
  color:var(--accent);
  font-weight:600
}
.case-net .nx-checklist {
  padding:clamp(18px,2vw,24px);
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #6d4a1f0f
}
.case-net .nx-check-h {
  margin:0 0 10px;
  font-size:19px;
  font-weight:800
}
.case-net .nx-checklist ul {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.case-net .nx-checklist li {
  position:relative;
  padding-left:28px;
  font-size:16px;
  line-height:1.5
}
.case-net .nx-checklist li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--green);
  font-weight:800
}
.case-net .nx-end {
  margin-top:0
}
/* The trail has two steps here: keep both on a phone (case-note.css hides the first and last on narrow screens). */
.case-net .nt-crumbs span {
  color:var(--muted);
  font-weight:600
}
@media(max-width:1099px) {
  .case-net .cs-top,.case-net .nx-split,.case-net .nx-update {
    grid-template-columns:minmax(0,1fr)
  }
}
@media(max-width:699px) {
  .case-net .nt-crumbs li:first-child,.case-net .nt-crumbs li:last-child {
    display:list-item
  }
  .case-net .nt-crumbs li+li::before {
    content:'›';
    margin:0 8px;
    color:var(--muted)
  }
  .case-net .nx-map-pair,.case-net .nx-mem,.case-net .nx-linux,.case-net .nx-facts {
    grid-template-columns:minmax(0,1fr)
  }
  /* SVG labels are in viewBox units: on a phone the drawings shrink to about half, so the labels grow to stay readable. */
  .case-net .nx-node text {
    font-size:17px
  }
  .case-net .nx-waves text {
    font-size:24px
  }
  .case-net .nx-cron text,.case-net .nx-cron .nx-ticks text {
    font-size:23px
  }
  .case-net .nx-cron .nx-fresh-l {
    font-size:20px
  }
  .case-net .nx-health {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .case-net .nt-fig-head .nt-demo {
    margin-left:0
  }
  /* Phone: the demo table keeps name, group and last login; the comment column is decoration. */
  .case-net .nx-ui-table th:nth-child(3),.case-net .nx-ui-table td:nth-child(3) {
    display:none
  }
  .case-net .nx-ui-table th,.case-net .nx-ui-table td {
    padding:8px;
    white-space:normal
  }
}
@media(prefers-reduced-motion:reduce) {
  .case-net .nx-badge {
    animation:none
  }
}
.case-net .nx-h3 {
  margin:22px 0 10px
}
.case-net .nx-side {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px
}
.case-net .nx-side .nx-open {
  margin:0
}
.case-net .nx-mem {
  align-items:start
}
.case-net .nx-legend {
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 0;
  color:var(--red);
  font-size:14.5px;
  font-weight:700
}
.case-net .nx-legend i {
  width:34px;
  border-top:2px dashed var(--red)
}