/* Copyright Epic Games, Inc. All Rights Reserved. */

/* theme -------------------------------------------------------------------- */

/* Light tokens apply to the explicit data-theme="light" override and as the
   default when no system preference matches the dark @media query below.
   Dark tokens apply to data-theme="dark" and (when no explicit preference is
   set) to dark system preference. Selector lists keep each token list defined
   exactly once. */
:root,
:root[data-theme="light"] {
	--theme_g0:	#1f2328;
	--theme_g1:	#656d76;
	--theme_g2:	#d0d7de;
	--theme_g3:	#f6f8fa;
	--theme_g4:	#ffffff;

	/* surface backgrounds: bg0 matches the body, bg1 is one step raised */
	--theme_bg0:	var(--theme_g4);
	--theme_bg1:	var(--theme_g3);

	--theme_p0:	#0969da;
	--theme_p4:	#ddf4ff;
	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

	--theme_ln:	var(--theme_p0);
	--theme_er:	#ffebe9;

	--theme_ok:		#1a7f37;
	--theme_warn:	#9a6700;
	--theme_fail:	#cf222e;

	--theme_bright:			#1f2328;
	--theme_faint:			#6e7781;
	--theme_border_subtle:	#d8dee4;
	--theme_highlight:		#b8860b44;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--theme_g0:	#c9d1d9;
		--theme_g1:	#8b949e;
		--theme_g2:	#30363d;
		--theme_g3:	#161b22;
		--theme_g4:	#0d1117;

		--theme_p0:	#58a6ff;
		--theme_p4:	#1c2128;

		--theme_ln:	#58a6ff;
		--theme_er:	#1c1c1c;

		--theme_ok:		#3fb950;
		--theme_warn:	#d29922;
		--theme_fail:	#f85149;

		--theme_bright:			#f0f6fc;
		--theme_faint:			#6e7681;
		--theme_border_subtle:	#21262d;
		--theme_highlight:		#e3b341aa;
	}
}

/* Manual data-theme="dark" wins over system preference. */
:root[data-theme="dark"] {
	--theme_g0:	#c9d1d9;
	--theme_g1:	#8b949e;
	--theme_g2:	#30363d;
	--theme_g3:	#161b22;
	--theme_g4:	#0d1117;

	--theme_p0:	#58a6ff;
	--theme_p4:	#1c2128;

	--theme_ln:	#58a6ff;
	--theme_er:	#1c1c1c;

	--theme_ok:		#3fb950;
	--theme_warn:	#d29922;
	--theme_fail:	#f85149;

	--theme_bright:			#f0f6fc;
	--theme_faint:			#6e7681;
	--theme_border_subtle:	#21262d;
	--theme_highlight:		#e3b341aa;
}

/* theme toggle ------------------------------------------------------------- */

/* Shared shape for the fixed top-right utility buttons (theme, wide, ws-pause).
   Per-button rules below add only the `right` offset and any glyph-specific
   typography (font-size for emoji buttons, padding-zero for SVG buttons). */
.zen-floating-toggle {
	position:			fixed;
	top:				16px;
	z-index:			10;
	width:				36px;
	height:				36px;
	border-radius:		6px;
	border:				1px solid var(--theme_g2);
	background:			var(--theme_g3);
	color:				var(--theme_g1);
	cursor:				pointer;
	display:			flex;
	align-items:		center;
	justify-content:	center;
	transition:			color 0.15s, background 0.15s, border-color 0.15s;
	user-select:		none;
}

.zen-floating-toggle:hover {
	color:				var(--theme_g0);
	background:			var(--theme_p4);
	border-color:		var(--theme_g1);
}

#zen_theme_toggle {
	right:				16px;
	font-size:			18px;
	line-height:		1;
}

#zen_ws_toggle {
	right:				60px;
	font-size:			18px;
	line-height:		1;
}

#zen_wide_toggle {
	right:				104px;
	padding:			0;
}

#zen_wide_toggle svg {
	width:				18px;
	height:				18px;
	display:			block;
}

/* Wide mode: lift the 1400px cap on the main container and drop the body's
   horizontal padding so content fills the viewport edge-to-edge. Vertical
   body padding stays so content doesn't touch the top of the viewport. */
html[data-wide="true"] body {
	padding-left:		0;
	padding-right:		0;
}
html[data-wide="true"] #container {
	max-width:			none;
}

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

body, input, button {
	font-family:	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size:		14px;
}

body {
	overflow-y:			scroll;
	margin:				0;
	padding:			20px;
	background-color:	var(--theme_g4);
	color:				var(--theme_g0);
}

pre, code {
	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:		13px;
	margin:			0;
}

input {
	color:				var(--theme_g0);
	background-color:	var(--theme_g3);
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	padding:			4px 8px;
}

button {
	color:				var(--theme_g0);
	background:			transparent;
	border:				none;
	cursor:				pointer;
}

* {
	box-sizing: border-box;
}

#container {
	max-width:				1400px;
	margin:					auto;

	> div {
		padding-top:		1.0em;
		padding-bottom:		1.5em;
	}
}


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

a {
	text-decoration:		unset;
}

.zen_action, a {
	cursor:					pointer;
	color:					var(--theme_ln);

	&:hover {
		text-decoration:	underline var(--theme_ln);
	}
}

/* sector ------------------------------------------------------------------- */

.zen_sector {
	h1, h2, h3 {
		white-space:		nowrap;
	}

	h1 {
		font-size:			20px;
		font-weight:		600;
		width:				100%;
		color:				var(--theme_bright);
		border-bottom:		1px solid var(--theme_g2);
		padding-bottom:		0.4em;
		margin-bottom:		16px;
	}

	h2 {
		font-size:			16px;
		font-weight:		600;
		margin-bottom:		12px;
	}

	h3 {
		font-size:			14px;
		font-weight:		600;
		margin:				0em;
		padding:			8px 12px;
		background-color:	var(--theme_g3);
		border:				1px solid var(--theme_g2);
		border-radius:		6px 6px 0 0;
		color:				var(--theme_g1);
		text-transform:		uppercase;
		letter-spacing:		0.5px;
	}

	margin-bottom:	2em;
	> *:not(h1) {
		margin-left:	0;
	}
}


