/* The map of the home network (netmap.js, #1143): a metro map of how the
   home's traffic goes. Lines are one width with a casing of the surface's
   colour, so where they meet they read as separate lines; ports and the
   router are white capsules across them; the running dots say "traffic goes
   now" and are only there for people who did not ask for less motion. */

:root {
  --nm-direct: #1f9d5a;
  --nm-t0: #2f6fe4;
  --nm-t1: #8a56e8;
  --nm-t2: #e0661f;
  --nm-t3: #0d97ad;
  --nm-t4: #c2378a;
  --nm-stop: #d23c32;
  --nm-own: #d99a00;
  --nm-grey: #9aa5ab;
  --nm-cable: #e6eaec;
  --nm-casing: var(--surface);
  --nm-pill: var(--surface);
  --nm-pill-stroke: var(--text);
  --nm-dot: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nm-direct: #3fbf7a;
    --nm-t0: #5b8ff0;
    --nm-t1: #a782f4;
    --nm-t2: #f08a4b;
    --nm-t3: #33bfd3;
    --nm-t4: #e366ad;
    --nm-stop: #ff6b5f;
    --nm-own: #f0b429;
    --nm-grey: #6f7c83;
    --nm-cable: #222a2e;
    --nm-dot: #0e1214;
  }
}

.nm-host { margin-bottom: 20px; }
.nm-host:empty { display: none; }
.nm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 10px; }
.nm-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.nm-more { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }

.nm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nm-chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.nm-chip-safe { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.nm-chip-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); }

