/* MCP config generator: the few pieces /assets/tools/tools.css does not
   cover (name/value rows, the per-client output panel, checker findings).
   Tokens from /styles.css only, so both themes follow automatically. */

.mcp-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mcp-fieldset > legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.mcp-fieldset[hidden] {
  display: none;
}

/* Pill bars inside the output column sit on --surface-2 already. */
.tool-output .tool-segmented {
  background: var(--surface);
}

.tool-output .tool-segmented label:has(input:checked) {
  background: var(--surface-3);
}

.tool-field input.mcp-mono,
.mcp-kv-row .tool-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
}

/* Environment variables and headers: name | value | remove. */
.mcp-kv-block {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.mcp-kv {
  display: grid;
  gap: 8px;
  width: 100%;
}

.mcp-kv-head,
.mcp-kv-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) auto;
  gap: 8px;
  align-items: center;
}

.mcp-kv-head[hidden] {
  display: none;
}

.mcp-kv-head span {
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
}

.mcp-kv-row .tool-input {
  padding: 9px 11px;
}

.mcp-kv-remove {
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  font-size: 16px;
}

.mcp-issues {
  display: grid;
  gap: 8px;
}

.mcp-issues:empty {
  display: none;
}

.mcp-inline-action {
  margin-left: 4px;
  padding: 4px 9px;
  vertical-align: baseline;
}

/* The generated config for the chosen client. */
.mcp-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tool-app .mcp-panel h3 {
  margin: 0;
  font-size: 17px;
}

.mcp-locations th {
  width: 34%;
  white-space: normal;
}

.mcp-locations td {
  overflow-wrap: anywhere;
}

.mcp-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.mcp-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.mcp-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-app code {
  padding: 0.08em 0.35em;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elev);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.tool-app .tool-message code {
  background: var(--surface);
}

.mcp-notes li {
  display: block;
  padding-left: 14px;
  position: relative;
}

.mcp-notes li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
}

/* Checker results. */
.mcp-val-status {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.mcp-val-status .tool-badge {
  margin-right: 4px;
}

.mcp-findings li {
  align-items: flex-start;
}

.mcp-findings .tool-badge {
  flex: none;
  min-width: 68px;
  justify-content: center;
}

.mcp-finding {
  min-width: 0;
}

.mcp-finding p {
  margin: 0;
}

.mcp-excerpt {
  max-width: 100%;
  margin: 6px 0 0;
  overflow-x: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--text);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
}

/* Two buttons in the closing call to action. */
.final-cta .mcp-cta-actions {
  margin-top: 0;
}

@media (max-width: 760px) {
  .mcp-findings .tool-badge {
    min-width: 0;
  }
}

/* The guide's client table: keep file names and keys whole, so the columns
   size to their content and the wrapper scrolls sideways on a phone. */
.mcp-guide > .compare-wrap {
  max-width: 1100px;
  margin: 1.4rem auto 0;
}

.mcp-where-table code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.87em;
  overflow-wrap: normal;
}

.mcp-where-table td,
.mcp-where-table th {
  font-size: 0.93rem;
}

.mcp-where-table tbody th {
  white-space: normal;
}