/* table -------------------------------------------------------------------- */

.zen_table {
	display:				grid;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	overflow:				hidden;
	margin-bottom:			1.2em;
	font-size:				13px;

	> div {
		display: contents;
	}

	> div:nth-of-type(odd) > div {
		background-color:	var(--theme_g4);
	}

	> div:nth-of-type(even) > div {
		background-color:	var(--theme_g3);
	}

	> div:first-of-type {
		font-weight:		600;
		> div {
			background-color:	var(--theme_g3);
			color:				var(--theme_g1);
			text-transform:		uppercase;
			letter-spacing:		0.5px;
			font-size:			11px;
			border-bottom:		1px solid var(--theme_g2);
		}
	}

	> div:not(:first-of-type):hover > div {
		background-color:	var(--theme_p4);
	}

	> hidden {
		visibility:			hidden;
		display:			none;
	}

	> div > div {
		padding:			8px 12px;
		align-content:		center;
		border-left:		1px solid var(--theme_border_subtle);
		overflow:			auto;
		overflow-wrap:		break-word;
		white-space: 		pre-wrap;
	}

	> div > div:first-child {
		border-left:		none;
	}
}

/* sessions ----------------------------------------------------------------- */

.sessions-section {
	display:				flex;
	flex-direction:			column;
	height:					calc(100vh - 80px);
}

.sessions-header-row {
	display:				flex;
	align-items:			center;
	gap:					12px;
	margin-bottom:			8px;
	flex-wrap:				wrap;
}

.sessions-list-filter {
	padding:				6px 12px;
	font-size:				14px;
	font-family:			inherit;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	background:				var(--theme_bg1);
	color:					var(--theme_bright);
	outline:				none;
	width:					240px;
	max-width:				100%;
}
.sessions-list-filter:focus {
	border-color:			var(--theme_ln);
	background:				var(--theme_bg0);
}
.sessions-list-filter::placeholder {
	color:					var(--theme_g1);
}

.sessions-table {
	/* Natural height so the bottom panel sits right below the last row. The
	   section's column-flex lets .sessions-log-panel (flex: 1) absorb the
	   remaining vertical space for log viewing. */
	flex-shrink:			0;
	min-width:				0;
}

.sessions-table .zen_table > div > div {
	text-align:				right;
}

/* appname (col 1), mode (col 2), platform (col 3) read better left-aligned */
.sessions-table .zen_table > div > div:nth-child(1),
.sessions-table .zen_table > div > div:nth-child(2),
.sessions-table .zen_table > div > div:nth-child(3) {
	text-align:				left;
}

