/* Runtime copy served from /styles/python-playground.css
	 (Keep this file in sync with src/styles/python-playground.css) */

:root {
	--py-playground-border: color-mix(in srgb, var(--sl-color-gray-5, #3a3a3a) 70%, transparent);
	--py-playground-btn-bg: color-mix(in srgb, var(--sl-color-gray-6, #1f2937) 88%, transparent);
	--py-playground-btn-bg-hover: color-mix(in srgb, var(--sl-color-gray-6, #111827) 88%, transparent);
	--py-playground-fg: var(--sl-color-gray-1, #f9fafb);
	--py-playground-accent: var(--sl-color-accent-high, #2563eb);
}

html[data-theme='light'] {
	--py-playground-border: color-mix(in srgb, var(--sl-color-gray-5, #d1d5db) 70%, transparent);
	--py-playground-btn-bg: var(--sl-color-gray-7, #ffffff);
	--py-playground-btn-bg-hover: color-mix(in srgb, #ffffff 90%, #e5e7eb);
	--py-playground-fg: var(--sl-color-gray-1, #111827);
}

.py-playground {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* Ensure [hidden] always wins over display:grid/block overrides */
.py-playground[hidden],
.py-playground__cm[hidden],
.py-playground__output-wrap[hidden] {
	display: none !important;
}

.py-playground__toolbar {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: nowrap;
}

/* When we mount the toolbar into rehype-pretty-code's title bar */
.py-playground__title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}

.py-playground__toolbar--in-title {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
}

/* Icon-only buttons in the title bar */
.py-playground__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--py-playground-border);
	border-radius: 8px;
	background: var(--py-playground-btn-bg);
	color: var(--py-playground-fg);
	cursor: pointer;
	padding: 0;
	opacity: 1;
	visibility: visible;
	margin-bottom: 1.5rem;
}

.py-playground__icon-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.py-playground__icon-btn:hover {
	background: var(--py-playground-btn-bg-hover);
}

.py-playground__icon-btn:active {
	transform: translateY(0.5px);
}

.py-playground__icon-btn--primary {
	border-color: color-mix(in oklab, var(--py-playground-accent) 55%, var(--py-playground-border));
	background: color-mix(in oklab, var(--py-playground-accent) 14%, var(--py-playground-btn-bg));
}

.py-playground__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1px solid var(--py-playground-border);
	background: var(--py-playground-btn-bg);
	color: var(--py-playground-fg);
	border-radius: 0.5rem;
	padding: 0.35rem 0.65rem;
	font-size: 0.9rem;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.py-playground__btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: currentColor;
}

.py-playground__btn:hover {
	filter: brightness(1.05);
}

.py-playground__btn:active {
	transform: translateY(1px);
}

.py-playground__btn--primary {
	background: var(--py-playground-accent);
	border-color: var(--py-playground-accent);
	color: white;
}

.py-playground__status {
	display: none;
}

.py-playground__editor {
	width: 100%;
	min-height: 11rem;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.95rem;
	line-height: 1.4;
	padding: 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--sl-color-gray-5, #ccc) 60%, transparent);
	background: var(--sl-color-gray-6, #0b1220);
	color: var(--sl-color-gray-1, #f9fafb);
	box-shadow: 10px 24px 50px 17px rgba(0, 0, 0, 0.06);
}

html[data-theme='light'] .py-playground__editor {
	background: var(--sl-color-gray-6, #f8fafc);
	color: var(--sl-color-gray-1, #0f172a);
}

.py-playground__output-wrap {
	border: 1px solid color-mix(in srgb, var(--sl-color-gray-5, #ccc) 60%, transparent);
	border-radius: 0.75rem;
	overflow: hidden;
}

.py-playground__output-label {
	padding: 0.4rem 0.75rem;
	font-size: 0.85rem;
	background: var(--sl-color-gray-6, #0b1220);
	border-bottom: 1px solid var(--sl-color-gray-5, #ccc);
}

html[data-theme='light'] .py-playground__output-label {
	background: var(--sl-color-gray-6, #f1f5f9);
}

.py-playground__output {
	margin: 0;
	padding: 0.75rem;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.9rem;
	line-height: 1.35;
	background: var(--sl-color-gray-7, #0f172a);
	color: var(--sl-color-gray-1, #f1f5f9);
}

html[data-theme='light'] .py-playground__output {
	background: var(--sl-color-gray-7, #ffffff);
	color: var(--sl-color-gray-1, #0f172a);
}

/* Monaco container (loaded dynamically) */
.py-playground__cm {
	/* Must be a positioned block with an explicit size for Monaco to measure
	   correctly. Without position:relative + width:100%, the editor can render
	   oversized or mis-calculate click/cursor coordinates. */
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--sl-color-gray-5, #ccc) 60%, transparent);
	border-radius: 0.75rem;
	/* Do NOT use overflow:hidden — it clips Monaco's absolutely-positioned
	   overlays (suggest widget, hover tooltip) and breaks hit-test coordinate
	   mapping, causing cursor misalignment. Clip only the visual corners. */
	overflow: visible;
	/* No min-height here — JS sets an explicit height after layout. */
}

.py-playground__cm .monaco-editor,
.py-playground__cm .monaco-editor-background,
.py-playground__cm .monaco-editor .overflow-guard,
.py-playground__cm .margin {
	border-radius: 0.75rem;
}

/* Starlight's content rule adds margin-top:1.5rem to consecutive block
   elements inside .content. Monaco's internal divs (scrollable-element,
   view-lines, cursors-layer, etc.) all get this margin which shifts the
   editor content down and causes cursor/line misalignment.
   Override with 0 for every element inside the Monaco container. */
.py-playground__cm * {
	margin-top: 0 !important;
}