.nm-canvas {
  padding: 8px 10px 4px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.nm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nm-svg text { font-family: var(--font); }

/* Colours of the lines, by the way out. */
.nm-c-direct { --c: var(--nm-direct); }
.nm-c-t0 { --c: var(--nm-t0); }
.nm-c-t1 { --c: var(--nm-t1); }
.nm-c-t2 { --c: var(--nm-t2); }
.nm-c-t3 { --c: var(--nm-t3); }
.nm-c-t4 { --c: var(--nm-t4); }
.nm-c-stop { --c: var(--nm-stop); }
.nm-c-own { --c: var(--nm-own); }
.nm-c-grey { --c: var(--nm-grey); }

.nm-casing, .nm-line, .nm-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nm-wide .nm-casing { stroke: var(--nm-casing); stroke-width: 12; }
.nm-wide .nm-line { stroke: var(--c); stroke-width: 7; }
.nm-tall .nm-casing { stroke: var(--nm-casing); stroke-width: 10; }
.nm-tall .nm-line { stroke: var(--c); stroke-width: 6; }
.nm-svg .nm-casing.nm-thin { stroke-width: 8; }
.nm-svg .nm-line.nm-thin { stroke-width: 4; }
.nm-svg .nm-line.nm-down { stroke: var(--nm-grey); stroke-width: 4; stroke-dasharray: 4 6; }
.nm-flow { display: none; stroke: var(--nm-dot); stroke-width: 2.4; stroke-dasharray: 1.5 14.5; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .nm-flow { display: inline; animation: nm-run 1.1s linear infinite; }
}
@keyframes nm-run { to { stroke-dashoffset: -16; } }

.nm-track[role="button"], .nm-group[role="button"], .nm-exit[role="button"] { cursor: pointer; outline: none; }
.nm-track[role="button"]:focus-visible .nm-casing { stroke: var(--accent); }
.nm-group[role="button"]:focus-visible .nm-card, .nm-exit[role="button"]:focus-visible .nm-card { stroke: var(--accent); stroke-width: 2; }
@media (hover: hover) {
  .nm-group[role="button"]:hover .nm-card, .nm-exit[role="button"]:hover .nm-card { stroke: var(--c); }
  .nm-track[role="button"]:hover .nm-line:not(.nm-down) { filter: brightness(1.08); }
}

.nm-box { stroke-width: 2; }
.nm-box-hub { fill: var(--accent-soft); stroke: var(--accent); }
.nm-box-router { fill: var(--surface-2); stroke: var(--text-2); }
.nm-box-glyph path { stroke: var(--accent); }
.nm-cable { fill: var(--nm-cable); }
.nm-pill { fill: var(--nm-pill); stroke: var(--nm-pill-stroke); stroke-width: 3; }

.nm-card { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.nm-tile { fill: var(--c); opacity: 0.14; }
.nm-bar { fill: var(--c); }
.nm-glyph path { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nm-tile-glyph path, .nm-exit-glyph path { stroke: var(--c); }
.nm-lock-glyph path { stroke: var(--accent); stroke-width: 3.4; }
.nm-stn { fill: var(--nm-pill); stroke-width: 3; }
.nm-st-dns .nm-stn { stroke: var(--accent); }
.nm-st-plain .nm-stn { stroke: var(--nm-grey); }
.nm-st-lock .nm-stn { stroke: var(--nm-pill-stroke); }
.nm-stn-glyph path { stroke: var(--nm-pill-stroke); stroke-width: 3.4; }
.nm-st-dns .nm-stn-glyph path { stroke: var(--accent); }
.nm-stop { stroke: var(--nm-stop); stroke-width: 5; stroke-linecap: round; }
.nm-st-open .nm-stop { stroke: var(--warn); }
.nm-own-stop { fill: var(--nm-pill); stroke: var(--nm-own); stroke-width: 3; }

.nm-name { font-size: 14px; font-weight: 650; fill: var(--text); }
.nm-sub { font-size: 12px; font-weight: 400; fill: var(--text-2); }
.nm-num { font-size: 20px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.nm-unit { font-size: 10px; fill: var(--text-3); }
.nm-svg .nm-cap { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-3); }
.nm-port { font-size: 12px; font-weight: 700; fill: var(--text); letter-spacing: 0.03em; }
.nm-tall .nm-port { font-size: 11.5px; }
.nm-tall .nm-num { font-size: 18px; }
.nm-tall .nm-name { font-size: 13.5px; }
.nm-svg .nm-num.nm-sub, .nm-svg .nm-sub.nm-num { font-size: 13.5px; font-weight: 700; fill: var(--text); }
.nm-svg .nm-safe { fill: var(--accent); font-weight: 600; }
.nm-svg .nm-bad { fill: var(--nm-stop); }
.nm-svg .nm-warn { fill: var(--warn); }
.nm-st-dns .nm-st-label { fill: var(--accent); font-weight: 600; }

/* The legend: short lines drawn with the same colours. */
.nm-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 4px 0; color: var(--text-2); font-size: 13px; }
.nm-key { display: inline-flex; align-items: center; gap: 8px; }
.nm-key::before { content: ""; flex: none; display: inline-block; }
.nm-key-line::before { width: 28px; height: 7px; border-radius: 4px; background: var(--nm-direct); }
.nm-key-station::before { width: 12px; height: 12px; border: 3px solid var(--accent); border-radius: 50%; background: var(--surface); }
.nm-key-stop::before { width: 18px; height: 16px; background: linear-gradient(var(--nm-stop), var(--nm-stop)) 0 50% / 11px 6px no-repeat, linear-gradient(var(--nm-stop), var(--nm-stop)) 13px 0 / 4px 16px no-repeat; }
.nm-key-down::before { width: 28px; height: 0; border-top: 4px dashed var(--nm-grey); }
.nm-key-own::before { width: 28px; height: 4px; border-radius: 2px; background: var(--nm-own); }
.nm-size-home .nm-legend { font-size: 12px; }

/* The sheet of a way out. */
.nm-sheet { display: flex; flex-direction: column; gap: 12px; }
.nm-sheet-head { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
.nm-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.nm-state { margin-left: auto; font-weight: 600; font-size: 13px; }
.nm-state-up { color: var(--ok); }
.nm-state-down { color: var(--danger); }
.nm-state-unknown { color: var(--warn); }
.nm-speed-box { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.nm-cap { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.nm-speed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.nm-speed b { font-size: 26px; letter-spacing: -0.02em; }
.nm-speed span { color: var(--text-2); font-size: 13px; }
.nm-chart { display: block; margin-top: 6px; }
.nm-chart-line { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.nm-speed-note { margin-top: 4px; }
.nm-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.nm-test-row:empty { display: none; }
.nm-sheet .kv dd.nm-safe { color: var(--accent); }
.nm-edit { align-self: flex-start; text-decoration: none; }