/* The designed public site was built against the browser's own defaults. The
   app's global stylesheet starts from Tailwind's preflight and the platform's
   base layer instead, so inside the site this layer hands back exactly the
   defaults those take away.
   The site's own stylesheets are unlayered and still win over everything
   here; everything outside `.saga-site` (the contact dialog, the consent
   prompt) keeps the app's styling. Declaring the layer order explicitly keeps
   this above preflight however the stylesheets happen to load. */
@layer theme, base, components, utilities, saga-site;

@layer saga-site {
	html:has(.saga-site) {
		line-height: revert;
		font-family: revert;
		tab-size: revert;
		-webkit-tap-highlight-color: revert;
		font-feature-settings: revert;
		font-variation-settings: revert;
		color: revert;
		text-rendering: revert;
		-moz-osx-font-smoothing: revert;
		/* The platform styles every scrollbar as an 8px track. Any non-auto
		   scrollbar colour makes the browser drop those styles and draw its
		   own scrollbar — an overlay one where the system uses overlays, as
		   the design assumes. */
		scrollbar-color: rgb(0 0 0 / 0.4) transparent;
	}

	.saga-site *,
	.saga-site ::before,
	.saga-site ::after {
		margin: revert;
		padding: revert;
		border: revert;
	}

	.saga-site :is(h1, h2, h3, h4, h5, h6) {
		font-size: revert;
		font-weight: revert;
		letter-spacing: revert;
	}

	.saga-site ::selection {
		background: revert;
	}

	.saga-site a {
		text-decoration: revert;
	}

	.saga-site :is(ol, ul, menu) {
		list-style: revert;
	}

	.saga-site :is(img, svg, video, canvas, audio, iframe, embed, object) {
		display: revert;
		vertical-align: revert;
	}

	.saga-site :is(img, video) {
		max-width: revert;
	}

	.saga-site :is(code, kbd, samp, pre) {
		font-family: revert;
		font-size: revert;
	}

	.saga-site small {
		font-size: revert;
	}

	.saga-site table {
		text-indent: revert;
		border-color: revert;
		border-collapse: revert;
	}

	.saga-site summary {
		display: revert;
	}

	.saga-site :is(button, input, select, optgroup, textarea) {
		font: revert;
		font-feature-settings: revert;
		font-variation-settings: revert;
		letter-spacing: revert;
		color: revert;
		border-radius: revert;
		background-color: revert;
		opacity: revert;
		appearance: revert;
	}

	.saga-site ::placeholder {
		opacity: revert;
		color: revert;
	}

	.saga-site textarea {
		resize: revert;
	}
}