@charset "utf-8";

/* The layer is declared here, in the file, not in the line that loads it.
   Assignment from outside exists only for @import — a <link> cannot carry a
   layer at all — so a file that relies on the loading line breaks the moment the
   way it is loaded changes. jackreports.css has always done it this way; this
   brings reset.css into line with it.

   The order of the layers themselves still comes from main.css, and that is
   safe: a layer's position is fixed by document order of the sheets, not by which
   one finishes downloading first. Measured in .harness/layer-order-probe.js. */
@layer reset {

	/* Reset */

	/* Padding and border count inside a declared width, not on top of it. Without
	   this every component that has both has to subtract its own padding by hand,
	   and the subtraction is a value kept in step with another value — the pattern
	   that put a paragraph 149px past its container in the work history. */
	*, *::before, *::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
		border: none;
		list-style: none;
		vertical-align: baseline;
	}

	html {
		scroll-behavior: smooth;
	}

	/* An anchor has to land its target below the menu, so the reservation is the
	   menu plus a gap — read from --menu-height, the one place that knows it.

	   It used to be max(4.5rem, 15vh), and neither arm had anything to do with the
	   menu. Which of the two won depended on the height of the WINDOW, while what
	   had to be cleared depended on its width, so the two drifted apart on any
	   window shorter than about 900 and the target landed underneath: -12.19px at
	   1920x700, -10.91 at 1440x600, -10.02 at 1100x600. Only on a jump UPWARDS —
	   going down, the scroll handler hides the menu on the way and covers for it.
	   Measured by .harness/anchor-clearance.js, which was written against this
	   failure before it was fixed.

	   The gap is --space-s and not a number: the old reservation happened to clear
	   the menu by 22.75px at 1440x900, and 1rem is the nearest step of the scale to
	   it (22.448px there, against 16.836 for --space-xs and 33.672 for --space-m).
	   It also has to be big enough to swallow the ~0.01px by which --menu-height
	   falls short of the painted line box, which it does by three orders.

	   No fallback in the var(): without main.css there is no --menu-height, but
	   there is also no menu, no layout and no reason to reserve room for any of it.
	   A guarantee is bought against the consequence of a failure, not the failure. */
	[id] {
		scroll-margin-top: calc(var(--menu-height) + var(--space-s));
	}

	body {
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: 100%;
	}
}