/* id (col 4) is a hex string — monospace */
.sessions-table .zen_table > div > div:nth-child(4) {
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

/* Platform-column icon: sized to the table row height, picks up theme color
   via currentColor. Unknown platforms fall back to a plain text label. */
.platform-icon {
	display:				inline-flex;
	align-items:			center;
	color:					var(--theme_g0);
	opacity:				0.85;
}
.platform-icon svg {
	width:					16px;
	height:					16px;
	fill:					currentColor;
}

/* Clickable column headers: the first row gets hover affordance. */
.sessions-table .zen_table > div:first-child > div:hover {
	color:					var(--theme_g0);
}
.sessions-table .zen_table > div:first-child > div.sessions-sort-active {
	color:					var(--theme_ln);
}

.sessions-group-toggle,
.sessions-group-toggle-spacer,
.sessions-group-child-spacer {
	display:				inline-flex;
	align-items:			center;
	justify-content:		center;
	width:					18px;
	margin-right:			4px;
	color:					var(--theme_g1);
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

.sessions-group-toggle {
	border:					0;
	padding:				0;
	background:				transparent;
	cursor:					pointer;
}

.sessions-group-toggle:hover {
	color:					var(--theme_ln);
}

.sessions-child-row {
	background-color:		color-mix(in srgb, var(--theme_bg1) 75%, transparent);
}

.sessions-child-row:first-child {
	padding-left:			14px;
}

/* Bottom-panel tab strip (Log / Metadata). Lives inside
   .sessions-log-header alongside the log-view controls. */
.sessions-panel-tabs {
	display:				flex;
	gap:					2px;
}
.sessions-panel-tab {
	background:				transparent;
	border:					none;
	border-bottom:			2px solid transparent;
	padding:				4px 10px;
	color:					var(--theme_g1);
	font:					inherit;
	font-size:				12px;
	font-weight:			600;
	text-transform:			uppercase;
	letter-spacing:			0.5px;
	cursor:					pointer;
}
.sessions-panel-tab:hover {
	color:					var(--theme_g0);
}
.sessions-panel-tab.active {
	color:					var(--theme_ln);
	border-bottom-color:	var(--theme_ln);
}

/* Log-only controls (filter, newest-first, follow). Wrapped so we can hide
   them as a group when the Metadata tab is active. Natural width — the
   sibling .sessions-log-spacer does the pushing. */
.sessions-log-controls {
	display:				flex;
	align-items:			center;
	gap:					8px;
}

/* Flex spacer between the tab strip and the right-hand controls. Keeps the
   Expand button flush right even when log_controls is hidden. */
.sessions-log-spacer {
	flex:					1;
}

.sessions-metadata-body {
	padding:				10px 12px;
	overflow-y:				auto;
	flex:					1;
	min-height:				0;
}

.sessions-metadata-layout {
	display:				grid;
	grid-template-columns:	minmax(0, 1fr) minmax(280px, max-content);
	gap:					16px;
	align-items:			start;
}

.sessions-metadata-panel {
	min-width:				0;
}

.sessions-metadata-core-panel {
	border-left:			1px solid var(--theme_g3);
	padding-left:			16px;
}

.sessions-metadata-heading {
	margin:					10px 0 6px;
	color:					var(--theme_ln);
	font-weight:			600;
}

.sessions-metadata-heading:first-child {
	margin-top:				0;
}

@media (max-width: 900px) {
	.sessions-metadata-layout {
		grid-template-columns:	1fr;
	}

	.sessions-metadata-core-panel {
		border-left:			0;
		border-top:			1px solid var(--theme_g3);
		padding-left:		0;
		padding-top:			10px;
	}
}

.sessions-selected {
	background-color:		var(--theme_p3) !important;
}

.sessions-log-panel {
	margin-top:				12px;
	border:					1px solid var(--theme_g3);
	border-radius:			6px;
	overflow:				hidden;
	display:				flex;
	flex-direction:			column;
	flex:					1;
	min-height:				200px;
}
.sessions-log-header {
	display:				flex;
	align-items:			center;
	padding:				6px 12px;
	background-color:		var(--theme_bg1);
	border-bottom:			1px solid var(--theme_g3);
	flex-shrink:			0;
}
.sessions-log-title {
	font-size:				12px;
	font-weight:			600;
	text-transform:			uppercase;
	letter-spacing:			0.5px;
	color:					var(--theme_g1);
}
.sessions-log-filter {
	padding:				6px 12px;
	font-size:				14px;
	font-family:			inherit;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	background:				var(--theme_bg1);
	color:					var(--theme_bright);
	outline:				none;
	width:					200px;
}
.sessions-log-filter:focus {
	border-color:			var(--theme_ln);
	background:				var(--theme_bg0);
}
.sessions-log-filter::placeholder {
	color:					var(--theme_g1);
}
.sessions-log-level-filter {
	padding:				4px 8px;
	font-size:				12px;
	font-family:			inherit;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	background:				var(--theme_bg1);
	color:					var(--theme_bright);
	outline:				none;
	cursor:					pointer;
}
.sessions-log-level-filter:focus {
	border-color:			var(--theme_ln);
}

/* Chevron-icon variant of .history-tab for the log-panel expand toggle.
   Overrides the text-button padding/letterspacing so the icon sits in a
   roughly square pill. Double-chevron up when collapsed, down when
   expanded — see ICON_CHEVRON_* in sessions.js. */
.sessions-panel-toggle {
	display:				inline-flex;
	align-items:			center;
	justify-content:		center;
	padding:				4px 8px;
	letter-spacing:			0;
}
.sessions-panel-toggle svg {
	width:					14px;
	height:					14px;
	display:				block;
}
.sessions-log-body {
	flex:					1;
	min-height:				0;
	overflow-y:				auto;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:				12px;
	line-height:			1.5;
	padding:				4px 0;
	background-color:		var(--theme_bg0);
}
.sessions-log-empty {
	color:					var(--theme_g1);
	font-style:				italic;
	padding:				8px 12px;
	font-family:			inherit;
}
.sessions-log-trimmed {
	color:					var(--theme_g1);
	font-style:				italic;
	padding:				2px 12px;
	font-size:				11px;
}
.sessions-log-line {
	padding:				0 12px;
	white-space:			pre;
	display:				flex;
	gap:					8px;
}
.sessions-log-line:hover {
	background-color:		var(--theme_bg1);
}
.sessions-log-ts {
	color:					var(--theme_g1);
	flex-shrink:			0;
}
.sessions-log-level {
	flex-shrink:			0;
	min-width:				4em;
	font-weight:			600;
}
.sessions-log-level-info  { color: var(--theme_ln); }
.sessions-log-level-warn  { color: var(--theme_warn); }
.sessions-log-level-error { color: var(--theme_fail); }
.sessions-log-level-debug { color: var(--theme_g1); }
.sessions-log-logger {
	flex-shrink:			0;
	width:					12em;
	color:					var(--theme_ln);
	opacity:				0.75;
	overflow:				hidden;
	text-overflow:			ellipsis;
	white-space:			nowrap;
}
.sessions-log-msg {
	white-space:			pre-wrap;
	word-break:				break-all;
}
.sessions-log-fmt-marker {
	flex-shrink:			0;
	color:					var(--theme_ln);
	opacity:				0.6;
	font-weight:			600;
	cursor:					help;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

.sessions-pill {
	display:				inline-block;
	font-size:				0.7em;
	font-weight:			600;
	padding:				1px 6px;
	margin-left:			6px;
	border-radius:			8px;
	vertical-align:			middle;
	text-transform:			uppercase;
	letter-spacing:			0.3px;
}
.sessions-self-pill {
	background-color:		var(--theme_p4);
	color:					var(--theme_g0);
}
.sessions-log-indicator-pill {
	background-color:		var(--theme_g2);
	color:					var(--theme_g0);
}

.objectstore-bucket-detail {
	grid-column:			1 / -1;
	padding:				8px 16px;
	background-color:		var(--theme_bg1);
	border-top:				1px solid var(--theme_g3);
	font-size:				0.9em;
}
.objectstore-objects-table {
	width:					100%;
	border-collapse:		collapse;
}
.objectstore-objects-table th {
	text-align:				left;
	font-weight:			600;
	padding:				4px 8px;
	border-bottom:			1px solid var(--theme_g3);
	color:					var(--theme_g1);
	font-size:				0.85em;
}
.objectstore-objects-table td {
	padding:				2px 8px;
	font-family:			var(--font_mono);
	font-size:				0.85em;
}

.sessions-pager {
	display:				flex;
	align-items:			center;
	gap:					8px;
	margin-top:				8px;
}
.sessions-pager-label {
	font-size:				0.85em;
	opacity:				0.7;
}

/* Pager lives in the header row, to the right of the filter input. No
   top margin since it's on the same baseline as tabs/filter. */
.sessions-header-pager {
	display:				flex;
	align-items:			center;
	gap:					6px;
}
.sessions-header-pager:empty {
	display:				none;
}

/* expandable cell ---------------------------------------------------------- */

.zen_expand_icon {
	cursor:                 pointer;
	margin-right:           0.5em;
	color:                  var(--theme_g1);
	font-weight:            bold;
	user-select:            none;
}

.zen_expand_icon:hover {
	color:                  var(--theme_ln);
}

.zen_data_text {
	user-select:            text;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:				13px;
}

/* toolbar ------------------------------------------------------------------ */

.zen_toolbar {
	display:			flex;
	margin-top:			0.5em;
	margin-bottom:		0.6em;
	font-size:			13px;

	> div {
		display:		flex;
		align-items:	center;
	}

	> div > .zen_toolbar_sep {
		color:			var(--theme_g2);
	}

	> div:last-child {
		margin-left:	auto;
	}

	> div > div {
		padding-right:	0.7em;
	}

	> div:last-child > :last-child {
		padding-right:	0;
	}

	&.zen_toolbar_inline {
		margin:			unset;
	}
}


/* modal -------------------------------------------------------------------- */

.zen_modal {
	position:					fixed;
	z-index:					1;
	top:						0;
	left:						0;
	width:						100%;
	height:						100%;
	display:					flex;
	justify-content:			center;
	align-items:				center;
	backdrop-filter:			blur(5px);

	.zen_modal_bg {
		position:				absolute;
		z-index:				-1;
		top:					0;
		left:					0;
		width:					100%;
		height:					100%;
		background:				var(--theme_g0);
		opacity:				0.4;
	}

	> div {
		border-radius:			6px;
		background-color:		var(--theme_g3);
		border:					1px solid var(--theme_g2);
		opacity:				1.0;
		width:					35em;
		padding:				0em 2em 2em 2em;
	}

	> div > div {
		text-align:				center;
	}

	.zen_modal_title {
		font-size:				16px;
		font-weight:			600;
		border-bottom:			1px solid var(--theme_g2);
		padding:				1.2em 0em 0.5em 0em;
		color:					var(--theme_bright);
	}

	.zen_modal_buttons {
		display:				flex;
		justify-content:		center;
		padding-bottom:			0em;

	> div {
			margin:				0em 1em 0em 1em;
			padding:			10px 16px;
			align-content:		center;
			border-radius:		6px;
			background-color:	var(--theme_p4);
			border:				1px solid var(--theme_g2);
			min-width:			6em;
			cursor:				pointer;
			font-weight:		500;
			transition:			background 0.15s;
		}

		> div:hover {
			background-color:	var(--theme_p3);
		}
	}

	.zen_modal_message {
		padding:				2em;
		min-height:				8em;
		align-content:			center;
		white-space:			pre-wrap;
		text-align:				left;
	}
}

/* progress bar ------------------------------------------------------------- */

.zen_progressbar {
	position:				absolute;
	top:					0;
	left:					0;
	width:					100%;
	height:					4px;
	border-radius:			2px;
	overflow:				hidden;

	> div:first-of-type {
		/* label */
		padding:			0.3em;
		padding-top:		8px;
		background-color:	var(--theme_g3);
		width:				max-content;
		font-size:			12px;
		color:				var(--theme_g1);
	}

	> div:last-of-type {
		/* bar */
		position:			absolute;
		top:				0;
		left:				0;
		width:				0%;
		height:				100%;
		background-color:	var(--theme_p0);
		transition:			width 0.3s ease;
	}

	> div:nth-of-type(2) {
		/* bg */
		position:			absolute;
		top:				0;
		left:				0;
		width:				100%;
		height:				100%;
		background-color:	var(--theme_g3);
	}
}

/* crumbs ------------------------------------------------------------------- */

#crumbs {
	display:			flex;
	position:			relative;
	top:				-0.5em;
	font-size:			13px;
	color:				var(--theme_g1);

	> div {
		padding-right:	0.5em;
	}

	> div:nth-child(odd)::after {
		content:		"/";
		color:			var(--theme_g2);
		padding-left:	0.5em;
	}
}

/* banner ------------------------------------------------------------------- */

zen-banner {
	margin-bottom:		24px;
}

zen-banner:has(+ zen-nav) {
	margin-bottom:		-1px;
}

zen-banner:has(+ zen-nav)::part(banner) {
	border-bottom-left-radius:	0;
	border-bottom-right-radius:	0;
}

zen-banner + zen-nav::part(nav-bar) {
	border-top-left-radius:		0;
	border-top-right-radius:	0;
}

/* error -------------------------------------------------------------------- */

#error {
	position:				fixed;
	bottom:					0;
	z-index:				1;
	color:					var(--theme_g0);
	background-color:		var(--theme_er);
	padding:				12px 20px 16px 20px;
	width:					100%;
	border-top:				1px solid var(--theme_g2);
	display:				flex;
	gap:					16px;
	align-items:			center;
	font-size:				13px;

	> div:nth-child(1) {
		font-size:			24px;
		font-weight:		bold;
		color:				var(--theme_fail);
	}

	> div:nth-child(2) > pre:nth-child(2) {
		margin-top:			4px;
		font-size:			12px;
		color:				var(--theme_g1);
	}
}

/* stats -------------------------------------------------------------------- */

#stat .zen_proptable pre {
	float:			left;
	min-width:		15%;
}

