/* RR Code Block — shared styles (front end + editor) */

.rr-code-block {
	background: #0c0f17;
	border: 1px solid #20283c;
	border-radius: 8px;
	overflow: hidden;
	margin: 24px 0;
	font-family: 'IBM Plex Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
	max-width: 100%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.rr-code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: #161b29;
	border-bottom: 1px solid #20283c;
}

.rr-code-filename {
	font-size: 12px;
	color: #8b95a9;
	font-family: inherit;
}

.rr-copy-btn {
	background: none;
	border: 1px solid #252c3d;
	border-radius: 5px;
	color: #8b95a9;
	font-size: 11px;
	line-height: 1;
	padding: 4px 10px;
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: border-color 0.15s, color 0.15s;
}

.rr-copy-btn:hover {
	border-color: #e8553e;
	color: #e8553e;
}

.rr-copy-btn.copied {
	color: #22c55e !important;
	border-color: #22c55e !important;
}

.rr-code-body {
	margin: 0;
	padding: 20px 0;
	font-size: 13.5px;
	line-height: 0.9;
	overflow-x: auto;
	color: #e2e8f0;
	font-family: inherit;
	white-space: pre;
	tab-size: 2;
}

/* Each line is its own span so it can be highlighted individually */
.rr-code-body .rr-line {
	display: flex;
	padding: 0;
	border-left: 3px solid transparent;
}

/* Line-number gutter on the left */
.rr-code-body .rr-line-no {
	flex: 0 0 auto;
	width: 2.5em;
	padding-right: 16px;
	text-align: right;
	color: #4a5568;
	user-select: none;
	-webkit-user-select: none;
}

/* Actual code content beside the gutter */
.rr-code-body .rr-line-code {
	flex: 1 1 auto;
	padding-right: 20px;
	white-space: pre;
}

/* Important / highlighted line */
.rr-code-body .rr-line-hl {
	background: rgba(232, 85, 62, 0.12);
	border-left-color: #e8553e;
}

.rr-code-body .rr-line-hl .rr-line-no {
	color: #e8553e;
}

