/* ============================================================
   Small additions to the site's .ts-* and .pn-* tool-shell design
   system (wwwroot/css/tool-shell.css), scoped for the Website,
   Email Security & Technical SEO tools.
   ============================================================

   EVERYTHING HERE IS SCOPED UNDER .ts, exactly like tool-shell.css
   itself, so loading this file changes no page that has not
   opted into the .ts kit. tool-shell.css is not edited - it is
   the shared base every ts-* page (including the existing text-
   transform tools) already depends on being stable, so new needs
   are added here instead of risking that file.

   tool-shell.css already defines .pn-row/.pn-badge with is-ok and
   is-bad (used by the push tester's per-token rows) - these check
   lists need two more states it does not yet have: a warning that
   is neither pass nor fail, and "not applicable/unable to check",
   which must never render as though it were a failure.
   ============================================================ */

.ts .pn-row.is-warn { border-color: rgba(248, 154, 77, .5); background: rgba(248, 154, 77, .09); }
.ts .pn-row.is-warn .pn-badge { background: rgba(248, 154, 77, .22); color: #92400e; }

.ts .pn-row.is-neutral { border-color: var(--az-line); background: var(--az-line-2); }
.ts .pn-row.is-neutral .pn-badge { background: var(--az-line-2); color: var(--az-ink-3); }

/* Monospace detail text inside a row (a DNS record, a header value,
   a URL) - wraps rather than forcing the row wider, which is what
   .pn-detail already does; this only sets the font. */
.ts .ts-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    overflow-wrap: anywhere;
}

/* A results/summary area that mirrors .ts-panel-plain but for
   longer structured output (tables, JSON, multi-field detail) below
   a check list - same soft-gray "this is output, not input" grounding. */
.ts .ts-output {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--az-r);
    background: var(--az-line-2);
    border: 1px solid var(--az-line);
}

.ts .ts-output-table-wrap { overflow-x: auto; }

.ts .ts-output table {
    width: 100%;
    border-collapse: collapse;
    font-size: .89rem;
}

.ts .ts-output th,
.ts .ts-output td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--az-line);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ts .ts-output th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--az-ink-3);
}