/* sections ----------------------------------------------------------------- */

.zen_sector {
	position:			relative;
}

.dropall {
	position:			absolute;
	top:				16px;
	right:				0;
	font-size:			12px;
	margin:				0;
}

/* stats tiles -------------------------------------------------------------- */

.grid.stats-tiles {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stats-tile {
	cursor:				pointer;
	transition:			border-color 0.15s;
}

.stats-tile:hover {
	border-color:		var(--theme_p0);
}

.stats-tile[data-over="true"] {
	border-color:		var(--theme_fail);
}

.stats-tile-detailed {
	position:			relative;
}

.stats-tile-detailed::after {
	content:			"details \203A";
	position:			absolute;
	bottom:				12px;
	right:				20px;
	font-size:			11px;
	color:				var(--theme_g1);
	opacity:			0.6;
	transition:			opacity 0.15s;
}

.stats-tile-detailed:hover::after {
	opacity:			1;
	color:				var(--theme_p0);
}

.stats-tile-selected {
	border-color:		var(--theme_p0);
	background:			var(--theme_p4);
	box-shadow:			0 0 0 1px var(--theme_p0);
}

.stats-tile-selected::after {
	content:			"details \2039";
	opacity:			1;
	color:				var(--theme_p0);
}

.tile-metrics {
	display:			flex;
	flex-direction:		column;
	gap:				12px;
}

.tile-columns {
	display:			flex;
	gap:				24px;
}

.tile-columns > .tile-metrics {
	flex:				1;
	min-width:			0;
}

.tile-metric .metric-value {
	font-size:			16px;
}

.tile-metric-hero .metric-value {
	font-size:			28px;
}

/* HTTP summary panel ------------------------------------------------------- */

.stats-http-panel {
	display:			grid;
	grid-template-columns: 20% 1fr 1fr;
	align-items:		center;
	margin-bottom:		16px;
}

.http-title {
	font-size:			22px;
	font-weight:		700;
	color:				var(--theme_bright);
	text-transform:		uppercase;
	letter-spacing:		1px;
	line-height:		1;
}

.http-section {
	display:			flex;
	flex-direction:		column;
	gap:				8px;
	padding:			0 24px;
	border-left:		1px solid var(--theme_g2);
}

.http-section-label {
	font-size:			11px;
	font-weight:		600;
	color:				var(--theme_g1);
	text-transform:		uppercase;
	letter-spacing:		0.5px;
}

.stats-http-panel .tile-metrics {
	flex-direction:		row;
	align-items:		center;
	gap:				20px;
}

/* workspaces page ---------------------------------------------------------- */

.ws-id-wrap {
	display:		inline-flex;
	align-items:	center;
	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:		14px;
}

.ws-share-table {
	width:			100%;
	margin:			4px 0;
}

.ws-share-table th {
	padding:		4px;
}

.ws-share-table td {
	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:		13px;
	padding:		4px;
}

.ws-share-table td.ws-no-shares-cell {
	color:			var(--theme_g1);
	font-style:		italic;
	font-family:	inherit;
	padding:		4px 8px;
}

.module-metrics-row td.ws-detail-cell {
	padding-left:	24px;
}

/* start -------------------------------------------------------------------- */

#start {
	#version {
		color:		var(--theme_faint);
		text-align: center;
		font-size:	12px;
		margin-top:	24px;
	}
}

