/* API Playground — shared by /playground and dashboard embeds */
.pg-wrap { min-height: 60vh; }
.pg-card { border: 1px solid #e3e6f0; border-radius: .5rem; background: #fff; box-shadow: 0 .1rem .5rem rgba(58,59,69,.08); }
.pg-card .pg-card-header { padding: .75rem 1.25rem; border-bottom: 1px solid #e3e6f0; font-weight: 700; color: #4e73df; display: flex; align-items: center; justify-content: space-between; }
.pg-card .pg-card-body { padding: 1.25rem; }

.pg-catalog-card {
	position: sticky;
	top: calc(var(--pwl-nav-sticky-offset, 0px) + 1rem);
	max-height: calc(100vh - var(--pwl-nav-sticky-offset, 0px) - 2rem);
	overflow-y: auto;
}
.pg-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #858796; font-weight: 700; padding: .75rem 1.25rem .25rem; }
.pg-endpoint-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .5rem 1.25rem; cursor: pointer; border-left: 3px solid transparent; color: #3a3b45; font-size: .85rem; }
.pg-endpoint-item:hover { background: #f8f9fc; }
.pg-endpoint-item.active { background: #eef2ff; border-left-color: #4e73df; font-weight: 600; }
.pg-endpoint-item .pg-ep-name { flex: 1 1 auto; min-width: 0; }
.pg-endpoint-item .badge { flex: 0 0 auto; }
.pg-method-badge { font-family: 'SF Mono','Fira Code',monospace; font-size: .62rem; min-width: 2.6rem; }

.pg-code { background: #1e1e2e; color: #cdd6f4; border-radius: .5rem; padding: 1rem 1.25rem; font-family: 'SF Mono','Fira Code',monospace; font-size: .8rem; overflow-x: auto; position: relative; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 0; }
.pg-code .btn-copy-code { position: absolute; top: .5rem; right: .5rem; background: rgba(255,255,255,.15); border: none; color: #cdd6f4; border-radius: .35rem; padding: .25rem .6rem; font-size: .72rem; cursor: pointer; z-index: 2; }
.pg-code .btn-copy-code:hover { background: rgba(255,255,255,.3); }
.pg-code .btn-copy-code.btn-copy-hero { background: #4e73df; color: #fff; }
.pg-code .btn-copy-code.btn-copy-hero:hover { background: #2e59d9; }
.pg-k { color: #89b4fa; } .pg-s { color: #a6e3a1; } .pg-n { color: #fab387; } .pg-b { color: #f38ba8; } .pg-0 { color: #f38ba8; font-style: italic; }

.pg-url-preview { background: #1e1e2e; color: #cdd6f4; border-radius: .4rem; padding: .55rem .8rem; font-family: 'SF Mono','Fira Code',monospace; font-size: .74rem; word-break: break-all; position: relative; }
.pg-url-preview .pg-url-method { font-weight: 700; margin-right: .4rem; }
.pg-url-preview .pg-url-body { display: block; color: #a6adc8; margin-top: .2rem; }
.pg-url-preview .pg-url-host-note { display: block; margin-top: .3rem; }
.pg-url-preview .btn-copy-code { position: absolute; top: .35rem; right: .35rem; background: rgba(255,255,255,.15); border: none; color: #cdd6f4; border-radius: .35rem; padding: .15rem .5rem; font-size: .68rem; cursor: pointer; }

.pg-response-pre { max-height: 480px; overflow: auto; }
.pg-response-empty { color: #858796; text-align: center; padding: 2.5rem 1rem; font-size: .9rem; }
.pg-img-preview img { max-width: 100%; max-height: 320px; border: 1px solid #e3e6f0; border-radius: .4rem; margin-top: .75rem; }

.pg-key-input { font-family: 'SF Mono','Fira Code',monospace; font-size: .8rem; background: #f8f9fc; }
.pg-form-label { font-size: .8rem; font-weight: 600; color: #3a3b45; margin-bottom: .25rem; }
.pg-form-label .pg-req { color: #e74a3b; }
.pg-help { font-size: .74rem; color: #858796; }
.pg-count-note { font-size: .74rem; color: #858796; }
.pg-count-note.pg-over { color: #e74a3b; font-weight: 700; }

.pg-send-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pg-cost-note { font-size: .78rem; color: #858796; }
.pg-cost-note .pg-balance-chip { font-weight: 700; color: #1cc88a; }

.pg-snippet-tabs .nav-link { font-size: .78rem; padding: .35rem .75rem; }
.pg-latency { font-size: .75rem; color: #858796; }
@media (max-width: 991.98px) { .pg-catalog-card { position: static; max-height: none; } }

/* Dashboard embed: compact chips instead of the catalog sidebar */
.pg-embed-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 1rem;
}
.pg-embed-chips .pg-endpoint-item {
	width: auto;
	border: 1px solid #e3e6f0;
	border-radius: .5rem;
	border-left-width: 3px;
	padding: .45rem .8rem;
	background: #fff;
}
.pg-embed-chips .pg-endpoint-item.active {
	background: #eef2ff;
}
.pg-embed .pg-card { margin-bottom: 1rem; }
.pg-embed .pg-full-catalog {
	font-size: .82rem;
	font-weight: 600;
}