/*
 * The CSS entry (milestone 23, ruling 1). The StyleX plugin emits the compiled
 * atomic rules into their own layers; what is left here is the element reset
 * those rules are written against.
 *
 * The reset is not optional and not cosmetic. Tailwind's preflight used to
 * supply it, so every StyleX style in `web/src` is written assuming border-box
 * sizing, no default margins, unstyled lists and form controls that inherit
 * their font. Deleting this block does not restore browser defaults — it
 * silently changes the meaning of every size and spacing value in the app.
 * Rules are limited to what this app renders; it is not a general reset.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
}

/* Headings carry their scale from StyleX, not from the user agent. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}

ul,
ol,
menu {
	list-style: none;
}

/* Links opt into colour and underline; the shell's nav wants neither. */
a {
	color: inherit;
	text-decoration: inherit;
}

code,
kbd,
samp,
pre {
	font-size: 1em;
}

table {
	border-collapse: collapse;
	text-indent: 0;
	border-color: inherit;
}

/*
 * Form controls: inherit type and colour, drop the user-agent chrome, and keep
 * `appearance: button` so iOS Safari honours a button's border radius.
 */
button,
input,
select,
optgroup,
textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	background-color: transparent;
	border: 0 solid;
	border-radius: 0;
	opacity: 1;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	appearance: button;
}

/* A checkbox keeps its native chrome; the rules above would erase it. */
input[type="checkbox"],
input[type="radio"] {
	appearance: auto;
}

::placeholder {
	opacity: 1;
	color: color-mix(in oklab, currentcolor 50%, transparent);
}

/* An inline SVG leaves a baseline gap under a full-width chart. */
svg,
img,
video,
canvas {
	display: block;
	vertical-align: middle;
}

img,
video {
	max-width: 100%;
	height: auto;
}

[hidden] {
	display: none !important;
}