/* info --------------------------------------------------------------------- */

#info, #storage, #network {
	.info-tiles {
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	}

	.info-tile {
		overflow:			hidden;
	}

	.info-props {
		display:			flex;
		flex-direction:		column;
		gap:				1px;
		font-size:			13px;
	}

	.info-prop {
		display:			flex;
		gap:				12px;
		padding:			4px 0;
		border-bottom:		1px solid var(--theme_border_subtle);
	}

	.info-prop:last-child {
		border-bottom:		none;
	}

	.info-prop-label {
		color:				var(--theme_g1);
		min-width:			140px;
		flex-shrink:		0;
		text-transform:		capitalize;
	}

	.info-prop-value {
		color:				var(--theme_bright);
		word-break:			break-all;
		margin-left:		auto;
		text-align:			right;
	}
}

/* entry -------------------------------------------------------------------- */

#entry {
	#datatable > div {
		> div:nth-child(3), > div:nth-child(4) {
			text-align: right;
		}
	}
}

/* tree --------------------------------------------------------------------- */

#tree {
	font-size:					13px;

	#tree_root > ul {
		margin-left:			0em;
	}
	ul {
		list-style-type:		none;
		padding-left:			0;
		margin-left:			1em;
	}
	li > div {
		display:				flex;
		border-bottom:			1px solid transparent;
		padding:				4px 6px;
		border-radius:			4px;
	}
	li > div > div[active] {
		text-transform:			uppercase;
		color:					var(--theme_p0);
		font-weight:			600;
	}
	li > div > div:nth-last-child(3) {
		margin-left:			auto;
	}
	li > div > div:nth-last-child(-n + 3) {
		font-size:				12px;
		width:					10em;
		text-align:				right;
		color:					var(--theme_g1);
		font-family:			'SF Mono', 'Cascadia Mono', Consolas, monospace;
	}
	li > div > div:nth-last-child(1) {
		width:					6em;
	}
	li > div:hover {
		background-color:		var(--theme_p4);
		border-bottom:			1px solid var(--theme_border_subtle);
	}
	li a {
		font-weight:			600;
	}
	li::marker {
		content:				"+";
		color:					var(--theme_g1);
	}
	li[expanded]::marker {
		content:				"-";
	}
	li[leaf]::marker {
		content:				"|";
	}
	li:last-child::marker {
		content:				"\\";
	}
}

/* map ---------------------------------------------------------------------- */

html:has(#map) {
	height: 100%;
	body, #container, #map {
		height:					100%;
	}
}
#map {
	#treemap {
		position:				relative;
		canvas {
			width:				100%;
		}
	}
}

/* ========================================================================== */
/* Shared classes for compute / dashboard pages                               */
/* ========================================================================== */

/* cards -------------------------------------------------------------------- */

.card {
	background:			var(--theme_g3);
	border:				1px solid var(--theme_g2);
	border-radius:		6px;
	padding:			20px;
}

.card-title {
	font-size:			14px;
	font-weight:		600;
	color:				var(--theme_g0);
	margin-bottom:		12px;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
}

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

.grid {
	display:			grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:				20px;
	margin-bottom:		24px;
}

/* metrics ------------------------------------------------------------------ */

.metric-value {
	font-size:			36px;
	font-weight:		600;
	color:				var(--theme_bright);
	line-height:		1;
}

