/* =====================================================================
   subnet-overlap-checker.css : only for the Subnet Overlap Checker page
   Loaded with:  $page_styles = ['/assets/css/subnet-overlap-checker.css'];
   Shared calculator styles (buttons, fonts, result tables, show-columns) come from site.css.
   ===================================================================== */

/* Result table box: fixed width, scrolls sideways and up/down */
.res-scroll { max-width: 100%; max-height: 360px; overflow: auto; border: 1px solid #d5dbe3; border-radius: 8px; }
.res-table { border-radius: 0; }
.res-table th, .res-table td { text-align: center; }
@media (min-width: 1024px) { .res-scroll { max-height: 420px; } }

/* Example box (copy it, then paste it into the box below) */
.ex-box { margin: 0 0 8px; padding: 8px 12px; background: #f1f8f8; border: 1px dashed #b9dcdd; border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-input); line-height: 1.7; color: #22577A; white-space: pre-wrap; overflow-x: auto; }

/* Big box for the list of subnets */
textarea.tool-input { height: auto; min-height: 140px; padding: 9px 12px; line-height: 1.6; resize: vertical;
  font-family: 'IBM Plex Mono', monospace; display: block; }
@media (min-width: 1024px) { textarea.tool-input { min-height: 160px; } }

/* Verdict line and status words */
.verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-label); font-weight: 700; margin: 0 0 6px; }
.verdict.ok  { background: #e8f6ee; color: #15803d; border: 1px solid #bfe5cd; }
.verdict.bad { background: #fdecec; color: #b91c1c; border: 1px solid #f5c2c2; }
td.st-ok  { color: #15803d; font-weight: 600; }
td.st-bad { color: #b91c1c; font-weight: 600; }

/* Small headings inside the result card */
.sub-title { font-size: var(--fs-title); font-weight: 700; color: #22577A; margin: 10px 0 5px; line-height: 1.3; }
.sub-rule { border: 0; border-top: 1px solid #e3e8ee; margin: 12px 0 0; }

/* Guide */
.article .ex-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: #22577A; margin: 14px 0 6px; }