/* Networking fundamentals: text inside diagrams, the calculators and the port finder */
.nfv{font-size:14px;fill:var(--ink)}
.motion-svg .nfmono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);white-space:pre}
.nf-rowhl{fill:var(--orange-tint);stroke:var(--orange-border)}
.nf-h{font-size:var(--fs-h4);margin:34px 0 12px}
.nf-note{max-width:75ch;margin:16px 0 0;color:var(--muted);font-size:.95rem}
.nf-narrow{max-width:560px}
.nf-tool{margin-top:24px}
.nf-sub{color:var(--muted);margin:4px 0 16px;max-width:70ch}
.nf-form{display:grid;grid-template-columns:minmax(10rem,auto) minmax(8rem,16rem);gap:10px 16px;align-items:center;max-width:34rem}
.nf-form label{font-weight:600;color:var(--ink);font-size:.92rem}
.nf-form input,.nf-form select{font:inherit;font-size:.95rem;padding:.5rem .7rem;border:1px solid var(--line-strong);border-radius:.6rem;background:var(--surface);color:var(--ink);width:100%}
.nf-checks{border:0;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.nf-checks legend{font-weight:600;color:var(--ink);margin-bottom:8px;font-size:.92rem;padding:0}
.nf-check{display:flex;gap:8px;align-items:baseline;font-size:.92rem;color:var(--text)}
.nf-check input{accent-color:var(--orange)}
.nf-oh{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.nf-out{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:20px 0 0;padding:14px 16px;background:var(--surface-2);border-radius:12px}
.nf-out dt{color:var(--muted);font-size:.92rem}
.nf-out dd{margin:0;font-weight:700;color:var(--ink);font-family:var(--font-mono);font-size:.95rem}
.nf-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.nf-search label{font-weight:600;font-size:.92rem;color:var(--ink)}
.nf-search input{font:inherit;padding:.5rem .8rem;border:1px solid var(--line-strong);border-radius:.6rem;min-width:min(16rem,100%)}
.nf-count{color:var(--muted);font-size:.9rem}
.no-js .nf-search{display:none}
.key-points.nf-kp2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.key-points.nf-kp2{grid-template-columns:1fr}.nf-form{grid-template-columns:1fr}.nf-checks{grid-template-columns:1fr}.nf-out{grid-template-columns:1fr;gap:2px}.nf-out dd{margin-bottom:8px}}