/* Legacy ambient styles. Moved to cascade layer so AntD our and components can override.
* Layer order is defined in Flow's "preflight" styles. 'reset' has a very low precedence, which is
* appropriate for these global tag selectors, but we should figure out how to get rid of them.
*/
@layer reset {
	body {
		background-position: top left;
		background-attachment: fixed;
		margin: 0;
		-webkit-overflow-scrolling: touch;
	}

	/* 
		Slowly rolling back automatic button+button spacing - this is now scoped
		only to specific, non-Flow buttons which are not already wrapped in Space 
		
		The next step to removing this global behavior is to explicitly space adjacent
		Button components used in Pilets, which cannot be done all as one delivery,
		so it requires this intermediate step.

		The selectors used here each target different types of Buttons we use today:
		- .ant-btn: Ant Design buttons
		- button:has(div[tabindex='-1']): Legacy Flow Web buttons 
		    (for some unexplained reason, flow-web includes this div as button content in all Buttons)

		When any of these are wrapped in Space, we assume the Space is explicitly controlling their
		spacing and turn off the automatic margin.
	*/
	.ant-btn + .ant-btn,
	button:has(div[tabindex='-1']) + button:has(div[tabindex='-1']) {
		margin-left: 6px;

		.ant-space > & {
			margin-left: unset;
		}
	}

	html {
		font-family: 'PPMori', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.25;
		color: #333;
	}

	input,
	textarea,
	keygen,
	select,
	button {
		font-family: inherit;
		font-weight: inherit;
	}

	h3 {
		color: #777;
		font-size: 14px;
		margin: 5px 0;
	}

	h3.section {
		color: #777 !important;
	}

	h4 {
		font-size: 14px;
		margin: 5px 0;
	}

	h5 {
		color: #5d5d5d;
		font-size: 14px;
		margin: 4px 0;
	}

	h5 a {
		color: #5d5d5d;
		text-decoration: none;
	}

	h5 a:hover {
		text-decoration: underline;
	}

	h3.title {
		margin: 0 !important;
		padding: 0 !important;
	}

	h3 a {
		text-decoration: none;
	}

	h3 a:hover {
		text-decoration: underline;
	}

	a strong {
		color: #6e6e71;
	}

	a.ui {
		color: #7a7a7a;
		font-size: 11px;
		text-decoration: none;
		display: inline-block;
	}

	a.ui:hover {
		text-decoration: underline;
	}

	p {
		margin: 10px 0;
	}

	pre {
		overflow-x: auto;
		padding: 10px;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
}

/* 
Isolate the stacking context of the main application from elements portaled into body. 
This means z-index values within the app's root element won't conflict with z-index values
of elements outside it.
*/
#applicationHost {
	isolation: isolate;
}

@media print {
	h1 {
		display: none;
	}
	html {
		background: none !important;
		overflow: visible !important;
		position: static !important;
	}
	body {
		width: auto !important;
		overflow: visible !important;
		position: static !important;
		background: none !important;
	}
}