.metric-label {
	font-size:			12px;
	color:				var(--theme_g1);
	margin-top:			4px;
}

/* section titles ----------------------------------------------------------- */

.section-title {
	font-size:			20px;
	font-weight:		600;
	margin-bottom:		16px;
	color:				var(--theme_bright);
}

/* html tables (compute pages) ---------------------------------------------- */

table {
	width:				100%;
	border-collapse:	collapse;
	font-size:			13px;
}

th {
	text-align:			left;
	color:				var(--theme_g1);
	padding:			8px 12px;
	border-bottom:		1px solid var(--theme_g2);
	font-weight:		600;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
	font-size:			11px;
}

td {
	padding:			8px 12px;
	border-bottom:		1px solid var(--theme_border_subtle);
	color:				var(--theme_g0);
}

tr:last-child td {
	border-bottom:		none;
}

.total-row td {
	border-top:			2px solid var(--theme_g2);
	font-weight:		600;
	color:				var(--theme_bright);
}

/* status badges ------------------------------------------------------------ */

.status-badge {
	display:			inline-block;
	padding:			2px 8px;
	border-radius:		4px;
	font-size:			11px;
	font-weight:		600;
}

.status-badge.active,
.status-badge.success {
	background:			color-mix(in srgb, var(--theme_ok) 15%, transparent);
	color:				var(--theme_ok);
}

.status-badge.inactive {
	background:			color-mix(in srgb, var(--theme_g1) 15%, transparent);
	color:				var(--theme_g1);
}

.status-badge.failure {
	background:			color-mix(in srgb, var(--theme_fail) 15%, transparent);
	color:				var(--theme_fail);
}

/* health dots -------------------------------------------------------------- */

.health-dot {
	display:			inline-block;
	width:				10px;
	height:				10px;
	border-radius:		50%;
	background:			var(--theme_g1);
}

.health-green {
	background:			var(--theme_ok);
}

.health-yellow {
	background:			var(--theme_warn);
}

.health-red {
	background:			var(--theme_fail);
}

/* inline progress bar ------------------------------------------------------ */

.progress-bar {
	width:				100%;
	height:				8px;
	background:			var(--theme_border_subtle);
	border-radius:		4px;
	overflow:			hidden;
	margin-top:			8px;
}

.progress-fill {
	height:				100%;
	background:			var(--theme_p0);
	transition:			width 0.3s ease;
}

/* stats row (label + value pair) ------------------------------------------- */

.stats-row {
	display:			flex;
	justify-content:	space-between;
	margin-bottom:		12px;
	padding:			8px 0;
	border-bottom:		1px solid var(--theme_border_subtle);
}

.stats-row:last-child {
	border-bottom:		none;
	margin-bottom:		0;
}

.stats-label {
	color:				var(--theme_g1);
	font-size:			13px;
}

.stats-value {
	color:				var(--theme_bright);
	font-weight:		600;
	font-size:			13px;
}

/* detail tag (inline badge) ------------------------------------------------ */

.detail-tag {
	display:			inline-block;
	padding:			2px 8px;
	border-radius:		4px;
	background:			var(--theme_border_subtle);
	color:				var(--theme_g0);
	font-size:			11px;
	margin:				2px 4px 2px 0;
}

/* timestamp ---------------------------------------------------------------- */

.timestamp {
	font-size:			12px;
	color:				var(--theme_faint);
}

/* inline error ------------------------------------------------------------- */

.error {
	color:				var(--theme_fail);
	padding:			12px;
	background:			var(--theme_er);
	border-radius:		6px;
	margin:				20px 0;
	font-size:			13px;
}

/* empty state -------------------------------------------------------------- */

.empty-state {
	color:				var(--theme_faint);
	font-size:			13px;
	padding:			20px 0;
	text-align:			center;
}

/* header layout ------------------------------------------------------------ */

.header {
	display:			flex;
	justify-content:	space-between;
	align-items:		center;
	margin-bottom:		24px;
}

/* history tabs ------------------------------------------------------------- */

.history-tabs {
	display:			flex;
	gap:				4px;
	background:			var(--theme_g4);
	border-radius:		6px;
	padding:			2px;
}

.history-tab {
	background:			transparent;
	border:				none;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			12px;
	font-weight:		600;
	padding:			4px 12px;
	border-radius:		4px;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
}

.history-tab:hover {
	color:				var(--theme_g0);
}

.history-tab.active {
	background:			var(--theme_g2);
	color:				var(--theme_bright);
}

/* docs --------------------------------------------------------------------- */

