/* A small, opinionated reset. Not normalize.css — we only need what we use. */

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

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

/* The UA stylesheet already does this, but any `display` we set elsewhere would win
   over it — and an element that is `hidden` must be gone whatever else it is. */
[hidden] {
	display: none !important;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* Respect a user who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* A browser gives every <fieldset> a 2px groove border and its own padding, and draws
   the <legend> on top of that border. Every fieldset in this app is either a card or
   a plain group of controls, and neither wants the groove — `.card` supplies its own
   border, and `04-components.css` puts the legend inside it. Reset here rather than
   per screen: the field app already zeroed it for `.report fieldset`, the dashboard
   did not, and that difference is exactly the kind that goes unnoticed until a new
   screen looks unlike every other one. */
fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
}