/**
 * Theme Options → Advanced → AI Assistant: the "connect your AI client" field.
 *
 * Everything is scoped under .us-mcp-connect, emitted by the mcp_connect field
 * template. Behaviour lives in usof/js/field_mcp_connect.js.
 */

/**
 * The panel keeps the tinted card the block had while it was a `message`
 * field — same padding, radius and colour as
 * `.usof-form-row.type_message .usof-form-row-desc` in message.css. Moving to
 * its own field type must not change how the screen reads.
 */
.us-mcp-connect {
	margin: 0;
	padding: 30px 40px;
	}

/* Every client block is rendered up front; the picker toggles .active. */
.us-mcp-block:not(.active) {
	display: none;
	}

.us-mcp-connect p {
	font-size: inherit;
	}
.us-mcp-connect h3 {
	margin: 0 0 .4em;
	}
.us-mcp-connect h4 {
	line-height: 1.4;
	margin: 20px 0 .4em;
	}
.us-mcp-connect hr {
	height: 20px;
	margin: 0;
	border: 0;
	}

select.us-mcp-client {
	font-weight: 600;
	}

.us-mcp-copy {
	display: flex;
	gap: 6px;
	align-items: center;
	}
	.us-mcp-copy input,
	.us-mcp-connect .us-mcp-pw {
		font-family: monospace;
		}
	.us-mcp-copy input {
		flex: 1 1 auto;
		min-width: 0;
		}

/**
 * Copy confirmation: a checkmark instead of a caption, so there is nothing to
 * translate. Drawn from two borders the way .ui-icon_close is in _general.css —
 * the UI icon font has no check glyph. The caption is hidden rather than
 * removed, so the button keeps its width while the mark shows.
 */
.us-mcp-copy-btn.copied .usof-button-text {
	visibility: hidden;
	}
.us-mcp-copy-btn.copied:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: .38em;
	height: .72em;
	border: solid currentColor;
	border-width: 0 .15em .15em 0;
	transform: translate(-50%,-60%) rotate(45deg);
	}

.us-mcp-connect .us-mcp-pw {
	display: block;
	max-width: 280px;
	margin: 6px 0;
	}

.us-mcp-manual-snippets {
	display: flex;
	gap: 20px;
	margin-top: 10px;
	}
	.us-mcp-manual-snippets > div {
		flex: 1 1 50%;
		}

.us-mcp-snippet {
	margin: 0;
	padding: 8px;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-all;
	background: var(--usof-color-white);
	border: 1px solid var(--usof-color-gray-5);
	border-radius: 2px;
	}

.us-mcp-alert {
	margin: 0 0 20px;
	padding: 10px 20px;
	border-radius: 4px;
	background: var(--usof-color-yellow-5);
	color: #000;
	}
.us-mcp-alert_error {
	background: var(--usof-color-red-5);
	}

/**
 * Button rows. `.usof-button` is inline-block with line-height 2.8, so a plain
 * text node next to it sits on the baseline rather than on the pill's centre —
 * flex is what lines the self-test result up with its button.
 */
.us-mcp-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 1em 0 0;
	}

/* Connections */
.us-mcp-connections {
	width: 100%;
	border-collapse: collapse;
	}
	.us-mcp-connections td {
		padding: 8px 0;
		border-bottom: 1px solid var(--usof-color-gray-5);
		vertical-align: middle;
		}
	.us-mcp-connections td + td {
		width: 1%;
		text-align: right;
		white-space: nowrap;
		}