.docs-filter {
	display:				block;
	width:					100%;
	max-width:				300px;
	padding:				8px 12px;
	font-size:				14px;
	font-family:			inherit;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	background:				var(--theme_bg1);
	color:					var(--theme_bright);
	outline:				none;
	margin-bottom:			12px;
}
.docs-filter:focus {
	border-color:			var(--theme_ln);
	background:				var(--theme_bg0);
}
.docs-filter::placeholder {
	color:					var(--theme_g1);
}
.docs-highlight {
	background:				var(--theme_highlight);
	color:					inherit;
	border-radius:			2px;
	padding:				0 1px;
}
.docs-layout {
	display:				flex;
	gap:					24px;
}
.docs-sidebar {
	flex-shrink:			0;
	width:					200px;
	border-right:			1px solid var(--theme_g3);
	padding-right:			16px;
	display:				flex;
	flex-direction:			column;
	gap:					2px;
	position:				sticky;
	top:					16px;
	align-self:				flex-start;
}
.docs-sidebar-link {
	display:				block;
	padding:				6px 10px;
	font-size:				13px;
	color:					var(--theme_g1);
	text-decoration:		none;
	border-radius:			4px;
}
.docs-sidebar-link:hover {
	color:					var(--theme_g0);
	background:				var(--theme_g4);
}
.docs-sidebar-link.active {
	color:					var(--theme_bright);
	background:				var(--theme_g3);
	font-weight:			500;
}
.docs-content {
	flex:					1;
	min-width:				0;
	font-size:				16px;
	line-height:			1.5;
	color:					var(--theme_g0);
}
.docs-content h1 {
	font-size:				24px;
	font-weight:			600;
	color:					var(--theme_bright);
	margin:					0 0 16px 0;
	padding-bottom:			8px;
	border-bottom:			1px solid var(--theme_g3);
	display:				flex;
	align-items:			center;
	gap:					8px;
}
.docs-source-link {
	font-size:				14px;
	opacity:				0.4;
	transition:				opacity 0.15s;
	text-decoration:		none;
}
.docs-source-link::after {
	content:				"\2197";
}
.docs-source-link:hover,
.docs-github-link:hover {
	opacity:				1;
}
.docs-github-link {
	font-size:				14px;
	opacity:				0.4;
	transition:				opacity 0.15s;
	text-decoration:		none;
}
.docs-github-link::after {
	content:				"GH";
	font-size:				10px;
	font-weight:			700;
	letter-spacing:			-0.5px;
}
.docs-section {
	margin-top:				16px;
}
.docs-section-title {
	font-size:				18px;
	font-weight:			600;
	color:					var(--theme_bright);
	cursor:					pointer;
	list-style:				none;
	user-select:			none;
	padding-bottom:			6px;
	border-bottom:			1px solid var(--theme_g4);
	margin-bottom:			8px;
}
.docs-section-title::-webkit-details-marker {
	display:				none;
}
.docs-section-title::before {
	content:				"\25B6";
	display:				inline-block;
	margin-right:			8px;
	font-size:				10px;
	transition:				transform 0.15s;
	color:					var(--theme_g1);
}
.docs-section[open] > .docs-section-title::before {
	transform:				rotate(90deg);
}
.docs-content h2 {
	font-size:				18px;
	font-weight:			600;
	color:					var(--theme_bright);
	margin:					24px 0 8px 0;
}
.docs-content h3 {
	font-size:				15px;
	font-weight:			600;
	color:					var(--theme_bright);
	margin:					16px 0 6px 0;
}
.docs-content p {
	margin:					0 0 12px 0;
}
.docs-content code {
	background:				var(--theme_bg1);
	padding:				1px 5px;
	border-radius:			3px;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:				0.9em;
	color:					var(--theme_bright);
}
.docs-content pre {
	background:				var(--theme_bg1);
	padding:				12px 16px;
	border-radius:			6px;
	overflow-x:				auto;
	margin:					0 0 12px 0;
}
.docs-content pre code {
	background:				none;
	padding:				0;
}
.docs-content ul, .docs-content ol {
	margin:					4px 0 12px 0;
	padding-left:			24px;
}
.docs-content table {
	border-collapse:		collapse;
	margin:					8px 0 12px 0;
	font-size:				13px;
}
.docs-content th, .docs-content td {
	border:					1px solid var(--theme_g3);
	padding:				4px 10px;
}
.docs-content th {
	background:				var(--theme_bg1);
	font-weight:			600;
	color:					var(--theme_bright);
}
.docs-content a {
	color:					var(--theme_ln);
}
.docs-mermaid {
	margin:					12px 0;
	overflow-x:				auto;
}
.docs-mermaid svg {
	max-width:				100%;
	height:					auto;
}
.docs-loading, .docs-error {
	color:					var(--theme_g1);
	font-style:				italic;
}

/* module action controls --------------------------------------------------- */

.module-state-dot {
	display:			inline-block;
	width:				8px;
	height:				8px;
	border-radius:		50%;
	margin-right:		6px;
	vertical-align:		middle;
	flex-shrink:		0;
}

.module-state-dot[data-state="provisioned"]   { background: var(--theme_ok); }
.module-state-dot[data-state="hibernated"]    { background: var(--theme_warn); }
.module-state-dot[data-state="unprovisioned"] { background: var(--theme_g1); }
.module-state-dot[data-state="crashed"]       { background: var(--theme_fail); }

@keyframes module-dot-recovering {
	0%,   59.9% { background: var(--theme_fail); }
	60%,  100%  { background: var(--theme_ok); }
}

@keyframes module-dot-hibernating {
	0%,   59.9% { background: var(--theme_warn); }
	60%,  100%  { background: var(--theme_ok); }
}
@keyframes module-dot-waking {
	0%,   59.9% { background: var(--theme_ok); }
	60%,  100%  { background: var(--theme_warn); }
}
@keyframes module-dot-provisioning {
	0%,   59.9% { background: var(--theme_ok); }
	60%,  100%  { background: var(--theme_g1); }
}
@keyframes module-dot-deprovisioning-from-provisioned {
	0%,   59.9% { background: var(--theme_fail); }
	60%,  100%  { background: var(--theme_ok); }
}
@keyframes module-dot-deprovisioning-from-hibernated {
	0%,   59.9% { background: var(--theme_fail); }
	60%,  100%  { background: var(--theme_warn); }
}

.module-state-dot[data-state="hibernating"]  { animation: module-dot-hibernating  1s steps(1, end) infinite; }
.module-state-dot[data-state="waking"]       { animation: module-dot-waking       1s steps(1, end) infinite; }
.module-state-dot[data-state="provisioning"] { animation: module-dot-provisioning 1s steps(1, end) infinite; }
.module-state-dot[data-state="recovering"]   { animation: module-dot-recovering   1s steps(1, end) infinite; }
.module-state-dot[data-state="deprovisioning"][data-prev-state="provisioned"] {
	animation: module-dot-deprovisioning-from-provisioned 1s steps(1, end) infinite;
}
.module-state-dot[data-state="deprovisioning"][data-prev-state="hibernated"] {
	animation: module-dot-deprovisioning-from-hibernated 1s steps(1, end) infinite;
}
.module-state-dot[data-state="deprovisioning"] {
	animation: module-dot-deprovisioning-from-provisioned 1s steps(1, end) infinite;
}

