/*
	"default" skin — the unified Blitz3D+ IDE / help-system palette.

	Colours follow BLITZ3D_PLUS_COLOUR_REFERENCE.docx: deep Blitz blue
	canvas, dark blue panels, deep-surface code blocks and table headers,
	electric-green primary headings, ice-cyan secondary headings, vivid
	yellow links and note accents, bright-aqua code and focus states,
	Windows-blue selection, and light search-field style inputs.

	Layered blueprint-grid background, glassy panels and phosphor glows
	give it depth while every colour stays a documented palette token.
*/

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

:root{
	/* editor-aligned semantic roles */
	--b3d-bg: #225588;					/* editor canvas / help background */
	--b3d-panel: #184672;				/* gutter / nav panels, tables, notes */
	--b3d-deep: #12344F;				/* deep surface: code blocks, table headers */
	--b3d-text: #EEEEEE;				/* soft white body text */
	--b3d-text-muted: #C4DCEA;			/* light blue-gray secondary text */
	--b3d-text-bright: #FFFFFF;			/* interactive foreground (hover/selected) */
	--b3d-heading-primary: #00FF66;		/* electric green - level-one headings */
	--b3d-heading-secondary: #AAFFFF;	/* ice cyan - subheadings, table headings */
	--b3d-link: #FFEE00;				/* vivid yellow - links and note accents */
	--b3d-code: #33FFDD;				/* bright aqua - code, focus rings */
	--b3d-selection: #0078D4;			/* Windows blue - text selection */
	/* supporting tones */
	--b3d-border: #70ADD1;				/* pale blue - tables, rules, panel borders */
	--b3d-border-elevated: #2B6394;		/* elevated border - inline code, fields */
	--b3d-hover: #2D6E9F;				/* hover surface behind interactive text */
	--b3d-field-bg: #F5FFFF;			/* near white - search/input fields */
	--b3d-field-text: #12344F;			/* deep-surface reuse - field text */
	--b3d-line-numbers: #A8CFEA;		/* powder blue - quiet chrome text */
	/* translucent derivatives of the tokens above */
	--b3d-line: rgba(112, 173, 209, 0.3);
	--b3d-line-strong: rgba(112, 173, 209, 0.55);
	--b3d-glow-green: rgba(0, 255, 102, 0.35);
	--b3d-glow-aqua: rgba(51, 255, 221, 0.3);
	--b3d-glow-yellow: rgba(255, 238, 0, 0.35);
	--radius: 8px;
	--font-display: 'Rajdhani', 'Segoe UI', Tahoma, sans-serif;
	--font-body: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif;
	--font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

html{
	background: var(--b3d-deep);
	scrollbar-color: var(--b3d-border-elevated) var(--b3d-deep);
}

body{
	color: var(--b3d-text);
	font: 14px/1.6 var(--font-body);
	background:
		/* soft aqua / green ambience along the top */
		radial-gradient( 1100px 500px at 18% -10%, rgba(51, 255, 221, 0.10), transparent 60% ),
		radial-gradient( 900px 520px at 86% -6%, rgba(0, 255, 102, 0.07), transparent 55% ),
		/* faint blueprint grid */
		repeating-linear-gradient( 0deg, rgba(112, 173, 209, 0.05) 0 1px, transparent 1px 40px ),
		repeating-linear-gradient( 90deg, rgba(112, 173, 209, 0.05) 0 1px, transparent 1px 40px ),
		/* vignette into the deep surface at the foot of the page */
		radial-gradient( 1600px 1000px at 50% 120%, rgba(18, 52, 79, 0.85), transparent 70% ),
		linear-gradient( 180deg, #2D6E9F -60px, var(--b3d-bg) 380px );
	background-attachment: fixed;
	max-width: 1160px;
	margin: 0 auto;
	padding: 20px 28px 40px 28px;
}

::selection{
	background: var(--b3d-selection);
	color: var(--b3d-text-bright);
}

img{
	border: 0;
	max-width: 100%;
}

/* ------------------------------------------------- links */

a{
	color: var(--b3d-link);
	font-family: inherit;
	text-decoration: none;
	border-radius: 3px;
	transition: color 0.12s ease, background-color 0.12s ease, text-shadow 0.12s ease;
}
a:hover{
	color: var(--b3d-text-bright);
	background-color: var(--b3d-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-shadow: 0 0 10px var(--b3d-glow-yellow);
}

/* ------------------------------------------------- headings */

h1{
	font: 700 24px/1.25 var(--font-display);
	color: var(--b3d-heading-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 10px 0 14px 0;
	padding-bottom: 7px;
	text-shadow: 0 0 18px var(--b3d-glow-green);
	border-bottom: 1px solid;
	border-image: linear-gradient( 90deg, var(--b3d-line-strong), rgba(112, 173, 209, 0) ) 1;
}
h3{
	font: 700 16px/1.35 var(--font-display);
	color: var(--b3d-heading-secondary);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
font.small{
	font: 600 11px var(--font-body);
}
font.tiny{
	font: 11px var(--font-body);
	color: var(--b3d-text-muted);
}

td{
	font: 14px/1.6 var(--font-body);
}

/* ------------------------------------------------- top tab strip */

nav.tabs{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 4px 16px;
}
nav.tabs ul{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
a.tab, a.seltab{
	display: block;
	font: 700 13px var(--font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: var(--radius) var(--radius) 0 0;
	white-space: nowrap;
}
/* tab gradients need 'no-repeat border-box' - otherwise the strip under the
   1px top border shows the repeated gradient's dark tail as a dark line */
a.tab{
	color: var(--b3d-line-numbers);
	background: linear-gradient( 180deg, rgba(45, 110, 159, 0.55), rgba(18, 52, 79, 0.9) ) no-repeat border-box;
	border: 1px solid var(--b3d-line);
	border-bottom: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.tab:hover{
	color: var(--b3d-text-bright);
	background: linear-gradient( 180deg, rgba(45, 110, 159, 0.95), rgba(24, 70, 114, 0.95) ) no-repeat border-box;
	border-color: var(--b3d-line-strong);
	text-decoration: none;
	text-shadow: none;
}
a.seltab{
	color: var(--b3d-heading-primary);
	background: linear-gradient( 180deg, var(--b3d-hover), var(--b3d-panel) ) no-repeat border-box;
	border: 1px solid var(--b3d-line-strong);
	border-bottom: none;
	text-shadow: 0 0 12px var(--b3d-glow-green);
	box-shadow: 0 -2px 18px rgba(0, 255, 102, 0.12);
}
a.seltab:hover{
	color: var(--b3d-heading-primary);
	background: linear-gradient( 180deg, var(--b3d-hover), var(--b3d-panel) ) no-repeat border-box;
	text-decoration: none;
}
nav.tabs div.userinfo{
	padding-bottom: 8px;
	white-space: nowrap;
}

/* ------------------------------------------------- submenu bar */

nav.submenu{
	background: linear-gradient( 180deg, var(--b3d-panel), var(--b3d-deep) );
	border: 1px solid var(--b3d-line-strong);
	border-radius: 0 var(--radius) 0 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	padding: 5px 12px;
}
nav.submenu ul{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
a.menuitem{
	display: block;
	color: var(--b3d-heading-secondary);
	font: 700 12px var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: all 0.15s ease;
}
a.menuitem:hover{
	color: var(--b3d-text-bright);
	background: var(--b3d-hover);
	border-color: var(--b3d-line-strong);
	text-decoration: none;
	text-shadow: 0 0 10px var(--b3d-glow-aqua);
}

/* ------------------------------------------------- main content panel */

.main{
	display: block;
	padding: 22px 26px;
	font: 14px/1.6 var(--font-body);
	background: rgba(18, 52, 79, 0.35);
	border: 1px solid var(--b3d-line-strong);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(196, 220, 234, 0.05);
}

/* ------------------------------------------------- site footer */

footer.site-footer{
	display: block;
	padding: 14px 6px;
	font-size: 12px;
	color: var(--b3d-text-muted);
}

/* ------------------------------------------------- listing tables */

table.listing{
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
}
/* a listing holding a code block must not stretch to the code's width -
   fix the layout so the pre scrolls inside its cell instead */
table.listing:has(pre){
	table-layout: fixed;
}
th.head{
	text-align: left;
	padding: 7px 12px;
	font: 700 13px var(--font-display);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--b3d-heading-secondary);
	background: linear-gradient( 180deg, #1A4A78, var(--b3d-deep) );
	border: 1px solid var(--b3d-line-strong);
	border-radius: 6px;
	text-shadow: 0 0 12px rgba(170, 255, 255, 0.25);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
th.head[align="center"]{
	text-align: center;
}
th.head a{
	color: var(--b3d-heading-secondary);
}
th.head a:hover{
	color: var(--b3d-text-bright);
}
td.cell{
	padding: 10px 12px;
	background: rgba(24, 70, 114, 0.72);
	border: 1px solid var(--b3d-line);
	border-radius: 6px;
	overflow-wrap: break-word;
}

/* ------------------------------------------------- posts */

article.post{
	margin: 0 0 18px 0;
}
.posthead{
	padding: 9px 14px;
	background: linear-gradient( 180deg, #1A4A78, var(--b3d-deep) );
	border: 1px solid var(--b3d-line-strong);
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
}
.posttext{
	padding: 14px;
	background: rgba(24, 70, 114, 0.55);
	border: 1px solid var(--b3d-line);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
}

/* ------------------------------------------------- code and quotes */

pre.code{
	font: 12.5px/1.55 var(--font-mono);
	color: var(--b3d-code);
	background: linear-gradient( 180deg, #0E2A40, var(--b3d-deep) );
	padding: 12px 14px;
	border: 1px solid var(--b3d-line);
	border-left: 3px solid var(--b3d-code);
	border-radius: 0 var(--radius) var(--radius) 0;
	box-shadow: inset 0 0 30px rgba(51, 255, 221, 0.05);
	overflow-x: auto;
	text-shadow: 0 0 8px var(--b3d-glow-aqua);
}
div.quote{
	padding: 10px 14px;
	background: rgba(24, 70, 114, 0.55);
	border: 1px solid var(--b3d-line);
	border-left: 3px solid var(--b3d-link);
	border-radius: 0 var(--radius) var(--radius) 0;
	font: italic 13px/1.6 var(--font-body);
	color: var(--b3d-text-muted);
}

/* bbcode blocks (inline style in common.php is overridden by specificity) */
.main div.bbcode{
	padding: 12px 14px;
	background: rgba(18, 52, 79, 0.6);
	color: var(--b3d-text);
	border: 1px solid var(--b3d-line);
	border-radius: var(--radius);
}

/* broken-image placeholders (override inline style) */
.main span.broken-img, body span.broken-img{
	background: rgba(24, 70, 114, 0.6);
	border: 1px dashed rgba(168, 207, 234, 0.45);
	color: var(--b3d-text-muted);
	border-radius: 5px;
	font: italic 11px var(--font-body);
	padding: 4px 10px;
}

/* ------------------------------------------------- forms */

input, select, textarea{
	font: 13px var(--font-body);
	color: var(--b3d-field-text);
	background: var(--b3d-field-bg);
	border: 1px solid var(--b3d-border-elevated);
	border-radius: 5px;
	padding: 6px 10px;
	outline: none;
	box-shadow: inset 0 1px 3px rgba(18, 52, 79, 0.25);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus{
	border-color: var(--b3d-code);
	box-shadow: inset 0 1px 3px rgba(18, 52, 79, 0.15), 0 0 0 3px rgba(51, 255, 221, 0.25);
}
input[type="submit"], input[type="button"], button{
	font: 700 13px var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--b3d-heading-secondary);
	background: linear-gradient( 180deg, #1A4A78, var(--b3d-deep) );
	border: 1px solid var(--b3d-line-strong);
	border-radius: 999px;
	padding: 7px 20px;
	cursor: pointer;
	box-shadow: none;
	transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover{
	color: var(--b3d-text-bright);
	background: linear-gradient( 180deg, var(--b3d-hover), var(--b3d-panel) );
	box-shadow: 0 2px 14px var(--b3d-glow-aqua);
}
input[type="checkbox"], input[type="radio"]{
	accent-color: var(--b3d-selection);
	box-shadow: none;
}
textarea.codebox{
	font: 12.5px/1.55 var(--font-mono);
	color: var(--b3d-code);
	background: var(--b3d-deep);
	border: 1px solid var(--b3d-line);
	border-radius: var(--radius);
	box-shadow: inset 0 0 30px rgba(51, 255, 221, 0.05);
}

/* ------------------------------------------------- scrollbars (webkit) */

::-webkit-scrollbar{
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track{
	background: var(--b3d-deep);
}
::-webkit-scrollbar-thumb{
	background: var(--b3d-border-elevated);
	border-radius: 6px;
	border: 2px solid var(--b3d-deep);
}
::-webkit-scrollbar-thumb:hover{
	background: var(--b3d-hover);
}

/* ------------------------------------------------- page layout */

div.page-cols{
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) 170px;
	gap: 20px;
	align-items: start;
}
div.page-cols > aside.sidebar{
	min-width: 0;
	font-size: 11px;
	color: var(--b3d-text-muted);
	text-align: center;
}
aside.sidebar div.sidebar-block{
	line-height: 1.5;
}
aside.sidebar div.thumb-stack{
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

/* users/guests online counts */
dl.stats{
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px 10px;
	justify-content: center;
	margin: 0;
}
dl.stats dt{
	text-align: right;
}
dl.stats dd{
	margin: 0;
	text-align: left;
	color: var(--b3d-text);
}
div.page-cols > section.page-main{
	min-width: 0;
}

/* a bar with content pushed to each end */
div.bar{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 16px;
}
div.bar > div:last-child{
	text-align: right;
}
div.bar h1{
	margin: 0;
}

/* screenshot gallery */
div.pic-grid{
	display: grid;
	grid-template-columns: repeat( auto-fill,minmax(180px, 1fr) );
	gap: 14px;
	margin: 12px 0;
}
div.pic-grid div.pic{
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	padding: 10px;
	background: rgba(24, 70, 114, 0.72);
	border: 1px solid var(--b3d-line);
	border-radius: 6px;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
div.pic-grid div.pic:hover{
	border-color: var(--b3d-line-strong);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}
div.pic-grid div.pic img{
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
div.pic-grid div.pic-title{
	font: 700 13px var(--font-display);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--b3d-heading-secondary);
}
div.pic-grid div.pic-by{
	font-size: 11px;
	color: var(--b3d-text-muted);
	margin-top: auto;
}

/* label/field forms */
div.form-grid{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 12px;
	align-items: center;
	max-width: 560px;
}
div.form-grid > label{
	text-align: right;
}

/* float-right screenshot stack in product pages */
div.shots{
	float: right;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 45%;
	margin: 0 0 16px 24px;
	text-align: center;
}
div.shots img{
	max-width: 100%;
	height: auto;
}

/* page title with product image on the right */
div.page-title{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 16px;
}
div.page-title h1{
	margin: 0;
}
div.page-title img{
	max-height: 72px;
	width: auto;
}

/* ------------------------------------------------- misc */

hr{
	border: none;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var(--b3d-line-strong), transparent );
}

/* ------------------------------------------------- small screens */

@media (max-width: 900px){
	div.page-cols{
		grid-template-columns: 1fr;
	}
	div.page-cols > section.page-main{
		order: -1;
	}
}

@media (max-width: 720px){
	body{
		padding: 10px 12px 24px 12px;
	}
	.main{
		padding: 14px;
	}
	/* wide listings scroll sideways instead of stretching the page */
	table.listing{
		display: block;
		overflow-x: auto;
	}
	div.shots{
		float: none;
		max-width: 100%;
		margin: 0 0 16px 0;
	}
	div.form-grid{
		grid-template-columns: 1fr;
		gap: 4px;
	}
	div.form-grid > label{
		text-align: left;
	}
}

/* ------------------------------------------------- Blitz3D+ help viewer */

.help-layout{
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.help-layout-wide{
	grid-template-columns: minmax(0, 1fr);
}

/* contents sidebar - the generated reference index */
.help-contents{
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 24px);
	overflow: auto;
	padding: 12px;
	background: rgba(24, 70, 114, 0.6);
	border: 1px solid var(--b3d-line-strong);
	border-radius: var(--radius);
	font-size: 13px;
}
.help-contents h2{
	margin: 14px 0 5px 0;
	font: 700 12px var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--b3d-heading-secondary);
}
.help-contents a{
	display: block;
	padding: 3px 7px;
	border-radius: 4px;
	color: var(--b3d-link);
}
.help-contents a.sel{
	background: var(--b3d-hover);
	color: var(--b3d-text-bright);
}
.help-contents .rule{
	height: 1px;
	margin: 12px 0;
	background: var(--b3d-line-strong);
}
.help-search input{
	width: 100%;
	margin: 0 0 10px 0;
}

/* rendered help pages - adapted from the help system's own blitz-help.css */
.helpdoc{
	min-width: 0;
	font-size: 13px;
	line-height: 1.55;
}
.helpdoc h1{
	font-size: 18px;
	text-transform: none;
	letter-spacing: 0.02em;
	margin: 0 0 12px 0;
}
.helpdoc h1 + h1{
	margin-top: 22px;
}
.helpdoc h2{
	margin: 26px 0 10px 0;
	padding-bottom: 5px;
	font: 700 15px var(--font-display);
	letter-spacing: 0.04em;
	color: var(--b3d-heading-secondary);
	border-bottom: 1px solid var(--b3d-line-strong);
}
.helpdoc h3,
.helpdoc h4{
	margin: 20px 0 8px 0;
	text-transform: none;
	letter-spacing: 0.03em;
	font-size: 14px;
}
.helpdoc a{
	font-weight: 700;
}
.helpdoc pre{
	overflow: auto;
	margin: 8px 0 14px 0;
	padding: 12px 14px;
	font: 12.5px/1.5 var(--font-mono);
	color: var(--b3d-code);
	background: linear-gradient( 180deg, #0E2A40, var(--b3d-deep) );
	border: 1px solid var(--b3d-line);
	border-left: 3px solid var(--b3d-code);
	border-radius: 6px;
}
.helpdoc code,
.helpdoc kbd,
.helpdoc samp{
	padding: 1px 5px;
	font: 12px var(--font-mono);
	color: var(--b3d-code);
	background: var(--b3d-deep);
	border: 1px solid var(--b3d-border-elevated);
	border-radius: 3px;
}
.helpdoc pre code{
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
}
.helpdoc table{
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 14px 0;
	background: rgba(24, 70, 114, 0.45);
}
.helpdoc th,
.helpdoc td{
	padding: 7px 10px;
	border: 1px solid var(--b3d-line-strong);
	text-align: left;
	vertical-align: top;
}
.helpdoc th{
	color: var(--b3d-heading-secondary);
	background: var(--b3d-deep);
}
.helpdoc blockquote,
.helpdoc .note,
.helpdoc .hint{
	margin: 0 0 14px 0;
	padding: 10px 14px;
	background: rgba(24, 70, 114, 0.45);
	border: 1px solid var(--b3d-line);
	border-left: 4px solid var(--b3d-link);
	border-radius: 0 6px 6px 0;
}
.helpdoc dl{
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 5px 14px;
	margin: 0 0 14px 0;
	padding: 10px 12px;
	background: rgba(24, 70, 114, 0.45);
	border: 1px solid var(--b3d-line);
	border-radius: 6px;
}
.helpdoc dt{
	color: var(--b3d-heading-secondary);
	font-weight: 700;
}
.helpdoc dd{
	margin: 0;
}
.helpdoc .Command{
	display: inline-block;
	margin: 0 0 12px 0;
	padding: 6px 9px;
	color: var(--b3d-heading-secondary);
	background: var(--b3d-deep);
	border-left: 4px solid var(--b3d-heading-primary);
	font-size: 15px;
	font-weight: 700;
}
.helpdoc .header{
	color: var(--b3d-heading-secondary);
	font-weight: 700;
}
.helpdoc small,
.helpdoc .small,
.helpdoc .muted,
.helpdoc .help-status{
	color: var(--b3d-text-muted);
}
.helpdoc img{
	max-width: 100%;
	height: auto;
}

/* command index views - multi-column link lists */
.helpdoc .commands{
	columns: 3 180px;
	column-gap: 22px;
	margin: 0 0 8px 0;
}
.helpdoc .commands a{
	display: block;
	padding: 2px 6px;
	border-radius: 4px;
	break-inside: avoid;
	font-weight: 400;
}

@media (max-width: 760px){
	.help-layout{
		grid-template-columns: 1fr;
	}
	.help-contents{
		position: static;
		max-height: none;
	}
	.helpdoc .commands{
		columns: 2 140px;
	}
}