/* 8.ro */
/* The network tools: a form with one field and its button, the answer in
   tables below. */
.net-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.net-form .field { flex: 1 1 16rem; min-width: 0; }
.net-form .btn { flex: 0 0 auto; }
.net-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.net-out { display: grid; gap: 0; }
.net-out > .kv + .kv { border-top: 1px solid var(--line); }
.net-sub { margin: 0; padding: 12px 16px 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.net-raw { margin: 0; padding: 14px 16px; max-height: 28rem; overflow: auto; font: .8125rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-top: 1px solid var(--line); }
.net-none { margin: 0; padding: 14px 16px; color: var(--muted); }
.net-state { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 .75rem/1.6 var(--font); background: var(--surface-3); color: var(--text); }
.net-state.is-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.net-state.is-bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.net-dim { color: var(--muted); }
.net-wide { overflow-x: auto; }
.net-wide .kv td, .net-wide .kv th { white-space: nowrap; }
.net-wide .kv td.net-wrap { white-space: normal; }
.net-out .kv td.mono { font-family: var(--mono); font-size: .8125rem; }
.net-lines td { white-space: pre-line; }