@keyframes module-dot-obliterating-from-provisioned {
	0%,   59.9% { background: var(--theme_fail); }
	60%,  100%  { background: var(--theme_ok); }
}
@keyframes module-dot-obliterating-from-hibernated {
	0%,   59.9% { background: var(--theme_fail); }
	60%,  100%  { background: var(--theme_warn); }
}

.module-state-dot[data-state="obliterating"][data-prev-state="provisioned"] {
	animation: module-dot-obliterating-from-provisioned 0.5s steps(1, end) infinite;
}
.module-state-dot[data-state="obliterating"][data-prev-state="hibernated"] {
	animation: module-dot-obliterating-from-hibernated 0.5s steps(1, end) infinite;
}
.module-state-dot[data-state="obliterating"] {
	animation: module-dot-obliterating-from-provisioned 0.5s steps(1, end) infinite;
}

.module-action-cell {
	white-space:		nowrap;
	display:			flex;
	gap:				4px;
}

.module-action-wrap {
	display:			inline-block;
	cursor:				default;
}

.module-action-wrap:has(button:disabled) {
	cursor:				default;
}

.module-action-btn {
	background:			transparent;
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			13px;
	line-height:		1;
	padding:			3px 6px;
	transition:			background 0.1s, color 0.1s;
}

.module-action-btn:not(:disabled):hover {
	background:			var(--theme_g2);
	color:				var(--theme_bright);
}

.module-action-btn:disabled {
	color:				var(--theme_border_subtle);
	border-color:		var(--theme_border_subtle);
	pointer-events:		none;
}

.module-bulk-btn {
	display:			inline-flex;
	align-items:		center;
	gap:				5px;
	background:			transparent;
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	cursor:				pointer;
	font-size:			12px;
	font-weight:		600;
	padding:			4px 10px;
	color:				var(--theme_g1);
	transition:			background 0.1s, color 0.1s;
}

.module-bulk-btn:not(:disabled):hover {
	background:			var(--theme_p3);
	color:				var(--theme_bright);
}

.module-bulk-btn:disabled {
	opacity:			0.4;
}

.module-bulk-bar {
	display:			flex;
	align-items:		center;
	gap:				8px;
	padding:			6px 10px;
	margin-bottom:		8px;
	background:			var(--theme_g2);
	border-radius:		4px;
	font-size:			12px;
}

.module-bulk-label {
	margin-right:		8px;
	color:				var(--theme_g1);
}

.module-bulk-sep {
	flex:				1;
}

.module-pager {
	position:			absolute;
	right:				0;
	top:				0;
	display:			flex;
	align-items:		center;
	gap:				10px;
}

.module-pager-btn {
	background:			transparent;
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			12px;
	padding:			4px 10px;
	transition:			background 0.1s, color 0.1s;
}

.module-pager-btn:not(:disabled):hover {
	background:			var(--theme_g2);
	color:				var(--theme_bright);
}

.module-pager-btn:disabled {
	opacity:			0.35;
	cursor:				default;
}

.module-pager-label {
	font-size:			12px;
	color:				var(--theme_g1);
	min-width:			8em;
	text-align:			center;
}

.module-pager-search {
	font-size:			12px;
	padding:			4px 8px;
	width:				14em;
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	background:			var(--theme_g4);
	color:				var(--theme_g0);
	outline:			none;
	transition:			border-color 0.15s, outline 0.3s;
}

.module-pager-search:focus {
	border-color:		var(--theme_p0);
}

.module-pager-search::placeholder {
	color:				var(--theme_g1);
}

@keyframes pager-search-flash {
	from { box-shadow: inset 0 0 0 100px var(--theme_p2); }
	to   { box-shadow: inset 0 0 0 100px transparent; }
}

.zen_table > .pager-search-highlight > div {
	animation:			pager-search-flash 1s linear forwards;
}

.module-table .pager-search-highlight td {
	animation:			pager-search-flash 1s linear forwards;
}

@keyframes pager-loading-pulse {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 0.2; }
}

.pager-loading {
	color:				var(--theme_g1);
	font-style:			italic;
	font-size:			14px;
	font-weight:		600;
	padding:			12px 0;
	animation:			pager-loading-pulse 1.5s ease-in-out infinite;
}

.module-table td, .module-table th {
	padding-top:		4px;
	padding-bottom:		4px;
}

.module-expand-btn {
	background:			transparent;
	border:				none;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			16px;
	line-height:		1;
	padding:			0 4px 0 0;
	vertical-align:		middle;
}

.module-expand-btn:hover {
	color:				var(--theme_bright);
}

.zen-copy-btn {
	background:			transparent;
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			12px;
	line-height:		1;
	padding:			2px 5px;
	margin-left:		6px;
	vertical-align:		middle;
	flex-shrink:		0;
	transition:			background 0.1s, color 0.1s;
}
.zen-copy-btn:hover {
	background:			var(--theme_g2);
	color:				var(--theme_bright);
}
.zen-copy-btn.zen-copy-ok {
	color:				var(--theme_ok);
	border-color:		var(--theme_ok);
}

.zen-copy-wrap {
	display:			inline-flex;
	align-items:		center;
	white-space:		nowrap;
}

.module-metrics-row td {
	padding:			6px 10px 10px 42px;
	background:			var(--theme_g3);
	border-bottom:		1px solid var(--theme_g2);
}

.module-metrics-grid {
	display:			grid;
	grid-template-columns: max-content minmax(9em, 1fr) max-content minmax(9em, 1fr);
	gap:				3px 12px;
	font-size:			11px;
	font-variant-numeric: tabular-nums;
}

.module-metrics-label {
	color:				var(--theme_faint);
	white-space:		nowrap;
}

/* Right-column labels get extra left padding to visually separate the two pairs */
.module-metrics-label:nth-child(4n+3) {
	padding-left:		16px;
}

.module-metrics-value {
	color:				var(--theme_g0);
	text-align:			right;
}