/*
	Shared Blitz3D+ code styling, loaded by emit_header after the active
	skin's stylesheet on every page.

	Token colours default to the Blitz3D+ IDE's six lexer styles (see
	BLITZ3D_PLUS_COLOUR_REFERENCE.docx). A skin may re-theme highlighted
	code by setting the --code-* / --codegrid-* / --codebox-* custom
	properties (the light skin does, for light code boxes). IDE window
	components (.b3d-ide) pin the IDE palette back on themselves, so an
	IDE mockup always looks like the real IDE whatever the skin.

	Markup produced by /blitzhl.php:
	  .b3d-hl                 any highlighted container (token spans inside)
	  pre.code.b3d-hl         a plain highlighted code block (format_code)
	  .b3d-codegrid           line-numbered listing (blitz_code_grid)
	  .b3d-ide                full IDE window component (emit_ide_window)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');

/* ------------------------------------------------- token colours */

.b3d-hl{ color: var(--code-fg, #EEEEEE); text-shadow: none; }
.b3d-hl .k{ color: var(--code-k, #AAFFFF); }	/* keywords and command names */
/* keywords with a reference page are quiet links (blitzhl_help_url) -
   deliberately indistinguishable from plain keywords: no underline, no
   colour change, none of the skins' link hover chrome */
.b3d-hl a.k, .b3d-hl a.k:hover, .b3d-hl a.k:focus, .b3d-hl a.k:visited{
	color: var(--code-k, #AAFFFF);
	background: none;
	text-decoration: none;
	text-shadow: none;
}
.b3d-hl .s{ color: var(--code-s, #00FF66); }	/* string literals */
.b3d-hl .c{ color: var(--code-c, #FFEE00); }	/* comments */
.b3d-hl .n{ color: var(--code-n, #33FFDD); }	/* numeric literals */
.b3d-hl .i{ color: var(--code-i, #FFFFFF); }	/* identifiers */

/* plain highlighted blocks keep the skin's pre.code container */
pre.code.b3d-hl{
	color: var(--code-fg, #EEEEEE);
	text-shadow: none;
	font-family: 'JetBrains Mono','Consolas','Courier New',monospace;
}

/* [codebox] blocks: long listings in a fixed-height scrollable box
   (format_codebox - replaces the old 15-row readonly textarea) */
pre.code.codebox{
	max-height: 360px;
	overflow: auto;
	scrollbar-color: var(--codebox-sb-thumb, #2B6394) var(--codebox-sb-track, #0E2A40);
}
pre.code.codebox::-webkit-scrollbar{ width: 12px; height: 12px; }
pre.code.codebox::-webkit-scrollbar-track{ background: var(--codebox-sb-track, #0E2A40); }
pre.code.codebox::-webkit-scrollbar-thumb{
	background: var(--codebox-sb-thumb, #2B6394);
	border-radius: 6px;
	border: 2px solid var(--codebox-sb-track, #0E2A40);
}
pre.code.codebox::-webkit-scrollbar-thumb:hover{ background: var(--codebox-sb-thumb-hover, #2D6E9F); }
pre.code.codebox::-webkit-scrollbar-corner{ background: var(--codebox-sb-track, #0E2A40); }

/* ------------------------------------------------- code grid */

.b3d-codegrid{
	display: grid;
	grid-template-columns: auto 1fr;
	font: 12.5px/1.75 'JetBrains Mono','Consolas','Courier New',monospace;
	padding: 12px 0;
	overflow-x: auto;
	background: var(--codegrid-bg, #0E2A40);
}
.b3d-lns{
	text-align: right;
	padding: 0 12px 0 16px;
	color: var(--codegrid-lns, #A8CFEA);
	opacity: 0.55;
	user-select: none;
	white-space: pre;
}
.b3d-src{
	padding-right: 18px;
	white-space: pre;
}

/* a bare grid outside an IDE window gets its own frame */
.b3d-codegrid{
	border: 1px solid var(--codegrid-line, rgba(112,173,209,0.3));
	border-radius: 8px;
}
.b3d-ide .b3d-codegrid{
	border: none;
	border-radius: 0;
}

/* ------------------------------------------------- IDE window */

/* an IDE mockup is a picture of the real IDE - re-pin the IDE palette
   here so skin-level code/codegrid token overrides don't reach it */
.b3d-ide{
	--code-fg: #EEEEEE;
	--code-k: #AAFFFF;
	--code-s: #00FF66;
	--code-c: #FFEE00;
	--code-n: #33FFDD;
	--code-i: #FFFFFF;
	--codegrid-bg: #0E2A40;
	--codegrid-lns: #A8CFEA;
	--codegrid-line: rgba(112,173,209,0.3);
}
.b3d-ide{
	border: 1px solid rgba(112,173,209,0.55);
	border-radius: 10px;
	background: #0E2A40;
	box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 60px rgba(51,255,221,0.07);
	overflow: hidden;
	font-family: 'JetBrains Mono','Consolas','Courier New',monospace;
}
.b3d-ide-title{
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	background: linear-gradient(180deg, #1A4A78, #12344F);
	border-bottom: 1px solid rgba(112,173,209,0.3);
	font: 600 12px 'Inter','Segoe UI',Tahoma,sans-serif;
	color: #C4DCEA;
}
.b3d-ide-dots{ display: flex; gap: 6px; }
.b3d-ide-dots i{ width: 11px; height: 11px; border-radius: 50%; display: block; }
.b3d-ide-dots i:nth-child(1){ background: #F03030; }
.b3d-ide-dots i:nth-child(2){ background: #FFEE00; }
.b3d-ide-dots i:nth-child(3){ background: #00FF66; }
.b3d-ide-tabs{
	display: flex; gap: 2px;
	background: #12344F;
	padding: 6px 10px 0 10px;
	border-bottom: 1px solid rgba(112,173,209,0.3);
}
.b3d-ide-tab{
	font: 600 11.5px 'Inter','Segoe UI',Tahoma,sans-serif;
	padding: 6px 14px;
	border-radius: 6px 6px 0 0;
	color: #C4DCEA;
	background: rgba(24,70,114,0.4);
	border: 1px solid rgba(112,173,209,0.3);
	border-bottom: none;
	white-space: nowrap;
}
.b3d-ide-tab.on{ color: #FFFFFF; background: #0E2A40; }
/* tabs that switch panes (data-pane, wired by code.js) are clickable */
.b3d-ide-tab[data-pane]{ cursor: pointer; }
.b3d-ide-tab[data-pane]:not(.on):hover{ color: #FFFFFF; background: rgba(45,110,159,0.6); }
.b3d-codegrid[hidden]{ display: none; }
.b3d-ide-status{
	display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	padding: 7px 14px;
	border-top: 1px solid rgba(112,173,209,0.3);
	background: #12344F;
	font: 600 11px 'Inter','Segoe UI',Tahoma,sans-serif;
	color: #C4DCEA;
}
.b3d-ide-status .ok{ color: #00FF66; text-shadow: 0 0 10px rgba(0,255,102,0.35); }