/**
 * Reader "view record JSON" control + modal (`RecordJsonViewer`). A client:only React
 * island, so Astro's component-scoped styles never reach its DOM — these rules are
 * global (imported from `[rkey].astro`).
 *
 * The modal's code panel uses a FIXED dark editor palette (not the site/publication
 * palette tokens). A publication theme recolours `--ink`/`--paper`/`--sun` etc., and a
 * themed combination can collapse the JSON to near-invisible (e.g. dark `--sun-strong`
 * keys on a dark-olive `--ink` background). This is a raw-record / developer view, so it
 * stays a consistent, high-contrast code surface across every publication theme. The
 * trigger button keeps the page tokens (`--muted`/`--sun`) — it lives inline in the
 * eyebrow on the page surface, where those read fine.
 */
.record-json__trigger {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	line-height: 0;
}
.record-json__trigger:hover {
	color: var(--sun);
}
.record-json__backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 1000;
}
.record-json__dialog {
	position: relative;
	display: flex;
	width: min( 92vw, 48rem );
	max-height: 82vh;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.record-json__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
	color: #d6d9e0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.record-json__close:hover {
	background: rgba( 0, 0, 0, 0.55 );
}
.record-json__code {
	flex: 1;
	margin: 0;
	overflow: auto;
	padding: 1.5rem;
	background: #1e1f26;
	color: #d6d9e0;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	line-height: 1.5;
	white-space: pre;
	tab-size: 2;
}
/* Fixed JSON token palette (theme-independent — see file header). highlight.js emits
   only these classes for JSON: attr (keys), string, number, literal (true/false/null),
   keyword, punctuation. The base `color` above covers structural braces/brackets. */
.record-json__code .hljs-attr {
	color: #8fbcbb;
}
.record-json__code .hljs-string {
	color: #a3be8c;
}
.record-json__code .hljs-number {
	color: #d08770;
}
.record-json__code .hljs-literal,
.record-json__code .hljs-keyword {
	color: #b48ead;
}
.record-json__code .hljs-punctuation {
	color: #7b8294;
}
