@charset "utf-8";
/* Electrobel modern enhancements — loaded after styles.css and theme CSS */

@layer reset, base, layout, components, utilities;

/* ── Design tokens ─────────────────────────────────────────────── */
@layer base {
	:root {
		--eb-font-sans: Verdana, Geneva, system-ui, sans-serif;
		--eb-font-size-base: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
		--eb-line-height: 1.5;
		--eb-radius-sm: 3px;
		--eb-radius-md: 10px;
		--eb-radius-lg: 15px;
		--eb-focus-color: #069;
		--eb-focus-offset: 2px;
		--eb-shadow-sm: 0 1px 4px rgb(0 0 0 / 0.25);
		--eb-space-xs: 0.25rem;
		--eb-space-sm: 0.5rem;
		--eb-space-md: 1rem;
		--eb-space-lg: 1.25rem;
		--eb-content-max: 75rem;
		--eb-touch-min: 44px;
		--eb-transition: 150ms ease;
		color-scheme: light;
		interpolate-size: allow-keywords;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			color-scheme: light dark;
		}
	}
}

/* ── Reset & global defaults ───────────────────────────────────── */
@layer reset {
	/* Legacy layout uses content-box heights (e.g. nav links height:15px + padding).
	   Do not apply border-box globally — scope it to main content only.
	   Exclude #playah / #content.player: fixed 100+500 waveform geometry needs content-box. */
	#content:not(.player),
	#content:not(.player) *,
	#logpage,
	#logpage * {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	img,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Preserve sprite / icon sizing inside themed UI */
	#content img:not([width]):not(.no-responsive),
	#playah img:not([width]):not(.no-responsive),
	.icon img,
	.demoIlluIcon,
	.demoActionIcon,
	.top50col img,
	.searchResult img,
	#header img,
	#topnav img {
		max-width: none;
		height: auto;
	}
}

/* ── Accessibility ─────────────────────────────────────────────── */
@layer base {
	:focus {
		outline: none;
	}

	:focus-visible {
		outline: 2px solid var(--eb-focus-color);
		outline-offset: var(--eb-focus-offset);
	}

	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	a:focus-visible,
	[tabindex]:focus-visible {
		outline: 2px solid var(--eb-focus-color);
		outline-offset: var(--eb-focus-offset);
	}

	@media (forced-colors: active) {
		:focus-visible {
			outline: 2px solid CanvasText;
		}
	}
}

/* ── Typography & text ─────────────────────────────────────────── */
@layer base {
	#content:not(.player),
	#logpage {
		font-size: var(--eb-font-size-base);
		line-height: var(--eb-line-height);
	}

	body {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	p,
	blockquote,
	.commentbox,
	.commenttext,
	.user_box {
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}

	.commentbox,
	.commenttext,
	.user_box {
		hyphens: auto;
	}
}

/* ── Forms & interactive targets ───────────────────────────────── */
@layer components {
	#content textarea,
	#content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	#content select,
	#content .button,
	#content input.button,
	#content .qq-upload-button,
	#logpage textarea,
	#logpage input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	#logpage select,
	#logpage .button,
	#logpage input.button {
		min-block-size: 1.75rem;
	}

	#content input.button,
	#content .button,
	#logpage input.button,
	#logpage .button {
		touch-action: manipulation;
	}

	#content input,
	#content select,
	#content textarea,
	#logpage input,
	#logpage select,
	#logpage textarea {
		accent-color: var(--eb-focus-color);
	}

	#content input[type="search"],
	#topnav input[type="search"] {
		-webkit-appearance: none;
		appearance: none;
	}
}

