/*
 * Free-tool widget styling. Self-hosted, no CDN — RenderPerformanceTest asserts this.
 * Loaded non-blocking (media=print flip) like the rest of the non-critical CSS.
 */

.tool-widget {
    border: 1px solid rgba(255, 255, 255, .08);
}

/* Bot trap: must be unreachable for humans and assistive tech, but still a real, fillable field
   so that naive form-filling bots trip it. display:none is deliberate over off-screen positioning,
   which some bots now detect. */
.tool-honeypot {
    display: none !important;
}

.tool-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.tool-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.tool-summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

.tool-summary-value {
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
}

.tool-section-title {
    font-size: 20px;
    margin: 28px 0 16px;
}

.tool-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.tool-card {
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.tool-card-name {
    font-size: 16px;
    font-family: "JetBrains Mono", monospace;
    word-break: break-word;
    margin-bottom: 8px;
}

.tool-card-desc {
    font-size: 14px;
    opacity: .75;
    margin-bottom: 12px;
}

.tool-plain-list {
    padding-left: 20px;
    opacity: .8;
}

/* Schemas and transcripts can be wide; they scroll inside their own box rather than pushing the
   page into horizontal scroll. */
.tool-card-schema pre,
.tool-transcript pre,
.tool-raw-json pre,
.tool-raw {
    max-height: 360px;
    overflow: auto;
    font-size: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    margin-top: 8px;
    white-space: pre;
}

.tool-card-schema summary,
.tool-raw-json summary,
.tool-transcript summary {
    cursor: pointer;
    font-size: 13px;
    opacity: .7;
}

.tool-transcript {
    margin-top: 28px;
}

/* The payload every result used to be. Collapsed, last, and always present: these pages are read
   by people debugging their own servers, and the presentation layer should not be the only way to
   see what came back. */
.tool-raw-json {
    margin-top: 20px;
}

.tool-claim {
    margin-top: 28px;
    padding: 20px 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tool-claim-text {
    margin: 0;
    flex: 1 1 320px;
    opacity: .85;
}

.tool-hub-card {
    display: block;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    color: inherit;
}

/* ------------------------------------------------------------------------------------------------
   The verdict: one headline answer per result, then the checklist behind it. Shared by every tool
   that produces a result, including the failure states -- a server that did not answer and a daily
   limit that ran out are both outcomes of asking, and belong in the same place.
   ------------------------------------------------------------------------------------------------ */

.tool-verdict {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 24px;
}

.tool-verdict-ok {
    background: rgba(60, 190, 130, .12);
    border-color: rgba(60, 190, 130, .35);
}

.tool-verdict-warn {
    background: rgba(224, 163, 60, .12);
    border-color: rgba(224, 163, 60, .35);
}

.tool-verdict-bad {
    background: rgba(245, 97, 75, .12);
    border-color: rgba(245, 97, 75, .35);
}

.tool-verdict-icon {
    font-size: 32px;
    line-height: 1.1;
    flex-shrink: 0;
}

.tool-verdict-ok .tool-verdict-icon { color: #3cbe82; }
.tool-verdict-warn .tool-verdict-icon { color: #e0a33c; }
.tool-verdict-bad .tool-verdict-icon { color: #f5614b; }

.tool-verdict-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tool-verdict-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.tool-verdict-text {
    margin: 0;
    opacity: .85;
}

.tool-verdict-action {
    margin-top: 16px;
}

/* The banner takes focus when a run completes, so that a screen reader announces the verdict and a
   phone visitor is not left staring at an unchanged form. :focus-visible rather than :focus, so
   that programmatic focus does not paint a ring for someone who clicked. */
.tool-verdict:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 3px;
}

.tool-check-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.tool-check-icon {
    font-size: 20px;
    line-height: 1.4;
    flex-shrink: 0;
}

.tool-check-pass .tool-check-icon { color: #3cbe82; }
.tool-check-fail .tool-check-icon { color: #f5614b; }
.tool-check-warn .tool-check-icon { color: #e0a33c; }
.tool-check-skip .tool-check-icon { opacity: .4; }

.tool-check-label {
    font-weight: 600;
}

.tool-check-detail {
    font-size: .9rem;
    opacity: .75;
    margin-top: 2px;
}

.tool-name-list {
    margin-top: 28px;
}

/* ------------------------------------------------------------------------------------------------
   Security Scanner: the report card.
   ------------------------------------------------------------------------------------------------ */

.tool-grade {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

.tool-grade-letter {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    flex-shrink: 0;
}

.tool-grade-a .tool-grade-letter { background: rgba(60, 190, 130, .18); color: #4ad495; }
.tool-grade-b .tool-grade-letter { background: rgba(60, 190, 130, .12); color: #7fd8b0; }
.tool-grade-c .tool-grade-letter { background: rgba(224, 163, 60, .16); color: #e8bb6a; }
.tool-grade-d .tool-grade-letter { background: rgba(245, 97, 75, .16); color: #f58a76; }
.tool-grade-f .tool-grade-letter { background: rgba(245, 97, 75, .22); color: #ff7a63; }

.tool-grade-score {
    font-weight: 600;
    margin-bottom: 4px;
}

.tool-grade-caption {
    opacity: .8;
}

.tool-grade-summary {
    margin: 20px 0 12px;
    opacity: .8;
}

/* The grade, demoted. The auth and OAuth checkers run the same backend action as the scanner and
   so carry a full report card, but each already has a headline of its own; two competing summary
   judgements of one server is one too many. The letter stays, as a link to the page it headlines. */
.tool-grade-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    margin: 28px 0 12px;
    font-size: .95rem;
    opacity: .8;
}

.tool-grade-line a {
    text-decoration: underline;
}

/* Endpoint URLs and tool names: values a reader may need to compare character by character. */
.tool-mono {
    font-family: "JetBrains Mono", monospace;
    font-size: .85rem;
    word-break: break-all;
}

/* Current / Previous / Original beside a protocol revision. */
.tool-revision-tag {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .55;
    margin-left: 8px;
}

.tool-finding-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-finding {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border-left: 3px solid rgba(255, 255, 255, .2);
}

.tool-finding-critical { border-left-color: #ff7a63; }
.tool-finding-high     { border-left-color: #f58a76; }
.tool-finding-medium   { border-left-color: #e8bb6a; }
.tool-finding-low      { border-left-color: rgba(255, 255, 255, .3); }
.tool-finding-info     { border-left-color: rgba(120, 170, 255, .5); }

.tool-finding-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.tool-finding-severity {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .75;
}

.tool-finding-title {
    font-weight: 600;
}

.tool-finding-tool {
    font-size: .85rem;
    opacity: .7;
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
}

.tool-finding-detail {
    margin: 8px 0 0;
    opacity: .8;
    font-size: .93rem;
}

.tool-passed {
    margin-top: 28px;
}

/* Scope limits sit on the result, not in the FAQ: an "A" that reads as "audited" would be a
   misrepresentation, and these reports get shared. */
.tool-scope {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .15);
}

.tool-scope-text {
    margin: 0;
    font-size: .9rem;
    opacity: .75;
}

/* ------------------------------------------------------------------------------------------------
   Token calculator: headline numbers, cost table, per-tool bars.
   ------------------------------------------------------------------------------------------------ */

.tool-stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.tool-stat {
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.tool-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.tool-stat-label {
    margin-top: 4px;
    opacity: .85;
}

.tool-stat-hint {
    margin-top: 2px;
    font-size: .8rem;
    opacity: .55;
}

.tool-cost {
    margin-top: 28px;
}

.tool-cost-table {
    width: 100%;
    max-width: 420px;
}

.tool-cost-table td {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tool-cost-amount {
    text-align: right;
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
}

.tool-cost-note {
    margin: 12px 0 0;
    font-size: .85rem;
    opacity: .7;
}

.tool-heaviest {
    margin-top: 28px;
}

.tool-bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tool-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .9rem;
    margin-bottom: 4px;
}

.tool-bar-name {
    font-family: "JetBrains Mono", monospace;
    overflow-wrap: anywhere;
}

.tool-bar-value {
    opacity: .7;
    flex-shrink: 0;
}

.tool-bar-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.tool-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f5614b, #fa7545);
}

/* ------------------------------------------------------------------------------------------------
   Paste-input widget and generated code blocks (OpenAPI converter, config tools).
   ------------------------------------------------------------------------------------------------ */

.tool-textarea {
    font-family: "JetBrains Mono", monospace;
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
}

.tool-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: .7;
}

.tool-privacy .material-symbols-rounded {
    font-size: 16px;
}

.tool-code-block {
    margin-top: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
}

.tool-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .05);
}

.tool-code-title {
    font-weight: 600;
    font-size: .9rem;
}

.tool-code {
    margin: 0;
    padding: 16px;
    max-height: 460px;
    overflow: auto;
    background: rgba(0, 0, 0, .35);
    font-family: "JetBrains Mono", monospace;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre;
}

/* ------------------------------------------------------------------------------------------------
   Schema linter: AI-suggested rewrites, kept visually distinct from the deterministic findings.
   ------------------------------------------------------------------------------------------------ */

.tool-rewrite-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-rewrite {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border-left: 3px solid #8b7af6;
}

.tool-rewrite-issue {
    margin: 6px 0 12px;
    opacity: .8;
    font-size: .93rem;
}

.tool-rewrite-suggestion {
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(139, 122, 246, .1);
}

.tool-rewrite-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .7;
    margin-bottom: 4px;
}

.tool-rewrite-text {
    margin: 0;
}

/* ------------------------------------------------------------------------------------------------
   Playground preview: the result is the product demo, so it reads like a playground, not a report.
   ------------------------------------------------------------------------------------------------ */

.tool-preview-header {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.tool-preview-title {
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.tool-preview-meta {
    opacity: .7;
    font-size: .9rem;
}

.tool-preview-about,
.tool-preview-intro {
    margin-top: 28px;
}

.tool-preview-summary {
    margin: 0;
    line-height: 1.7;
}

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

.tool-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: .85rem;
}

.tool-chat-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tool-chat {
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.tool-chat-summary {
    font-weight: 600;
    margin-bottom: 14px;
}

.tool-chat-message {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.tool-chat-user {
    background: rgba(139, 122, 246, .12);
}

.tool-chat-assistant {
    background: rgba(255, 255, 255, .04);
}

.tool-chat-role {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .6;
    margin-bottom: 4px;
}

.tool-chat-text {
    white-space: pre-wrap;
    line-height: 1.6;
}

.tool-preview-claim {
    margin-top: 28px;
    padding: 20px 24px;
    border-radius: 12px;
    background: rgba(245, 97, 75, .1);
    border: 1px solid rgba(245, 97, 75, .3);
}

/* ------------------------------------------------------------------------------------------------
   Config matrix: client picker and the comparison table on the family hubs.
   ------------------------------------------------------------------------------------------------ */

.tool-client-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    color: inherit;
}

.tool-client-card:hover {
    border-color: rgba(245, 97, 75, .5);
}

.tool-client-name {
    font-weight: 600;
}

.tool-client-meta {
    font-size: .82rem;
    opacity: .65;
}

.tool-compare-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

.tool-compare-table th,
.tool-compare-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
    font-size: .92rem;
}

.tool-compare-table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

/* Language matrix: SDK status badge above the starter snippet. */
.tool-lang-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.tool-lang-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    background: rgba(60, 190, 130, .16);
    color: #7fd8b0;
}

.tool-lang-badge-community {
    background: rgba(224, 163, 60, .16);
    color: #e8bb6a;
}

.tool-lang-sdk {
    font-family: "JetBrains Mono", monospace;
    font-size: .85rem;
    opacity: .75;
}

/* ------------------------------------------------------------------------------------------------
   Preview: server-rendered markdown, and tool calls shown the way the real playground shows them.
   ------------------------------------------------------------------------------------------------ */

/* Markdown arrives as real elements now, so the defaults have to be sane rather than inherited
   from a <p> that no longer wraps everything. */
.tool-preview-summary > :first-child { margin-top: 0; }
.tool-preview-summary > :last-child  { margin-bottom: 0; }

.tool-preview-summary h1,
.tool-preview-summary h2,
.tool-preview-summary h3 {
    font-size: 1.05rem;
    margin: 18px 0 8px;
}

.tool-preview-summary p,
.tool-preview-summary li {
    line-height: 1.7;
}

.tool-preview-summary ul,
.tool-preview-summary ol {
    padding-left: 1.25rem;
}

.tool-preview-summary code {
    font-family: "JetBrains Mono", monospace;
    font-size: .85em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
}

.tool-chat-text > :first-child { margin-top: 0; }
.tool-chat-text > :last-child  { margin-bottom: 0; }

/* A tool call inside an example conversation. Collapsed by default: the interesting part is that
   the agent called a tool at all, not the argument list. */
.tool-chat-toolcall {
    margin: 10px 0 4px;
    border-radius: 10px;
    border: 1px solid rgba(139, 122, 246, .35);
    background: rgba(139, 122, 246, .08);
    padding: 10px 12px;
}

.tool-chat-toolcall-head {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
}

.tool-chat-toolcall-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    opacity: .65;
    font-size: .72rem;
}

.tool-chat-toolcall-name {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
}

.tool-chat-params {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 10px 0;
    font-size: .85rem;
}

.tool-chat-param-name {
    font-family: "JetBrains Mono", monospace;
    opacity: .7;
}

.tool-chat-param-value {
    overflow-wrap: anywhere;
}

.tool-chat-toolresult {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;
    white-space: pre-wrap;
    max-height: 220px;
    overflow: auto;
}