.field {
	display: grid;
	gap: 8px;
}

.field > span,
.tool-meta-text {
	font-size: 13px;
	color: var(--muted);
}

.tool-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 28px;
}

.tool-meta-output {
	margin-bottom: 10px;
}

textarea,
.output-panel {
	width: 100%;
	min-height: 360px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--text);
	overflow: auto;
	border-radius: var(--radius-sm);
	border: 0;
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.06),
		inset 0 1px 2px rgba(22, 37, 29, 0.03);
}

.output-panel {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family:
		"Iosevka Fixed", "Iosevka", "SFMono-Regular", "IBM Plex Mono", monospace;
	font-size: 13px;
	line-height: 1.7;
	tab-size: 2;
}

.output-shell {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.78);
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.06),
		inset 0 1px 2px rgba(22, 37, 29, 0.03);
	overflow: hidden;
}

.tool-status {
	min-height: 20px;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--muted);
}

.tool-status.is-error {
	color: var(--danger);
}

.tool-status.is-success {
	color: var(--success);
}

@media (max-width: 860px) {
	textarea,
	.output-panel {
		min-height: 240px;
	}
}