/* ============================================================
   Shared styling for the Website & Network Tools cluster
   ============================================================

   DNS/HTTP/email-security tools all have the same shape: one or
   two inputs, a fetch button, and a results table or a set of
   status chips. This is that shape once.

   Colours come from a2z-tokens.css where the site already
   defines them, with local fallbacks so the file is not
   load-order dependent - same convention as simple-tools.css.
   ============================================================ */

.nt-wrap {
    max-width: 960px;
    margin: 0 auto 28px;
}

.nt-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6ee);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
}

.nt-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    align-items: end;
}

.nt-field { display: flex; flex-direction: column; gap: 6px; }

.nt-field label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2, #454d63);
    margin: 0;
}

.nt-field input[type="text"],
.nt-field select {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--border, #d9dde8);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #10162b);
}

.nt-field input:focus,
.nt-field select:focus {
    outline: none;
    border-color: #5b8def;
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .18);
}

.nt-hint { font-size: 12.5px; color: var(--ink-3, #5f677d); }
.nt-error {
    font-size: 13.5px;
    color: #b3261e;
    background: #fdeceb;
    border: 1px solid #f4c6c2;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
}

.nt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.nt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border, #d9dde8);
    background: #fff;
    color: var(--ink-2, #454d63);
    cursor: pointer;
}

.nt-btn:hover { border-color: #b9caf6; color: #3a66cc; }
.nt-btn:disabled { opacity: .6; cursor: default; }

.nt-btn-primary {
    background: linear-gradient(140deg, #5b8def, #7b5bf0);
    border-color: transparent;
    color: #fff;
}
.nt-btn-primary:hover { color: #fff; filter: brightness(1.05); }

.nt-loading {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-3, #5f677d);
    margin-top: 10px;
}
.nt-loading.is-active { display: flex; }

.nt-spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border, #d9dde8);
    border-top-color: #5b8def;
    animation: nt-spin .7s linear infinite;
}
@keyframes nt-spin { to { transform: rotate(360deg); } }

/* ---- results ---- */

.nt-results { margin-top: 16px; }

.nt-table-wrap { overflow-x: auto; }

.nt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 480px;
}

.nt-table th,
.nt-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft, #eef0f5);
    vertical-align: top;
    word-break: break-word;
}

.nt-table th {
    font-weight: 700;
    color: var(--ink-2, #454d63);
    background: var(--surface-2, #f7f8fc);
}

.nt-table td.nt-mono,
.nt-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }

.nt-copy {
    border: 1px solid var(--border, #d9dde8);
    background: #fff;
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 12px;
    cursor: pointer;
    color: var(--ink-3, #5f677d);
}
.nt-copy:hover { border-color: #b9caf6; color: #3a66cc; }

/* ---- status chips ---- */

.nt-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.nt-badge-ok { background: #e6f6ec; color: #1a7f45; }
.nt-badge-warn { background: #fff4de; color: #9a6300; }
.nt-badge-error { background: #fdeceb; color: #b3261e; }
.nt-badge-neutral { background: var(--surface-2, #f0f1f6); color: var(--ink-3, #5f677d); }

.nt-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- summary / verdict box, reused from simple-tools' .st-out shape ---- */

.nt-out {
    background: linear-gradient(135deg, #eef1fd, #f6f2ff);
    border: 1px solid #ddd7fb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.nt-out-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6a45d8;
    margin-bottom: 6px;
}

.nt-warn-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2, #454d63); }
.nt-warn-list li { margin-bottom: 4px; }

@media (max-width: 560px) {
    .nt-panel { padding: 15px; }
}

/* The site's dark theme sets .theme-dark on body. */
.theme-dark .nt-panel { background: #171a22; border-color: #2b3040; }
.theme-dark .nt-field input,
.theme-dark .nt-field select { background: #0f1218; border-color: #2b3040; color: #e8eaf2; }
.theme-dark .nt-btn { background: #171a22; border-color: #2b3040; color: #c9cede; }
.theme-dark .nt-table th { background: #12151c; color: #c9cede; }
.theme-dark .nt-table td { border-color: #232838; }
.theme-dark .nt-out { background: #191a2b; border-color: #322a55; }
.theme-dark .nt-copy { background: #171a22; border-color: #2b3040; color: #c9cede; }
.theme-dark .nt-error { background: #2a1414; border-color: #4a2222; color: #ff9d94; }