nxdns/web/src/styles.css

/*
 * 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.
 *
 * The reset lives in its own cascade layer, declared here before StyleX emits
 * its own. Layer order is priority order, and unlayered author CSS outranks
 * every layer: leaving these rules unlayered silently beat every StyleX rule in
 * the app, whatever the selector said.
 */

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

	/*
	 * This is not a reproduction of Tailwind's default stack, which is gone with
	 * the package; text metrics drift here, which ruling 7 accepts. The symbol
	 * families at the end are not decoration: `Select.tsx` renders U+25BE for its
	 * chevron, and Segoe UI does not carry that glyph, so on Windows the stack
	 * has to reach a font that does before it falls back to a substitute box.
	 */
	html {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		font-family:
			system-ui,
			-apple-system,
			"Segoe UI",
			Roboto,
			"Helvetica Neue",
			Arial,
			sans-serif,
			"Segoe UI Symbol",
			"Noto Sans Symbols 2";
	}

	/* 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-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-size: 1em;
	}

	/* Without this the spinner stretches a number input taller than its row. */
	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto;
	}

	/* Firefox draws a red glow on an invalid field; the form shows its own error. */
	:-moz-ui-invalid {
		box-shadow: none;
	}

	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;
	}

	/*
	 * WebKit lays a date/time input out from its own pseudo-elements, and an
	 * empty one comes out shorter than a filled one without these. The query log
	 * filters are two `datetime-local` inputs sitting in a row of controls, so
	 * the height has to hold whether or not a value is set.
	 */
	::-webkit-date-and-time-value {
		min-height: 1lh;
		text-align: inherit;
	}

	::-webkit-datetime-edit {
		display: inline-flex;
	}

	::-webkit-datetime-edit-fields-wrapper {
		padding: 0;
	}

	::-webkit-datetime-edit,
	::-webkit-datetime-edit-year-field,
	::-webkit-datetime-edit-month-field,
	::-webkit-datetime-edit-day-field,
	::-webkit-datetime-edit-hour-field,
	::-webkit-datetime-edit-minute-field,
	::-webkit-datetime-edit-second-field,
	::-webkit-datetime-edit-millisecond-field,
	::-webkit-datetime-edit-meridiem-field {
		padding-block: 0;
	}

	::placeholder {
		opacity: 1;
	}

	/*
	 * Safari below 16.4 resolves `color-mix` against the wrong colour here and
	 * renders the placeholder invisible. The guard admits every engine that
	 * supports either a non-WebKit feature or one Safari only gained afterwards.
	 */
	@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
		::placeholder {
			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]:not([hidden="until-found"]) {
		display: none !important;
	}
}