/* Syntax tokens */
.rr-code-body .t-kw   { color: #c792ea; }
.rr-code-body .t-type { color: #82aaff; }
.rr-code-body .t-str  { color: #c3e88d; }
.rr-code-body .t-key  { color: #f07178; }
.rr-code-body .t-val  { color: #f78c6c; }
.rr-code-body .t-cmt  { color: #546e7a; font-style: italic; }
.rr-code-body .t-punc { color: #89ddff; }

/* ── Editor-only tweaks ── */
.rr-codeblock-editor-wrap .rr-code-editor-textarea textarea {
	font-family: 'IBM Plex Mono', 'Fira Code', Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	background: #0c0f17;
	color: #e2e8f0;
	border: none;
	border-radius: 0;
	padding: 16px 20px;
	white-space: pre;
	tab-size: 2;
}

.rr-codeblock-editor-wrap .rr-code-editor-textarea .components-base-control__label {
	padding: 6px 16px;
	margin: 0;
	font-size: 11px;
	color: #8b95a9;
	background: rgba(255, 255, 255, 0.02);
}

.rr-codeblock-editor-wrap .rr-code-block .rr-copy-btn {
	cursor: default;
}

/* Inline editable filename in the header row */
.rr-code-filename-input {
	font-family: inherit;
	font-size: 12px;
	color: #8b95a9;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 6px;
	margin: -2px -6px;
	outline: none;
	min-width: 60px;
	flex: 1;
	max-width: 70%;
	transition: border-color 0.15s, background 0.15s;
}

.rr-code-filename-input:hover {
	border-color: #2a3450;
}

.rr-code-filename-input:focus {
	border-color: #e8553e;
	background: rgba(0, 0, 0, 0.25);
	color: #e2e8f0;
}

.rr-code-filename-input::placeholder {
	color: #546e7a;
	font-style: italic;
}

/* Editor-only: live preview of highlighted lines */
.rr-codeblock-editor-wrap .rr-code-preview-label {
	padding: 8px 16px 4px;
	font-size: 11px;
	color: #8b95a9;
	background: rgba(255, 255, 255, 0.02);
	border-top: 1px solid #2a3450;
}

.rr-codeblock-editor-wrap .rr-code-preview {
	border-top: none;
	cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   RR Terminal — command-line / console block
   Visually distinct from the code editor: darker, traffic-light
   dots, prompt symbols, no line-number gutter.
   ═══════════════════════════════════════════════════════════ */

.rr-terminal {
	background: #0c0f17;
	border: 1px solid #20283c;
	border-radius: 8px;
	overflow: hidden;
	margin: 24px 0;
	font-family: 'IBM Plex Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
	max-width: 100%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.rr-terminal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	background: #161b29;
	border-bottom: 1px solid #20283c;
}

/* Traffic-light dots */
.rr-terminal-dots {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}

.rr-terminal-dots span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: block;
	background: #3a4456;
}

.rr-terminal-dots span:nth-child(1) { background: #ff5f57; }
.rr-terminal-dots span:nth-child(2) { background: #febc2e; }
.rr-terminal-dots span:nth-child(3) { background: #28c840; }

.rr-terminal-title {
	font-size: 12px;
	color: #8b95a9;
	flex: 1;
	text-align: center;
	font-family: inherit;
}

.rr-terminal-body {
	margin: 0;
	padding: 16px 18px;
	font-size: 13.5px;
	line-height: 1.7;
	overflow-x: auto;
	color: #d4dae6;
	font-family: inherit;
	white-space: pre;
	tab-size: 2;
}

/* Command line: prompt + command */
.rr-term-line {
	display: flex;
}

.rr-term-prompt {
	flex: 0 0 auto;
	color: #28c840;
	padding-right: 10px;
	user-select: none;
	-webkit-user-select: none;
	font-weight: 600;
}

.rr-term-cmd {
	flex: 1 1 auto;
	white-space: pre;
	color: #e8edf5;
}

/* Output lines: plain, dimmed, no prompt */
.rr-term-out-line {
	display: block;
	color: #6b7689;
	padding-left: 0;
}

/* ── Editor-only tweaks for the terminal block ── */
.rr-codeblock-editor-wrap .rr-term-editor-textarea textarea {
	font-family: 'IBM Plex Mono', 'Fira Code', Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	background: #0c0f17;
	color: #e8edf5;
	border: none;
	border-radius: 0;
	padding: 12px 18px;
	white-space: pre;
	tab-size: 2;
}

.rr-codeblock-editor-wrap .rr-term-editor-textarea .components-base-control__label {
	padding: 6px 16px;
	margin: 0;
	font-size: 11px;
	color: #8b95a9;
	background: rgba(255, 255, 255, 0.02);
}

.rr-terminal-title-input {
	font-family: inherit;
	font-size: 12px;
	color: #8b95a9;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 6px;
	outline: none;
	flex: 1;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}

.rr-terminal-title-input:hover {
	border-color: #20283c;
}

.rr-terminal-title-input:focus {
	border-color: #28c840;
	background: rgba(0, 0, 0, 0.3);
	color: #e8edf5;
}

.rr-terminal-title-input::placeholder {
	color: #4a5568;
	font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   RR Error — console error / warning / info block
   Distinct from the terminal: colored left border + tinted
   header so the severity reads at a glance.
   ═══════════════════════════════════════════════════════════ */

.rr-error {
	background: #0c0f17;
	border: 1px solid #20283c;
	border-left-width: 4px;
	border-radius: 8px;
	overflow: hidden;
	margin: 24px 0;
	font-family: 'IBM Plex Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
	max-width: 100%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.rr-error-header {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	background: #161b29;
	border-bottom: 1px solid #20283c;
}

.rr-error-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 11px;
	flex: 0 0 auto;
	color: #fff;
}

.rr-error-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	flex: 1;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rr-error-body {
	margin: 0;
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.7;
	overflow-x: auto;
	color: #c8d0df;
	font-family: inherit;
	white-space: pre-wrap;
	word-break: break-word;
	tab-size: 2;
}

.rr-err-line {
	display: block;
}

/* Highlighted keywords inside the message */
.rr-err-kw {
	font-weight: 600;
}

/* ── Severity: ERROR (red) ── */
.rr-error-error {
	border-left-color: #ef4444;
}
.rr-error-error .rr-error-header {
	background: rgba(239, 68, 68, 0.08);
}
.rr-error-error .rr-error-icon {
	background: #ef4444;
}
.rr-error-error .rr-error-title {
	color: #fca5a5;
}
.rr-error-error .rr-err-kw {
	color: #f87171;
}

/* ── Severity: WARNING (amber) ── */
.rr-error-warning {
	border-left-color: #f59e0b;
}
.rr-error-warning .rr-error-header {
	background: rgba(245, 158, 11, 0.08);
}
.rr-error-warning .rr-error-icon {
	background: #f59e0b;
}
.rr-error-warning .rr-error-title {
	color: #fcd34d;
}
.rr-error-warning .rr-err-kw {
	color: #fbbf24;
}

/* ── Severity: INFO (blue) ── */
.rr-error-info {
	border-left-color: #3b82f6;
}
.rr-error-info .rr-error-header {
	background: rgba(59, 130, 246, 0.08);
}
.rr-error-info .rr-error-icon {
	background: #3b82f6;
}
.rr-error-info .rr-error-title {
	color: #93c5fd;
}
.rr-error-info .rr-err-kw {
	color: #60a5fa;
}

/* ── Editor-only tweaks for the error block ── */
.rr-codeblock-editor-wrap .rr-err-editor-textarea textarea {
	font-family: 'IBM Plex Mono', 'Fira Code', Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	background: #0c0f17;
	color: #c8d0df;
	border: none;
	border-radius: 0;
	padding: 12px 18px;
	white-space: pre-wrap;
	tab-size: 2;
}

.rr-codeblock-editor-wrap .rr-err-editor-textarea .components-base-control__label {
	padding: 6px 16px;
	margin: 0;
	font-size: 11px;
	color: #8b95a9;
	background: rgba(255, 255, 255, 0.02);
}

/* ═══════════════════════════════════════════════════════════
   RR Screenshot — image block with optional browser frame
   Matches the dark theme of the other three blocks.
   ═══════════════════════════════════════════════════════════ */

.rr-screenshot {
	margin: 24px 0;
	max-width: 100%;
	font-family: 'IBM Plex Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
}

/* Framed variant: dark window chrome around the image */
.rr-screenshot-framed {
	background: #0c0f17;
	border: 1px solid #20283c;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.rr-screenshot-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	background: #161b29;
	border-bottom: 1px solid #20283c;
}

.rr-screenshot-dots {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}

.rr-screenshot-dots span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: block;
	background: #3a4456;
}

.rr-screenshot-dots span:nth-child(1) { background: #ff5f57; }
.rr-screenshot-dots span:nth-child(2) { background: #febc2e; }
.rr-screenshot-dots span:nth-child(3) { background: #28c840; }

.rr-screenshot-title {
	font-size: 12px;
	color: #8b95a9;
	flex: 1;
	text-align: center;
	font-family: inherit;
}

/* Right-side spacer the same width as the dots, so the title stays centered */
.rr-screenshot-spacer {
	flex: 0 0 auto;
	width: 45px;
}

.rr-screenshot-image {
	display: block;
	line-height: 0;
}

.rr-screenshot-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.rr-screenshot-caption {
	margin: 12px 4px 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #8b95a9;
	text-align: center;
	font-style: italic;
}

/* Inside the frame, the caption sits inside instead of below */
.rr-screenshot-framed .rr-screenshot-caption {
	margin: 0;
	padding: 10px 14px;
	background: #161b29;
	border-top: 1px solid #20283c;
	text-align: center;
}

/* ── Editor-only tweaks ── */
.rr-codeblock-editor-wrap .rr-screenshot-upload-btn {
	display: block;
	margin: 32px auto;
	padding: 12px 24px !important;
	height: auto !important;
}

.rr-codeblock-editor-wrap .rr-screenshot-image {
	background: #0a0d14;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rr-codeblock-editor-wrap .rr-screenshot-replace-btn {
	display: block;
	margin: 10px auto 0;
}

.rr-codeblock-editor-wrap .rr-screenshot-caption-input {
	margin-top: 12px;
}

.rr-codeblock-editor-wrap .rr-screenshot-caption-input .components-base-control__label {
	font-size: 11px;
	color: #8b95a9;
}

.rr-screenshot-title-input {
	font-family: inherit;
	font-size: 12px;
	color: #8b95a9;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 6px;
	outline: none;
	flex: 1;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}

.rr-screenshot-title-input:hover {
	border-color: #20283c;
}

.rr-screenshot-title-input:focus {
	border-color: #e8553e;
	background: rgba(0, 0, 0, 0.3);
	color: #e8edf5;
}

.rr-screenshot-title-input::placeholder {
	color: #4a5568;
	font-style: italic;
}