/* ── Layout: responsive overrides ──────────────────────────────── */
@layer layout {
	#content {
		max-width: var(--eb-content-max);
	}

	/* Header chrome — preserve original absolute/fixed sizing */
	#header,
	#topnav,
	#subnav,
	#logo,
	#logo_home,
	.searchbox {
		box-sizing: content-box;
	}

	#logo {
		overflow: visible;
	}

	#logo .logo-base {
		background: url(/themes/common/logoempty.png) no-repeat center;
		height: 130px;
		width: 130px;
		position: relative;
		z-index: 100;
	}

	#footer {
		padding-inline: max(var(--eb-space-sm), env(safe-area-inset-left))
			max(var(--eb-space-sm), env(safe-area-inset-right));
		padding-block-end: max(3px, env(safe-area-inset-bottom));
	}

	/* Player popup is ~600px; keep these site-layout rules off #playah. */
	@media (max-width: 960px) {
		body:not(#playah) {
			min-width: 0;
		}

		body:not(#playah) #contentmargin {
			min-width: 0;
			margin-inline: var(--eb-space-md);
		}

		body:not(#playah) #leftcol,
		body:not(#playah) #rightcol {
			float: none;
			inline-size: 100%;
		}

		body:not(#playah) #centercol {
			margin-inline: 0;
		}

		body:not(#playah) #leftcol,
		body:not(#playah) #centercol,
		body:not(#playah) #rightcol {
			padding: var(--eb-space-md);
		}

		body:not(#playah) h2.titleline,
		body:not(#playah) h2.titlepage {
			position: relative;
			inset-block-start: auto;
			margin-inline-start: 0;
			inline-size: 100%;
		}

		body:not(#playah) .headerright {
			position: static;
			block-size: auto;
		}
	}

	@media (max-width: 640px) {
		.searchbox {
			position: static;
			float: none;
			margin-block-start: var(--eb-space-sm);
		}

		#header {
			block-size: auto;
			min-block-size: 60px;
		}

		#topnav ul {
			margin-inline-start: 0;
			display: flex;
			flex-wrap: wrap;
			block-size: auto;
		}

		#topnav li {
			float: none;
		}

		#subnav {
			position: static;
			margin-block-start: var(--eb-space-sm);
		}

		#subnav ul {
			margin-inline-start: 0;
			display: flex;
			flex-wrap: wrap;
			gap: var(--eb-space-xs);
		}

		#subnav li {
			float: none;
			border-inline-start: none;
		}

		.col50,
		.col33,
		.col34,
		.col25,
		.col75,
		.col67,
		.col30,
		.col35,
		.col40,
		.col45,
		.col55,
		.col60,
		.col65,
		.col70,
		.col80,
		.col15,
		.col85,
		.col90,
		.col10,
		.col20,
		.col100 {
			float: none;
			inline-size: 100%;
		}

		#logpage {
			inline-size: 100%;
			max-inline-size: 650px;
			padding-inline: var(--eb-space-md);
		}

		body div.warning {
			inline-size: auto;
			max-inline-size: 100%;
		}
	}
}

/* ── jQuery UI & tooltip polish ────────────────────────────────── */
@layer components {
	.ui-autocomplete-category {
		font-weight: bold;
		padding: 0.2em 0.4em;
		margin: 0.8em 0 0.2em;
		line-height: 1.5;
	}

	#tooltip {
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		display: none;
		z-index: 20000;
	}

	#tooltipContent {
		background-color: #fff;
		min-inline-size: 175px;
		min-block-size: 50px;
		border-radius: var(--eb-radius-sm);
		box-shadow: var(--eb-shadow-sm);
	}
}

/* ── Scrollbars & motion polish ──────────────────────────────────── */
@layer utilities {
	* {
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--eb-focus-color) 40%, transparent) transparent;
	}

	.ajax_loader {
		border-radius: var(--eb-radius-lg);
		box-shadow: var(--eb-shadow-sm);
	}

	@media (prefers-reduced-motion: no-preference) {
		a,
		input.button,
		.button a {
			transition: color var(--eb-transition), background-color var(--eb-transition),
				border-color var(--eb-transition), opacity var(--eb-transition);
		}
	}

	.visually-hidden {
		position: absolute !important;
		inline-size: 1px !important;
		block-size: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}