milestone 23: restore the focus ring on select options, check layer order, close preflight gaps

web/src/styles.css

@@ -9,7 +9,7 @@
  * 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
@@ -65,9 +65,21 @@
 	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;
@@ -166,7 +178,7 @@
 		height: auto;
 	}
 
-	[hidden] {
+	[hidden]:not([hidden="until-found"]) {
 		display: none !important;
 	}
 }

web/src/ui/Select.tsx

@@ -87,11 +87,18 @@ const styles = stylex.create({
 		fontSize: "0.875rem",
 		lineHeight: "1.25rem",
 		cursor: "pointer",
-		outlineStyle: "none",
 	},
+	/**
+	 * The inverted row is the listbox convention, and the ring is the milestone-9
+	 * floor; an option gets both. RAC focuses the option's own DOM node, so the
+	 * shared `:focus-visible` ring does apply here — it is drawn inset because an
+	 * option flush against a scrolling popover clips an outset one, and recoloured
+	 * because the focus token is the same blue this row just painted behind it.
+	 */
 	itemFocused: {
 		backgroundColor: colors.primary,
 		color: colors.primaryText,
+		outlineColor: { default: null, ":focus-visible": colors.primaryText },
 	},
 	itemSelected: {
 		fontWeight: 600,
@@ -125,6 +132,7 @@ export default function Select({ options, value, onChange, label, "aria-label":
 							className={({ isFocused, isSelected }) =>
 								stylex.props(
 									styles.item,
+									shared.insetFocusRing,
 									isSelected && styles.itemSelected,
 									isFocused && styles.itemFocused,
 								).className ?? ""