/* Network tools (/tools/...): only what site.css does not already have. Pages use .prose, .field, .btn, .table,
   .kv, .copy, .pill and .faq from site.css; this file adds the tool area, textarea/select fields and the big address. */

.tool .tool-crumb { margin: 0 0 8px; font-size: var(--small); }
.tool .tool-crumb a { color: var(--muted); }
.tool .tool-crumb a:hover { color: var(--text); }
.tool h1 { margin-bottom: 24px; }
.tool .tool-box { margin: 0 0 56px; }
.tool .tool-wide { max-width: none; }
.tool .faq { margin-top: 24px; }
.tool .tool-attr { margin-top: 32px; }
.tool .tool-more { margin-top: 16px; }

/* fields site.css does not style */
.field textarea, .field select {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg); color: var(--text); font: var(--w-regular) var(--body)/var(--body-lh) var(--font); transition: border-color .15s;
}
.field select { height: var(--control-h); padding-block: 0; }
.field textarea { min-height: 148px; resize: vertical; font-family: var(--mono); font-size: 15px; line-height: 24px; }
.field textarea[dir="ltr"] { text-align: left; }
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field textarea:hover, .field select:hover { border-color: var(--muted); }
.field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field input[dir="ltr"]::placeholder { text-align: left; }

/* a form: the field and its button side by side; on phones the button goes under it */
.tool-form { display: flex; align-items: flex-end; gap: 12px; }
.tool-form .field { flex: 1; min-width: 0; margin: 0; }
.tool-form .btn { flex: none; }
.tool-form + .err { margin-top: 12px; }
.tool-opts { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.tool-opts .field { flex: 0 1 280px; margin: 0; }
.tool-note { margin: 12px 0 0; }

/* the caller's address */
.ip-big { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.ip-big output { min-width: 0; font: var(--w-semibold) 32px/1.3 var(--mono); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.ip-big output.is-v6 { font-size: 22px; }
.tool .kv { margin-bottom: 16px; }
.tool .kv dd { display: block; overflow-wrap: anywhere; }

/* results */
.tool-out { margin-top: 32px; }
.tool .table-wrap { margin: 0; }
.tool .table td { white-space: normal; overflow-wrap: anywhere; }
.tool .table td.mono, .tool .table td .mono { font-family: var(--mono); }
.tool .table td:first-child { white-space: nowrap; }
.tool-hdrs td:first-child { font-weight: var(--w-medium); }
.tool-hdrs td:last-child { font-family: var(--mono); font-size: 13px; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 24px; }
.verdict .pill { flex: none; }
.pill.warn { background: var(--danger-soft); color: var(--danger); }
.tool-status { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--muted); }
.tool-status:empty { display: none; }

/* /tools/: the list of tools */
.tool-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--border); }
.tool-list li { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--border); }
.tool-list h2 { margin: 0 0 4px; font-size: 18px; line-height: 28px; }
.tool-list h2 a { color: var(--text); }
.tool-list h2 a:hover { color: var(--accent); }
.tool-list p { margin: 0; color: var(--muted); }

[dir="ltr"] .tool .table td, [dir="ltr"] .tool .table th { text-align: left; }

@media (max-width: 600px) {
  .tool-form, .tool-opts { flex-direction: column; align-items: stretch; }
  .tool-opts .field { flex: none; }
  .ip-big { flex-wrap: wrap; gap: 12px; }
  .ip-big output { font-size: 26px; }
  .ip-big output.is-v6 { font-size: 18px; }
  .tool .table td:first-child { white-space: normal; }
  .tool .table td.is-empty { display: none; } /* a card shows only the values it has */
  [dir="ltr"] .tool .table td { text-align: right; }
  [dir="ltr"] .tool .table td[data-label]::before { text-align: left; }
  .tool .table td > * { min-width: 0; }
}