@lolmath/ui 9.1.1 → 9.2.0

package/dist/index.css

@@ -181,17 +181,22 @@
 	}
 }
 @layer lol {
-	._breadcrumbs_1c3hr_2 {
+	._breadcrumbs_1gzfl_2 {
 		display: flex;
 		gap: 0.25rem;
+		/* An <ol>: the UA gives it block margins and a 40px marker gutter. */
+		margin: 0;
+		padding: 0;
+		list-style: none;
 	}
 
-	._item_1c3hr_7 {
+	._item_1gzfl_11 {
 		display: flex;
 		align-items: center;
 	}
 
-	._link_1c3hr_12 {
+	._link_1gzfl_16 {
+		text-decoration: none;
 		font-family: var(--lol-font-family-beaufort);
 		color: var(--lol-color-gold-300);
 		position: relative;
@@ -206,16 +211,28 @@
 		}
 	}
 
-	._divider_1c3hr_27 {
+	._divider_1gzfl_32 {
+		/* Off the text baseline, so the row's height is the glyph's, and never
+		   wider than the row. */
+		display: block;
+		max-width: 100%;
 		height: 11px;
 	}
 }
 @layer lol {
-	._button_lhmqr_2 {
+	._button_7nrx3_2 {
+		appearance: none;
+		margin: 0;
+		/* Presets that want horizontal padding add it back further down. Without a
+		   zero here, `text` (which wants none) picks up the UA's `1px 6px`. */
+		padding: 0;
+		/* Also rendered on the <a> of ButtonLink, which the UA underlines. */
+		text-decoration: none;
+
 		border-radius: 0px;
 		border: 2px solid transparent;
 
-		&._thin_lhmqr_6 {
+		&._thin_7nrx3_14 {
 			border-width: 1px;
 		}
 
@@ -246,17 +263,17 @@
 			outline: none;
 		}
 
-		&._small_lhmqr_37 {
+		&._small_7nrx3_45 {
 			font-size: var(--lol-font-size-sm);
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_lhmqr_42 {
+		&._medium_7nrx3_50 {
 			font-size: var(--lol-font-size-base);
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_lhmqr_47 {
+		&._large_7nrx3_55 {
 			font-size: var(--lol-font-size-base);
 			min-height: var(--lol-form-height-large);
 		}
@@ -266,14 +283,14 @@
 		 * `.button` and loses the border-radius and font-weight to whichever rule
 		 * is written last.
 		 */
-		&._round_lhmqr_53,
-		&._square_lhmqr_58 {
+		&._round_7nrx3_61,
+		&._square_7nrx3_66 {
 			aspect-ratio: 1 / 1;
 			padding: 0px;
 			font-weight: 900;
 		}
 
-		&._round_lhmqr_53 {
+		&._round_7nrx3_61 {
 			border-radius: 9999px;
 		}
 
@@ -304,22 +321,22 @@
 	 * together by exactly one border width so their two gradient borders read as
 	 * a single seam instead of a double-thick one.
 	 */
-	._toggleButtonGroup_lhmqr_95 {
+	._toggleButtonGroup_7nrx3_103 {
 		display: inline-flex;
 
-		& > ._button_lhmqr_2 + ._button_lhmqr_2 {
+		& > ._button_7nrx3_2 + ._button_7nrx3_2 {
 			margin-left: -2px;
 		}
 
 		/* Must follow the rule above: thin buttons only need a 1px overlap. */
-		& > ._thin_lhmqr_6 + ._thin_lhmqr_6 {
+		& > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
 			margin-left: -1px;
 		}
 
 		/* Whichever button is highlighted owns the seams next to it. */
-		& > ._button_lhmqr_2:hover,
-		& > ._button_lhmqr_2:focus-visible,
-		& > ._button_lhmqr_2[data-selected] {
+		& > ._button_7nrx3_2:hover,
+		& > ._button_7nrx3_2:focus-visible,
+		& > ._button_7nrx3_2[data-selected] {
 			position: relative;
 			z-index: 1;
 		}
@@ -329,48 +346,48 @@
 			/* Equal widths keep the collapsed seams lined up. */
 			align-items: stretch;
 
-			& > ._button_lhmqr_2 + ._button_lhmqr_2 {
+			& > ._button_7nrx3_2 + ._button_7nrx3_2 {
 				margin-left: 0;
 				margin-top: -2px;
 			}
 
-			& > ._thin_lhmqr_6 + ._thin_lhmqr_6 {
+			& > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
 				margin-top: -1px;
 			}
 		}
 	}
 
-	._primary_lhmqr_131,
-	._secondary_lhmqr_132,
-	._hextech_lhmqr_133,
-	._dimmed_lhmqr_134 {
-		&:not(._square_lhmqr_58, ._round_lhmqr_53) {
-			&._small_lhmqr_37 {
+	._primary_7nrx3_139,
+	._secondary_7nrx3_140,
+	._hextech_7nrx3_141,
+	._dimmed_7nrx3_142 {
+		&:not(._square_7nrx3_66, ._round_7nrx3_61) {
+			&._small_7nrx3_45 {
 				padding: 0 0.5rem;
 			}
 
-			&._medium_lhmqr_42 {
+			&._medium_7nrx3_50 {
 				padding: 0 1rem;
 			}
 
-			&._large_lhmqr_47 {
+			&._large_7nrx3_55 {
 				padding: 0 1rem;
 			}
 		}
 	}
 
-	._text_lhmqr_150 {
-		&._round_lhmqr_53,
-		&._square_lhmqr_58 {
+	._text_7nrx3_158 {
+		&._round_7nrx3_61,
+		&._square_7nrx3_66 {
 			&:hover {
 				--lol-button-background-gradient: var(--lol-gradient-grey-300);
 				--lol-button-border-gradient: var(--lol-gradient-transparent);
 			}
 		}
 
-		&._round_lhmqr_53,
-		&._square_lhmqr_58,
-		&._normal_lhmqr_161 {
+		&._round_7nrx3_61,
+		&._square_7nrx3_66,
+		&._normal_7nrx3_169 {
 			position: relative;
 
 			&::after {
@@ -388,7 +405,7 @@
 		}
 	}
 
-	._hextech_lhmqr_133 {
+	._hextech_7nrx3_141 {
 		color: var(--lol-color-blue-100);
 		--lol-button-border-gradient: var(--lol-gradient-hextech);
 		--lol-button-background-gradient: var(--lol-gradient-grey-300);
@@ -413,17 +430,16 @@
 		}
 	}
 
-	._dimmed_lhmqr_134 {
+	._dimmed_7nrx3_142 {
 		--lol-button-background-gradient: var(--lol-gradient-hextech-black);
 		--lol-button-border-gradient: var(--lol-gradient-grey-300);
 
-		&._selected_lhmqr_208,
 		&:focus-visible {
 			--lol-button-border-gradient: var(--lol-gradient-gold);
 		}
 	}
 
-	._primary_lhmqr_131 {
+	._primary_7nrx3_139 {
 		--lol-button-border-gradient: var(--lol-gradient-gold);
 		--lol-button-background-gradient: linear-gradient(
 			to top,
@@ -451,36 +467,740 @@
 		}
 	}
 
-	._secondary_lhmqr_132 {
-		--lol-button-border-gradient: var(--lol-gradient-gold);
-		--lol-button-background-gradient: var(--lol-gradient-grey-300);
-	}
+	._secondary_7nrx3_140 {
+		--lol-button-border-gradient: var(--lol-gradient-gold);
+		--lol-button-background-gradient: var(--lol-gradient-grey-300);
+	}
+
+	._primary_7nrx3_139:hover,
+	._secondary_7nrx3_140:hover,
+	._dimmed_7nrx3_142:hover {
+		--lol-button-border-gradient: var(--lol-gradient-gold-hover);
+	}
+
+	._primary_7nrx3_139:active,
+	._secondary_7nrx3_140:active,
+	._dimmed_7nrx3_142:active {
+		--lol-button-border-gradient: var(--lol-gradient-gold-press);
+	}
+
+	/*
+	 * A selected toggle takes the hextech background from `.button`, so the
+	 * dimmed border follows it there: a hextech body inside the resting grey
+	 * frame reads as an unfinished button. Must stay after the gold `:hover`
+	 * and `:active` rules above so the resting selected border wins, and
+	 * before `:disabled` below so a disabled toggle still greys out.
+	 */
+	._dimmed_7nrx3_142[data-selected] {
+		--lol-button-border-gradient: var(--lol-gradient-hextech);
+
+		&:hover {
+			--lol-button-border-gradient: var(--lol-gradient-hextech-hover);
+		}
+
+		&:active {
+			--lol-button-border-gradient: var(--lol-gradient-hextech-press);
+		}
+	}
+
+	._primary_7nrx3_139:disabled,
+	._secondary_7nrx3_140:disabled,
+	._dimmed_7nrx3_142:disabled {
+		--lol-button-border-gradient: var(--lol-gradient-disabled);
+	}
+
+	._primary_7nrx3_139:focus-visible,
+	._secondary_7nrx3_140:focus-visible {
+		outline-color: var(--lol-color-gold-400);
+	}
+}
+@layer lol {
+	._text_1tvjr_2 {
+		font-family: var(--lol-font-family-spiegel);
+	}
+
+	._label_1tvjr_6 {
+		font-size: var(--lol-font-size-label);
+		line-height: var(--lol-line-height-label);
+		letter-spacing: var(--lol-letter-spacing-label);
+		font-weight: var(--lol-font-weight-label);
+	}
+
+	._stat_1tvjr_13 {
+		font-size: var(--lol-font-size-stat);
+		line-height: var(--lol-line-height-stat);
+		letter-spacing: var(--lol-letter-spacing-stat);
+		font-weight: var(--lol-font-weight-stat);
+	}
+
+	._largeNumber_1tvjr_20 {
+		font-size: var(--lol-font-size-large-number);
+		line-height: var(--lol-line-height-large-number);
+		letter-spacing: var(--lol-letter-spacing-large-number);
+		font-weight: var(--lol-font-weight-large-number);
+	}
+
+	._sm_1tvjr_27 {
+		font-size: var(--lol-font-size-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		font-weight: var(--lol-font-weight-sm);
+	}
+
+	._base_1tvjr_34 {
+		font-size: var(--lol-font-size-base);
+		line-height: var(--lol-line-height-base);
+		letter-spacing: var(--lol-letter-spacing-base);
+		font-weight: var(--lol-font-weight-base);
+	}
+
+	._md_1tvjr_41 {
+		font-size: var(--lol-font-size-md);
+		line-height: var(--lol-line-height-md);
+		letter-spacing: var(--lol-letter-spacing-md);
+		font-weight: var(--lol-font-weight-md);
+	}
+
+	._lg_1tvjr_48 {
+		font-size: var(--lol-font-size-lg);
+		line-height: var(--lol-line-height-lg);
+		letter-spacing: var(--lol-letter-spacing-lg);
+		font-weight: var(--lol-font-weight-lg);
+	}
+
+	._grey100_1tvjr_55 {
+		color: var(--lol-color-grey-100);
+	}
+
+	._grey150_1tvjr_59 {
+		color: var(--lol-color-grey-150);
+	}
+
+	._gold100_1tvjr_63 {
+		color: var(--lol-color-gold-100);
+	}
+}
+@layer lol {
+	._button_2pv2a_2 {
+		/* A <button>; the trigger's whole look is drawn below. */
+		appearance: none;
+		margin: 0;
+		font-family: var(--lol-font-family-spiegel);
+		display: inline-block;
+		min-width: 200px;
+		outline: none;
+
+		border: 1px solid transparent;
+
+		color: var(--lol-color-grey-100);
+		padding: 0 1.5rem 0 0.5rem;
+
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1rem;
+		letter-spacing: 0.025em;
+		text-align: left;
+
+		--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=");
+		--lol-select-border-gradient: var(--lol-gradient-gold);
+		--lol-select-background-gradient: var(--lol-gradient-hextech-black);
+
+		&[data-open] {
+			--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==");
+			color: var(--lol-color-gold-600);
+			--lol-select-background-gradient: var(--lol-gradient-grey-300);
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		&[data-pressed] {
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		&[data-hovered] {
+			--lol-select-border-gradient: var(--lol-gradient-gold-hover);
+		}
+
+		&[data-disabled] {
+			--lol-select-border-gradient: var(--lol-gradient-disabled);
+			/* make the image gray */
+			filter: grayscale(100%);
+		}
+
+		&._small_2pv2a_47 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_2pv2a_51 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_2pv2a_55 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._singleSelect_2pv2a_60 {
+		background:
+			var(--lol-select-image) no-repeat right 0.5rem center,
+			var(--lol-select-background-gradient) padding-box,
+			var(--lol-select-border-gradient) border-box;
+	}
+
+	._multiSelect_2pv2a_67 {
+		background:
+			var(--lol-select-background-gradient) padding-box,
+			var(--lol-select-border-gradient) border-box;
+	}
+
+	._listBox_2pv2a_73 {
+		background-color: var(--lol-color-hextech-black);
+		border: 1px solid var(--lol-color-gold-600);
+		outline: none;
+		overflow-y: auto;
+	}
+
+	._item_2pv2a_80 {
+		border-bottom: 1px solid var(--lol-color-grey-300);
+		color: var(--lol-color-gold-300);
+		font-size: var(--lol-font-size-sm);
+		font-weight: var(--lol-font-weight-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		padding: 0.375rem 0.5rem;
+		outline: none;
+		cursor: pointer;
+
+		&[data-hovered] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-pressed],
+		&._focus_2pv2a_97 {
+			background-color: color-mix(
+				in srgb,
+				var(--lol-color-grey-300),
+				transparent 50%
+			);
+			color: var(--lol-color-gold-600);
+		}
+
+		&._selected_2pv2a_106 {
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
+			background-position: right 0.5rem center;
+			background-repeat: no-repeat;
+		}
+	}
+
+	._popover_2pv2a_113 {
+		width: var(--trigger-width);
+		display: flex;
+		flex-direction: column;
+	}
+
+	._emptyList_2pv2a_119 {
+		padding: 0.5rem 0.25rem;
+		text-align: left;
+	}
+}
+@layer lol {
+	._calendar_dpi4c_2,
+	._rangeCalendar_dpi4c_3 {
+		--lol-calendar-cell-size: 2.5rem;
+
+		display: flex;
+		flex-direction: column;
+		/*
+		 * A flex column is still a normal block box for its own sizing: with
+		 * no explicit width it fills its parent (a popover, a wide form)
+		 * rather than shrinking to its content. `fit-content` makes the
+		 * calendar itself only as wide as its widest child (the grid), and
+		 * `align-items: stretch` (the default, kept intentionally) then
+		 * stretches every other child — including the `header="picker"` nav
+		 * row, which sits directly in this container rather than inside
+		 * `.month` — to match that same width, instead of each shrinking
+		 * independently to its own content.
+		 */
+		width: fit-content;
+		gap: 0.75rem;
+		outline: none;
+
+		&[data-disabled] {
+			opacity: 0.6;
+		}
+	}
+
+	._months_dpi4c_28 {
+		display: flex;
+		gap: 1.5rem;
+	}
+
+	._month_dpi4c_16 {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	._nav_dpi4c_39 {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	._pickerGroup_dpi4c_46 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		flex: 1;
+	}
+
+	._chevronFlipped_dpi4c_54 {
+		transform: rotate(180deg);
+	}
+
+	._heading_dpi4c_58 {
+		flex: 1;
+		margin: 0;
+		text-align: center;
+		color: var(--lol-color-gold-100);
+		font-family: var(--lol-font-family-beaufort);
+		text-transform: uppercase;
+		font-size: var(--lol-font-size-sm);
+		font-weight: var(--lol-font-weight-h5);
+		letter-spacing: var(--lol-letter-spacing-h5);
+	}
+
+	._grid_dpi4c_70 {
+		/*
+		 * `separate` (not `collapse`) is what makes the continuous-selection
+		 * border below work at all: `collapse` merges each pair of adjacent
+		 * cells' touching borders into one, picking a winner between a
+		 * selected row's colored edge and its unselected neighbor's
+		 * transparent one — which silently erases every other segment of the
+		 * "continuous" line. `separate` keeps each cell's border independent.
+		 *
+		 * The table is sized to exactly 7 cells wide rather than `100%`: with
+		 * no intrinsic width, it stretches to fill whatever it's placed in
+		 * (a popover, a wide form), dragging the popover along with it and
+		 * spacing the 7 columns far enough apart that `.cell`'s fixed size
+		 * reads as small islands with visible gaps instead of a tight grid.
+		 *
+		 * `border-spacing` is 0 horizontally (columns within a week must
+		 * touch, or the continuous selection border above breaks into
+		 * islands again) but 3px vertically: with no gap between rows, two
+		 * consecutive fully-selected weeks touch top-border-to-bottom-border
+		 * and read as one tall block instead of two separate rounded bars.
+		 */
+		border-collapse: separate;
+		border-spacing: 0 3px;
+		table-layout: fixed;
+		width: calc(var(--lol-calendar-cell-size) * 7);
+	}
+
+	._gridHeader_dpi4c_97 {
+		/* thead: no visual treatment of its own beyond the cells within it. */
+	}
+
+	._headerCell_dpi4c_101 {
+		padding: 0 0 0.5rem 0;
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-xs);
+		font-weight: 700;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		text-align: center;
+		color: var(--lol-color-grey-100);
+	}
+
+	._cell_dpi4c_82 {
+		position: relative;
+		z-index: 0;
+		width: 100%;
+		height: var(--lol-calendar-cell-size);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-sm);
+		font-weight: 500;
+		color: var(--lol-color-gold-100);
+
+		border-radius: 9999px;
+		outline: none;
+		cursor: default;
+		-webkit-tap-highlight-color: transparent;
+
+		&[data-outside-month] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-outside-visible-range] {
+			visibility: hidden;
+		}
+
+		&[data-unavailable] {
+			color: var(--lol-color-grey-150);
+			text-decoration: line-through;
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-hovered]:not([data-disabled], [data-selected]) {
+			background-color: var(--lol-color-grey-300);
+		}
+
+		&[data-pressed]:not([data-disabled]) {
+			background-color: var(--lol-color-grey-200);
+		}
+
+		&[data-focus-visible] {
+			z-index: 2;
+			outline: 2px solid var(--lol-color-gold-400);
+			outline-offset: 2px;
+		}
+
+		&[data-invalid] {
+			color: var(--lol-color-gold-400);
+		}
+
+		&[data-today]:not([data-selected]) {
+			color: var(--lol-color-gold-400);
+			font-weight: 700;
+
+			&::after {
+				content: "";
+				position: absolute;
+				bottom: 0.25rem;
+				width: 3px;
+				height: 3px;
+				border-radius: 9999px;
+				background-color: var(--lol-color-gold-400);
+			}
+		}
+	}
+
+	/*
+	 * `border-color` can't be a gradient, and `border-image` (which can) turns
+	 * out not to clip to `border-radius` — it paints a sharp rectangular frame
+	 * regardless, which is exactly wrong for a rounded pill. So the ring is
+	 * drawn the other way around: the cell's own `background` is the gold
+	 * gradient, filling its full (possibly rounded) shape, and a `::before`
+	 * sits on top with the hextech fill, inset by the ring's 2px thickness —
+	 * the same `--lol-gradient-hextech` a selected `ToggleButton` fills itself
+	 * with, so a selected date reads as the same "active" surface as
+	 * everywhere else in the library. `border-radius: inherit` copies
+	 * whatever radius the cell itself ends up with, so the hextech layer's
+	 * corners always match the gold shape's. Where its inset is 0 on a given
+	 * side, it covers that side's gold completely — which is how a
+	 * RangeCalendar's row-interior cells (below) suppress the ring on their
+	 * left/right and stay open into their neighbors, so the hextech fill
+	 * (identical in every selected cell) reads as one continuous surface
+	 * running the length of the range, across as many rows as it spans.
+	 * `z-index: -1` keeps it behind the day number: an absolutely-positioned
+	 * box otherwise paints above plain in-flow text regardless of source
+	 * order, which would bury the digit under it. No inset `box-shadow` here
+	 * (unlike the selected `ToggleButton` it borrows the fill from): a
+	 * per-cell shadow is a per-cell seam, visible at every date within a
+	 * selected run instead of once around the whole shape.
+	 */
+	._calendar_dpi4c_2 ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected] {
+		position: relative;
+		background: var(--lol-gradient-gold);
+		color: var(--lol-color-blue-100);
+
+		&::before {
+			content: "";
+			position: absolute;
+			z-index: -1;
+			top: 2px;
+			bottom: 2px;
+			left: 0;
+			right: 0;
+			background: var(--lol-gradient-hextech);
+			border-radius: inherit;
+		}
+	}
+
+	/*
+	 * Single-selection Calendar: exactly one date can be selected, so it's
+	 * always drawn as a standalone rounded pill — there's no row to stay
+	 * continuous with.
+	 */
+	._calendar_dpi4c_2 ._cell_dpi4c_82[data-selected] {
+		border-radius: 9999px;
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
+
+	/*
+	 * RangeCalendar: the selection is a run of adjacent cells, and the ring
+	 * needs to read as one continuous gold outline around that whole shape
+	 * rather than a stack of separate pills. By default a selected cell is
+	 * square and open on both sides (the black layer covers left/right
+	 * completely), so the gold shows only along the top/bottom and one cell's
+	 * fill runs straight into the next. Only the actual start/end of the
+	 * range, or a cell sitting at the edge of its own week row (the range
+	 * wraps there), opens up a side and rounds that corner — capping the bar
+	 * at the true ends and at every row break. The two rules below only ever
+	 * touch their own side, so a single-day range (both start and end) still
+	 * gets both sides capped.
+	 *
+	 * A multi-month display (`visibleDuration: {months: 2+}`) adds a second
+	 * way a row can "break": when one calendar week straddles two displayed
+	 * months, each month's own grid still renders all 7 columns for that
+	 * week, padding out with the days that belong to the *other* grid. Those
+	 * padding days are dimmed (`data-outside-month`) but very much still in
+	 * the DOM and, crucially, never carry `data-selected` themselves — even
+	 * when the date they show *is* selected in its own home grid — to avoid
+	 * two different interactive elements both claiming to be the selected
+	 * Sept 1st. So `td:last-child`/`td:first-child` land on those always-
+	 * unselected padding cells, not on the last/first cell that's actually
+	 * part of the run, and the real edge (e.g. the 31st, sitting right next
+	 * to a dimmed, unselected "1") never matches either selector — left
+	 * square instead of capped. The two extra rules below cap a selected
+	 * cell whenever its neighbor plainly isn't selected, for whatever
+	 * reason: this padding, an unavailable date, or anything else that
+	 * breaks the run — which is the same condition `td:first-child`/
+	 * `td:last-child` are really standing in for at a genuine row edge.
+	 */
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected] {
+		border-radius: 0;
+	}
+
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected][data-selection-start],
+	._rangeCalendar_dpi4c_3 td:first-child > ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3
+		td:has(._cell_dpi4c_82:not([data-selected]))
+		+ td
+		> ._cell_dpi4c_82[data-selected] {
+		border-top-left-radius: 9999px;
+		border-bottom-left-radius: 9999px;
+
+		&::before {
+			left: 2px;
+		}
+	}
+
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected][data-selection-end],
+	._rangeCalendar_dpi4c_3 td:last-child > ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3
+		td:has(+ td ._cell_dpi4c_82:not([data-selected]))
+		> ._cell_dpi4c_82[data-selected] {
+		border-top-right-radius: 9999px;
+		border-bottom-right-radius: 9999px;
+
+		&::before {
+			right: 2px;
+		}
+	}
+}
+@layer lol {
+	._dateInput_qxz9d_2 {
+		background:
+			var(--lol-input-background-gradient) padding-box,
+			var(--lol-input-border-gradient) border-box;
+
+		--lol-input-border-gradient: var(--lol-gradient-gold);
+		--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		margin: 0;
+		padding: 0 0.75rem;
+		outline: none;
+
+		font-family: var(--lol-font-family-spiegel);
+
+		&[data-disabled] {
+			--lol-input-border-gradient: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+			--lol-input-background-gradient: var(--lol-gradient-grey-focus);
+		}
+
+		&._small_qxz9d_29 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_qxz9d_33 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_qxz9d_37 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._segment_qxz9d_42 {
+		padding: 0 0.125rem;
+		border-radius: 2px;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+		letter-spacing: 0.025em;
+		color: var(--lol-color-gold-100);
+		font-variant-numeric: tabular-nums;
+		outline: none;
+		caret-color: transparent;
+
+		/* Literal separators ("/", ":", ",") sit between segments; they are not
+		   editable so they shouldn't pick up hover/focus affordances. */
+		&[data-type="literal"] {
+			padding: 0 0.125rem;
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-placeholder] {
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-hovered]:not([data-type="literal"]) {
+			background-color: var(--lol-color-grey-300);
+		}
+
+		&[data-focused]:not([data-type="literal"]) {
+			background-color: var(--lol-color-gold-600);
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-readonly] {
+			color: var(--lol-color-grey-100);
+		}
+	}
+}
+@layer lol {
+	._group_xtlnv_2 {
+		display: flex;
+		align-items: stretch;
+		gap: 1px;
+		padding: 1px;
+		outline: none;
+
+		background-image: var(--lol-gradient-gold);
+
+		&[data-disabled] {
+			background-image: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			background-image: var(--lol-gradient-gold-hover);
+		}
+
+		&._small_xtlnv_19 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_xtlnv_23 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_xtlnv_27 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._input_xtlnv_32 {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		background-color: var(--lol-color-hextech-black);
+		padding: 0 0.75rem;
+		outline: none;
+		font-family: var(--lol-font-family-spiegel);
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+		}
+	}
+
+	._separator_xtlnv_47 {
+		display: flex;
+		align-items: center;
+		background-color: var(--lol-color-hextech-black);
+		color: var(--lol-color-grey-100);
+		padding: 0 0.125rem;
+		font-family: var(--lol-font-family-spiegel);
+		/*
+		 * `.group`'s `gap` is what shows its gold background between every
+		 * pair of children — including the two 1px slivers flanking this
+		 * dash, which reads as the dash sitting in its own gold-bordered box
+		 * rather than as a plain separator between the two dates. Negative
+		 * margin pulls it 1px into each neighboring gap, so its own opaque
+		 * fill covers those two slivers instead.
+		 */
+		margin: 0 -1px;
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-grey-150);
+		}
+	}
+
+	._button_xtlnv_70 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		border: 0;
+		margin: 0;
 
-	._primary_lhmqr_131:hover,
-	._secondary_lhmqr_132:hover,
-	._dimmed_lhmqr_134:hover {
-		--lol-button-border-gradient: var(--lol-gradient-gold-hover);
-	}
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 0.625rem;
 
-	._primary_lhmqr_131:active,
-	._secondary_lhmqr_132:active,
-	._dimmed_lhmqr_134:active {
-		--lol-button-border-gradient: var(--lol-gradient-gold-press);
-	}
+		color: var(--lol-color-gold-300);
+		background-color: var(--lol-color-hextech-black);
 
-	._primary_lhmqr_131:disabled,
-	._secondary_lhmqr_132:disabled,
-	._dimmed_lhmqr_134:disabled {
-		--lol-button-border-gradient: var(--lol-gradient-disabled);
+		&[data-hovered] {
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-pressed] {
+			color: var(--lol-color-gold-600);
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+			background-color: var(--lol-color-grey-300);
+		}
 	}
 
-	._primary_lhmqr_131:focus-visible,
-	._secondary_lhmqr_132:focus-visible {
-		outline-color: var(--lol-color-gold-400);
+	/*
+	 * The gold border + hextech-black fill are drawn once, on the popover
+	 * itself, and cover it edge to edge — the header and grid inside stay
+	 * transparent so it reads as one continuous surface rather than a stack
+	 * of separately-filled sections. The visible "hextech" gradient lives on
+	 * selected dates themselves (see calendar.module.css), not the popover.
+	 */
+	._popover_xtlnv_106 {
+		padding: 0.75rem;
+		border: 2px solid transparent;
+		box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
+		background:
+			var(--lol-gradient-hextech-black) padding-box,
+			var(--lol-gradient-gold) border-box;
 	}
 }
 @layer lol {
-	._checkbox_10zee_2 {
+	._checkbox_6xifu_2 {
 		font-family: var(--lol-font-family-spiegel);
 		color: var(--lol-color-grey-100);
 		display: flex;
@@ -500,13 +1220,25 @@
 		}
 	}
 
-	._icon_10zee_22 {
+	._icon_6xifu_22 {
+		/* Off the text baseline, so the box is the glyph. */
+		display: block;
+		flex-shrink: 0;
 		width: 0.875rem;
 		height: 0.875rem;
 	}
 }
 @layer lol {
-	._disclosureButton_9s3bw_2 {
+	._disclosureButton_1wmxg_2 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		background: none;
+		border: 0;
+		margin: 0;
+		font: inherit;
+		letter-spacing: inherit;
+
 		color: var(--lol-color-grey-100);
 		font-family: var(--lol-font-family-beaufort);
 
@@ -524,7 +1256,7 @@
 		text-align: left;
 	}
 
-	._icon_9s3bw_20 {
+	._icon_1wmxg_29 {
 		margin-left: 0.125rem;
 		margin-right: 0.5rem;
 		display: inline-block;
@@ -532,7 +1264,7 @@
 		font-size: var(--lol-font-size-sm);
 	}
 
-	._disclosure_9s3bw_2 {
+	._disclosure_1wmxg_2 {
 		border-bottom: 1px solid var(--lol-color-gold-600);
 
 		&:last-of-type {
@@ -540,7 +1272,7 @@
 		}
 	}
 
-	._disclosurePanel_9s3bw_36 {
+	._disclosurePanel_1wmxg_45 {
 		color: var(--lol-color-grey-100);
 		font-family: var(--lol-font-family-spiegel);
 
@@ -562,14 +1294,17 @@
 	}
 }
 @layer lol {
-	._divider_8g14c_2 {
+	._divider_wpkyb_2 {
 		height: 1px;
 		flex-grow: 1;
 		border: none;
+		/* An <hr>: the UA gives it 0.5em block margins and a grey `color`. */
+		margin: 0;
+		color: inherit;
 		display: flex;
 	}
 
-	._left_8g14c_9 {
+	._left_wpkyb_12 {
 		background-image: linear-gradient(
 			to right,
 			rgba(0, 0, 0, 0),
@@ -577,7 +1312,7 @@
 		);
 	}
 
-	._center_8g14c_17 {
+	._center_wpkyb_20 {
 		background-image: linear-gradient(
 			to right,
 			rgba(0, 0, 0, 0),
@@ -586,7 +1321,7 @@
 		);
 	}
 
-	._right_8g14c_26 {
+	._right_wpkyb_29 {
 		background-image: linear-gradient(
 			to right,
 			var(--lol-color-gold-600),
@@ -594,20 +1329,20 @@
 		);
 	}
 
-	._block_8g14c_34 {
+	._block_wpkyb_37 {
 		width: 5px;
 		height: 5px;
 		border: 1px solid var(--lol-color-gold-600);
 		rotate: 45deg;
 	}
 
-	._wrapper_8g14c_41 {
+	._wrapper_wpkyb_44 {
 		display: flex;
 		align-items: center;
 		flex-grow: 1;
 	}
 
-	._childrenWrapper_8g14c_47 {
+	._childrenWrapper_wpkyb_50 {
 		display: flex;
 		align-items: center;
 		gap: 2rem;
@@ -615,60 +1350,62 @@
 	}
 }
 @layer lol {
-	._heading_1ff83_2 {
+	._heading_4cie6_2 {
+		/* Rendered as h1-h5, which the UA gives block margins scaled to the font. */
+		margin: 0;
 		font-family: var(--lol-font-family-beaufort);
 		scroll-margin-top: 5rem;
 		text-transform: uppercase;
 	}
 
-	._h1_1ff83_8 {
+	._h1_4cie6_10 {
 		font-size: var(--lol-font-size-h1);
 		line-height: var(--lol-line-height-h1);
 		letter-spacing: var(--lol-letter-spacing-h1);
 		font-weight: var(--lol-font-weight-h1);
 	}
 
-	._h2_1ff83_15 {
+	._h2_4cie6_17 {
 		font-size: var(--lol-font-size-h2);
 		line-height: var(--lol-line-height-h2);
 		letter-spacing: var(--lol-letter-spacing-h2);
 		font-weight: var(--lol-font-weight-h2);
 	}
 
-	._h3_1ff83_22 {
+	._h3_4cie6_24 {
 		font-size: var(--lol-font-size-h3);
 		line-height: var(--lol-line-height-h3);
 		letter-spacing: var(--lol-letter-spacing-h3);
 		font-weight: var(--lol-font-weight-h3);
 	}
 
-	._h4_1ff83_29 {
+	._h4_4cie6_31 {
 		font-size: var(--lol-font-size-h4);
 		line-height: var(--lol-line-height-h4);
 		letter-spacing: var(--lol-letter-spacing-h4);
 		font-weight: var(--lol-font-weight-h4);
 	}
 
-	._h5_1ff83_36 {
+	._h5_4cie6_38 {
 		font-size: var(--lol-font-size-h5);
 		line-height: var(--lol-line-height-h5);
 		letter-spacing: var(--lol-letter-spacing-h5);
 		font-weight: var(--lol-font-weight-h5);
 	}
 
-	._grey100_1ff83_43 {
+	._grey100_4cie6_45 {
 		color: var(--lol-color-grey-100);
 	}
 
-	._gold100_1ff83_47 {
+	._gold100_4cie6_49 {
 		color: var(--lol-color-gold-100);
 	}
 
-	._gold200_1ff83_51 {
+	._gold200_4cie6_53 {
 		color: var(--lol-color-gold-200);
 	}
 
-	._gold400_1ff83_55 {
+	._gold400_4cie6_57 {
 		color: var(--lol-color-gold-400);
 	}
 }
@@ -757,7 +1494,7 @@
 	}
 }
 @layer lol {
-	._overlay_1kg5a_2 {
+	._overlay_cjo05_2 {
 		background-color: color-mix(
 			in srgb,
 			var(--lol-color-hextech-black),
@@ -780,7 +1517,7 @@
 		backdrop-filter: blur(8px);
 	}
 
-	._dialog_1kg5a_25 {
+	._dialog_cjo05_25 {
 		background:
 			var(--lol-button-background-gradient) padding-box,
 			var(--lol-button-border-gradient) border-box;
@@ -822,12 +1559,14 @@
 		}
 	}
 
-	._modal_1kg5a_67 {
+	._modal_cjo05_67 {
 		width: 100%;
 		max-width: 28rem;
 	}
 
-	._dialogHeading_1kg5a_72 {
+	._dialogHeading_cjo05_72 {
+		/* React aria renders an <h3>, which the UA gives block margins. */
+		margin: 0;
 		color: var(--lol-color-gold-100);
 		font-family: var(--lol-font-family-beaufort);
 		text-transform: uppercase;
@@ -837,7 +1576,7 @@
 		line-height: var(--lol-line-height-h5);
 	}
 
-	._dialogButtons_1kg5a_82 {
+	._dialogButtons_cjo05_84 {
 		justify-content: center;
 		transform: translateY(2px);
 		padding: 0 0.25rem;
@@ -847,18 +1586,18 @@
 	}
 }
 @layer lol {
-	._group_7wszc_2 {
+	._group_1haju_2 {
 		display: grid;
 		grid-template-columns: auto 1fr auto;
 		gap: 1px;
 		padding: 1px;
 		outline: none;
 
-		&._normal_7wszc_9 {
+		&._normal_1haju_9 {
 			background-image: var(--lol-gradient-gold);
 		}
 
-		&._dimmed_7wszc_13 {
+		&._dimmed_1haju_13 {
 			background-image: var(--lol-gradient-grey-300);
 		}
 
@@ -870,20 +1609,23 @@
 			background-image: var(--lol-gradient-gold-hover);
 		}
 
-		&._small_7wszc_25 {
+		&._small_1haju_25 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_7wszc_29 {
+		&._medium_1haju_29 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_7wszc_33 {
+		&._large_1haju_33 {
 			min-height: var(--lol-form-height-large);
 		}
 	}
 
-	._input_7wszc_38 {
+	._input_1haju_38 {
+		/* The group draws the border as its own 1px gradient padding. */
+		border: 0;
+		margin: 0;
 		background-color: var(--lol-color-hextech-black);
 		color: var(--lol-color-gold-100);
 		font-family: var(--lol-font-family-spiegel);
@@ -898,12 +1640,20 @@
 			color: var(--lol-color-grey-100);
 		}
 
-		&._focus_7wszc_53 {
+		&._focus_1haju_56 {
 			background-image: var(--lol-gradient-grey-focus);
 		}
 	}
 
-	._button_7wszc_58 {
+	._button_1haju_61 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		border: 0;
+		margin: 0;
+		font: inherit;
+		letter-spacing: inherit;
+
 		color: var(--lol-color-gold-100);
 		background-color: var(--lol-color-hextech-black);
 		padding: 0 0.625rem;
@@ -915,7 +1665,7 @@
 	}
 }
 @layer lol {
-	._popover_6y5ml_2 {
+	._popover_18zyh_2 {
 		padding: 2px;
 		box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
 		border: 2px solid transparent;
@@ -925,49 +1675,61 @@
 		--lol-button-border-gradient: var(--lol-gradient-gold-press);
 		--lol-button-background-gradient: var(--lol-gradient-grey-300);
 
-		&._top_6y5ml_12 {
+		&._top_18zyh_12 {
 			margin-bottom: 0.5rem;
 		}
 
-		&._bottom_6y5ml_16 {
+		&._bottom_18zyh_16 {
 			margin-top: 0.5rem;
 		}
 
-		&._left_6y5ml_20 {
+		&._left_18zyh_20 {
 			margin-right: 0.5rem;
 		}
 
-		&._right_6y5ml_24 {
+		&._right_18zyh_24 {
 			margin-left: 0.5rem;
 		}
 	}
 
-	._arrow_6y5ml_29 {
-		._outer_6y5ml_30 {
+	._body_18zyh_29 {
+		padding: 1rem;
+	}
+
+	._arrow_18zyh_33 {
+		/*
+		 * React aria anchors the arrow's wrapper with `bottom: 100%`, so the
+		 * wrapper's box has to *be* the glyph. Left inline the svg sits on a text
+		 * baseline: the wrapper grows to a line-height and the arrow floats off the
+		 * popover by the difference.
+		 */
+		display: block;
+
+		._outer_18zyh_42 {
 			fill: var(--lol-color-gold-600);
 		}
 
-		._inner_6y5ml_34 {
+		._inner_18zyh_46 {
 			fill: var(--lol-color-grey-300);
 		}
 
-		&._top_6y5ml_12 {
+		&._top_18zyh_12 {
 			transform: translateX(-1.5px);
 		}
 
-		&._bottom_6y5ml_16 {
+		&._bottom_18zyh_16 {
 			transform: translateX(-1.5px) rotate(180deg);
 
-			._outer_6y5ml_30 {
+			._outer_18zyh_42 {
 				fill: var(--lol-color-gold-500);
 			}
 		}
 
-		&._left_6y5ml_20 {
+		&._left_18zyh_20 {
 			transform: translateY(-2px) translateX(-5px) rotate(-90deg);
 		}
 
-		&._right_6y5ml_24 {
+		&._right_18zyh_24 {
 			transform: translateY(-2px) translateX(5px) rotate(90deg);
 		}
 	}
@@ -1068,7 +1830,7 @@
 	}
 }
 @layer lol {
-	._searchField_7htjg_2 {
+	._searchField_tm8b9_2 {
 		display: grid;
 		grid-template-areas:
 			"label label"
@@ -1080,7 +1842,7 @@
 		color: var(--lol-color-gold-100);
 	}
 
-	._input_7htjg_14 {
+	._input_tm8b9_14 {
 		background:
 			url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC") no-repeat 5px center,
 			var(--lol-search-field-background-gradient) padding-box,
@@ -1117,20 +1879,30 @@
 			--lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
 		}
 
-		&._small_7htjg_51 {
+		&._small_tm8b9_51 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_7htjg_55 {
+		&._medium_tm8b9_55 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_7htjg_59 {
+		&._large_tm8b9_59 {
 			min-height: var(--lol-form-height-large);
 		}
 	}
 
-	._button_7htjg_64 {
+	._button_tm8b9_64 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		background: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+
 		grid-area: button;
 
 		font-size: 0.75rem;
@@ -1158,280 +1930,116 @@
 		}
 	}
 }
-/* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
-._tag_qypr1_2 {
-	background:
-		var(--lol-multiple-select-background-gradient) padding-box,
-		var(--lol-multiple-select-border-gradient) border-box;
-
-	border: 2px solid transparent;
-	border-radius: 9999px;
-
-	align-items: center;
-	display: grid;
-	grid-template-columns: 1fr auto;
-
-	font-family: var(--lol-font-family-spiegel);
-	letter-spacing: var(--lol-letter-spacing-sm);
-	font-weight: var(--lol-font-weight-sm);
-	font-size: 0.75rem;
-	line-height: 1;
-	color: var(--lol-color-gold-300);
-	padding: 0 0.3rem 0 0.5rem;
-}
-
-._gold_qypr1_23 {
-	border-width: 1px;
-	--lol-multiple-select-border-gradient: var(--lol-gradient-gold);
-	--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
-	color: var(--lol-color-gold-300);
-}
-
-._hextech_qypr1_30 {
-	border-width: 1px;
-	--lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
-	--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
-	color: var(--lol-color-blue-100);
-}
-
-._grey_qypr1_37 {
-	border-width: 1px;
-	--lol-multiple-select-border-gradient: var(--lol-color-grey-100);
-	--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
-	color: var(--lol-color-gold-100);
-}
-
-._text_qypr1_44 {
-	padding: 0.25rem 0;
-}
-
-._remove_qypr1_48 {
-	mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACKklEQVR42uzcvUoDQRQF4M0QBW0srHwICxttIygGRH0PsRAfwELsI/gkghYiiGATQVDwIawsUmihRbzjDyyLm2Qnc+eejefC6Taw+zGz88NkG/1+P2OVlyMBgQhEIAIRiEAEIhCLQAQiEIHQqhn6w97zU60edG5hEaoFNdjFymtecitpJXyOFckuVBcbgHMlWZJcSDYlNwlwLn0vkkxLTlBbUB7H1+wPUisRjq+OZB8RqIiTJUAq4mQaSE4RRxOpDCc6UgygswE4GkjDcPJIewhAh5K3Ea6LgTQqztdUTXKPAHQt2UqAVBWnLemivKS1kUxwYg/zWkhmOBoz6dhIpjhaS41YSOY4movVcZEgcDSBxkGCwdEGCkWCwUkBFIIEg5MKqCoSDE5KoFhISXFSA42LlBzHAigUyQTHCsjXq+SjwvVTkhmLG7UAqjLPyY9u55LVSQcKwTFFcjXBMUNyNcIxQXJgOL0KM+4kSA4Mp11xWaKO5MBwugFrN1UkB4YTusBVQ3KAOFBIDhQHBskB40AgOXAccyRXAxxTpBhAy1m6bdKqSMcIQKeSg4T7OaMiPUq2Ud5BnQFIGptdw5AeJGuSF6RR7C8kj7OR6ewEliF5nPUYOBrzoDzSL86d4nKmiBQVx1dT4aY90nv2fXhJE6eIdCTZiYnjqxH6v3nAk/b+8Hrpw6CdtLcolS8kNPjlhf/TgghEIAIRiEAEYhGIQAQiEIEINCH1KcAAQX7SgLqjwvQAAAAASUVORK5CYII=);
-	height: 1rem;
-	aspect-ratio: 1;
-	background-color: currentColor;
-	mask-size: contain;
-
-	&[data-hovered] {
-		background-color: var(--lol-color-gold-100);
-	}
-
-	&[data-pressed] {
-		background-color: var(--lol-color-grey-150);
-	}
-}
-
-._tagGroup_qypr1_64 {
-	padding: 0.25rem;
-	display: flex;
-	justify-content: center;
-}
-
-._tagList_qypr1_70 {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.25rem;
-	row-gap: 0.25rem;
-}
-._popover_jlt01_1 {
-	width: 250px;
-	display: flex;
-	flex-direction: column;
-}
-
-._select_jlt01_7 {
-	border-right: none;
-	display: flex;
-	align-items: center;
-}
-
-._triggerContainer_jlt01_13 {
-	display: inline-flex;
-}
 @layer lol {
-	._text_1tvjr_2 {
-		font-family: var(--lol-font-family-spiegel);
-	}
-
-	._label_1tvjr_6 {
-		font-size: var(--lol-font-size-label);
-		line-height: var(--lol-line-height-label);
-		letter-spacing: var(--lol-letter-spacing-label);
-		font-weight: var(--lol-font-weight-label);
-	}
+	/* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
+	._tag_1db70_3 {
+		background:
+			var(--lol-multiple-select-background-gradient) padding-box,
+			var(--lol-multiple-select-border-gradient) border-box;
 
-	._stat_1tvjr_13 {
-		font-size: var(--lol-font-size-stat);
-		line-height: var(--lol-line-height-stat);
-		letter-spacing: var(--lol-letter-spacing-stat);
-		font-weight: var(--lol-font-weight-stat);
-	}
+		border: 2px solid transparent;
+		border-radius: 9999px;
 
-	._largeNumber_1tvjr_20 {
-		font-size: var(--lol-font-size-large-number);
-		line-height: var(--lol-line-height-large-number);
-		letter-spacing: var(--lol-letter-spacing-large-number);
-		font-weight: var(--lol-font-weight-large-number);
-	}
+		align-items: center;
+		display: grid;
+		grid-template-columns: 1fr auto;
 
-	._sm_1tvjr_27 {
-		font-size: var(--lol-font-size-sm);
-		line-height: var(--lol-line-height-sm);
+		font-family: var(--lol-font-family-spiegel);
 		letter-spacing: var(--lol-letter-spacing-sm);
 		font-weight: var(--lol-font-weight-sm);
+		font-size: 0.75rem;
+		line-height: 1;
+		color: var(--lol-color-gold-300);
+		padding: 0 0.3rem 0 0.5rem;
 	}
 
-	._base_1tvjr_34 {
-		font-size: var(--lol-font-size-base);
-		line-height: var(--lol-line-height-base);
-		letter-spacing: var(--lol-letter-spacing-base);
-		font-weight: var(--lol-font-weight-base);
-	}
-
-	._md_1tvjr_41 {
-		font-size: var(--lol-font-size-md);
-		line-height: var(--lol-line-height-md);
-		letter-spacing: var(--lol-letter-spacing-md);
-		font-weight: var(--lol-font-weight-md);
-	}
-
-	._lg_1tvjr_48 {
-		font-size: var(--lol-font-size-lg);
-		line-height: var(--lol-line-height-lg);
-		letter-spacing: var(--lol-letter-spacing-lg);
-		font-weight: var(--lol-font-weight-lg);
-	}
-
-	._grey100_1tvjr_55 {
-		color: var(--lol-color-grey-100);
+	._gold_1db70_24 {
+		border-width: 1px;
+		--lol-multiple-select-border-gradient: var(--lol-gradient-gold);
+		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
+		color: var(--lol-color-gold-300);
 	}
 
-	._grey150_1tvjr_59 {
-		color: var(--lol-color-grey-150);
+	._hextech_1db70_31 {
+		border-width: 1px;
+		--lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
+		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
+		color: var(--lol-color-blue-100);
 	}
 
-	._gold100_1tvjr_63 {
+	._grey_1db70_38 {
+		border-width: 1px;
+		--lol-multiple-select-border-gradient: var(--lol-color-grey-100);
+		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
 		color: var(--lol-color-gold-100);
 	}
-}
-@layer lol {
-	._button_zllmp_2 {
-		font-family: var(--lol-font-family-spiegel);
-		display: inline-block;
-		min-width: 200px;
-		outline: none;
-
-		border: 1px solid transparent;
-
-		color: var(--lol-color-grey-100);
-		padding: 0 1.5rem 0 0.5rem;
 
-		font-size: 0.75rem;
-		font-weight: 500;
-		line-height: 1rem;
-		letter-spacing: 0.025em;
-		text-align: left;
-
-		--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=");
-		--lol-select-border-gradient: var(--lol-gradient-gold);
-		--lol-select-background-gradient: var(--lol-gradient-hextech-black);
+	._text_1db70_45 {
+		padding: 0.25rem 0;
+	}
 
-		&[data-open] {
-			--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==");
-			color: var(--lol-color-gold-600);
-			--lol-select-background-gradient: var(--lol-gradient-grey-300);
-			--lol-select-border-gradient: var(--lol-gradient-gold-press);
-		}
+	._remove_1db70_49 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. The mask is
+		   filled with `currentColor`, so the inherited colour matters too. */
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		color: inherit;
 
-		&[data-pressed] {
-			--lol-select-border-gradient: var(--lol-gradient-gold-press);
-		}
+		mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACKklEQVR42uzcvUoDQRQF4M0QBW0srHwICxttIygGRH0PsRAfwELsI/gkghYiiGATQVDwIawsUmihRbzjDyyLm2Qnc+eejefC6Taw+zGz88NkG/1+P2OVlyMBgQhEIAIRiEAEIhCLQAQiEIHQqhn6w97zU60edG5hEaoFNdjFymtecitpJXyOFckuVBcbgHMlWZJcSDYlNwlwLn0vkkxLTlBbUB7H1+wPUisRjq+OZB8RqIiTJUAq4mQaSE4RRxOpDCc6UgygswE4GkjDcPJIewhAh5K3Ea6LgTQqztdUTXKPAHQt2UqAVBWnLemivKS1kUxwYg/zWkhmOBoz6dhIpjhaS41YSOY4movVcZEgcDSBxkGCwdEGCkWCwUkBFIIEg5MKqCoSDE5KoFhISXFSA42LlBzHAigUyQTHCsjXq+SjwvVTkhmLG7UAqjLPyY9u55LVSQcKwTFFcjXBMUNyNcIxQXJgOL0KM+4kSA4Mp11xWaKO5MBwugFrN1UkB4YTusBVQ3KAOFBIDhQHBskB40AgOXAccyRXAxxTpBhAy1m6bdKqSMcIQKeSg4T7OaMiPUq2Ud5BnQFIGptdw5AeJGuSF6RR7C8kj7OR6ewEliF5nPUYOBrzoDzSL86d4nKmiBQVx1dT4aY90nv2fXhJE6eIdCTZiYnjqxH6v3nAk/b+8Hrpw6CdtLcolS8kNPjlhf/TgghEIAIRiEAEYhGIQAQiEIEINCH1KcAAQX7SgLqjwvQAAAAASUVORK5CYII=);
+		height: 1rem;
+		aspect-ratio: 1;
+		background-color: currentColor;
+		mask-size: contain;
 
 		&[data-hovered] {
-			--lol-select-border-gradient: var(--lol-gradient-gold-hover);
-		}
-
-		&[data-disabled] {
-			--lol-select-border-gradient: var(--lol-gradient-disabled);
-			/* make the image gray */
-			filter: grayscale(100%);
-		}
-
-		&._small_zllmp_44 {
-			min-height: var(--lol-form-height-small);
-		}
-
-		&._medium_zllmp_48 {
-			min-height: var(--lol-form-height-medium);
+			background-color: var(--lol-color-gold-100);
 		}
 
-		&._large_zllmp_52 {
-			min-height: var(--lol-form-height-large);
+		&[data-pressed] {
+			background-color: var(--lol-color-grey-150);
 		}
 	}
 
-	._singleSelect_zllmp_57 {
-		background:
-			var(--lol-select-image) no-repeat right 0.5rem center,
-			var(--lol-select-background-gradient) padding-box,
-			var(--lol-select-border-gradient) border-box;
+	._tagGroup_1db70_76 {
+		padding: 0.25rem;
+		display: flex;
+		justify-content: flex-start;
 	}
 
-	._multiSelect_zllmp_64 {
-		background:
-			var(--lol-select-background-gradient) padding-box,
-			var(--lol-select-border-gradient) border-box;
+	._tagList_1db70_82 {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		row-gap: 0.25rem;
 	}
-
-	._listBox_zllmp_70 {
-		background-color: var(--lol-color-hextech-black);
-		border: 1px solid var(--lol-color-gold-600);
-		outline: none;
-		overflow-y: auto;
+}
+@layer lol {
+	._popover_1gisa_2 {
+		width: 250px;
+		display: flex;
+		flex-direction: column;
 	}
 
-	._item_zllmp_77 {
-		border-bottom: 1px solid var(--lol-color-grey-300);
-		color: var(--lol-color-gold-300);
-		font-size: var(--lol-font-size-sm);
-		font-weight: var(--lol-font-weight-sm);
-		line-height: var(--lol-line-height-sm);
-		letter-spacing: var(--lol-letter-spacing-sm);
-		padding: 0.375rem 0.5rem;
-		outline: none;
-		cursor: pointer;
-
-		&[data-hovered] {
-			background-color: var(--lol-color-grey-300);
-			color: var(--lol-color-gold-100);
-		}
-
-		&[data-pressed],
-		&._focus_zllmp_94 {
-			background-color: color-mix(
-				in srgb,
-				var(--lol-color-grey-300),
-				transparent 50%
-			);
-			color: var(--lol-color-gold-600);
-		}
-
-		&._selected_zllmp_103 {
-			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
-			background-position: right 0.5rem center;
-			background-repeat: no-repeat;
-		}
+	._triggerContainer_1gisa_8 {
+		display: inline-flex;
 	}
 
-	._popover_zllmp_110 {
-		width: var(--trigger-width);
+	/* Descendant selector, not just `.select`: needs higher specificity than
+	   `.button`'s `display: inline-block` (select.module.css), since equal-
+	   specificity rules would otherwise resolve by CSS source order — which
+	   depends on unrelated bundling details, not intent. Losing that race
+	   blockifies to `display: block` (this is a flex item) and silently
+	   drops `align-items`, so tags/empty text stick to the top instead of
+	   centering. */
+	._triggerContainer_1gisa_8 ._select_1gisa_12 {
+		border-right: none;
 		display: flex;
-		flex-direction: column;
-	}
-
-	._emptyList_zllmp_116 {
-		padding: 0.5rem 0.25rem;
-		text-align: center;
+		align-items: center;
 	}
 }
 @layer lol {
@@ -1514,13 +2122,16 @@
 	}
 }
 @layer lol {
-	._spinner_9di76_2 {
+	._spinner_15he7_2 {
+		/* Off the text baseline, so the box is the glyph. */
+		display: block;
+		max-width: 100%;
 		aspect-ratio: 1 / 1;
 		width: 3rem;
-		animation: _spin_9di76_2 1s linear infinite;
+		animation: _spin_15he7_2 1s linear infinite;
 	}
 
-	@keyframes _spin_9di76_2 {
+	@keyframes _spin_15he7_2 {
 		from {
 			transform: rotate(0deg);
 		}
@@ -1531,7 +2142,7 @@
 	}
 }
 @layer lol {
-	._toast_15hp0_2 {
+	._toast_1a46s_2 {
 		padding: 1rem;
 		border: 2px solid transparent;
 		background:
@@ -1545,23 +2156,23 @@
 		gap: 6px;
 	}
 
-	._default_15hp0_16 {
+	._default_1a46s_16 {
 		--lol-toast-background-gradient: var(--lol-gradient-hextech-black);
 		--lol-toast-border-gradient: var(--lol-gradient-grey-300);
 		--lol-toast-icon-color: var(--lol-color-gold-300);
 	}
 
-	._title_15hp0_22 {
+	._title_1a46s_22 {
 		font-size: var(--lol-font-size-sm);
 	}
 
-	._content_15hp0_26 {
+	._content_1a46s_26 {
 		display: flex;
 		align-items: flex-start;
 		gap: 0.75rem;
 	}
 
-	._icon_15hp0_32 {
+	._icon_1a46s_32 {
 		display: flex;
 		height: 20px;
 		width: 20px;
@@ -1574,25 +2185,30 @@
 		& > * {
 			flex-shrink: 0;
 		}
+		/* Off the text baseline, so the box is the glyph. */
+		& > img {
+			display: block;
+			max-width: 100%;
+		}
 		& svg {
 			margin-left: var(--toast-svg-margin-start);
 			margin-right: var(--toast-svg-margin-end);
 		}
 	}
 
-	._content_15hp0_26 {
+	._content_1a46s_26 {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
 	}
 
-	._actions_15hp0_57 {
+	._actions_1a46s_62 {
 		display: flex;
 		justify-content: flex-end;
 		margin-top: 0.25rem;
 	}
 
-	._button_15hp0_63 {
+	._button_1a46s_68 {
 		padding-left: 8px;
 		padding-right: 8px;
 		margin-left: var(--toast-button-margin-start);
@@ -1600,7 +2216,7 @@
 		flex-shrink: 0;
 	}
 
-	._closeButton_15hp0_71 {
+	._closeButton_1a46s_76 {
 		position: absolute;
 		min-height: 1.33rem !important;
 		left: var(--toast-close-button-start);
@@ -1616,7 +2232,7 @@
 		z-index: 1;
 	}
 
-	._loader_15hp0_87 {
+	._loader_1a46s_92 {
 		width: 20px;
 		height: 20px;
 	}
@@ -1702,12 +2318,12 @@
 	}
 }
 @layer lol {
-	._resizableContainer_1vns6_2 {
+	._resizableContainer_1iv6r_2 {
 		overflow: auto;
 		position: relative;
 	}
 
-	._table_1vns6_7 {
+	._table_1iv6r_7 {
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
@@ -1725,7 +2341,7 @@
 		}
 	}
 
-	._row_1vns6_25 {
+	._row_1iv6r_25 {
 		color: var(--lol-color-grey-100);
 		outline: none;
 		transition: color 0.3s ease;
@@ -1784,7 +2400,14 @@
 		}
 	}
 
-	._cell_1vns6_84 {
+	._cell_1iv6r_84 {
+		/*
+		 * Collapsed borders are resolved between neighbours, and Chrome paints the
+		 * winning hairline once per edge when the losing side is styled `none`. The
+		 * header's 25%-opacity line then blends twice and comes out twice as
+		 * bright; a zero-width `solid` border on the cell below keeps it single.
+		 */
+		border: 0 solid;
 		padding: 0.375rem 0.75rem;
 		vertical-align: middle;
 		outline: none;
@@ -1795,7 +2418,7 @@
 		}
 	}
 
-	._resizer_1vns6_95 {
+	._resizer_1iv6r_102 {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: 0;
@@ -1827,7 +2450,7 @@
 	}
 
 	/* Fixed footprint so toggling the sort direction never shifts the header. */
-	._sortIndicator_1vns6_127 {
+	._sortIndicator_1iv6r_134 {
 		display: inline-block;
 		vertical-align: middle;
 		width: 0.5rem;
@@ -1851,7 +2474,7 @@
 		}
 	}
 
-	._column_1vns6_151 {
+	._column_1iv6r_158 {
 		position: relative;
 		font-family: var(--lol-font-family-beaufort);
 		color: var(--lol-color-gold-100);
@@ -1887,15 +2510,15 @@
 			color: var(--lol-color-gold-500);
 		}
 
-		&[data-hovered] ._sortIndicator_1vns6_127 {
+		&[data-hovered] ._sortIndicator_1iv6r_134 {
 			opacity: 0.5;
 		}
 
-		&[data-sort-direction] ._sortIndicator_1vns6_127 {
+		&[data-sort-direction] ._sortIndicator_1iv6r_134 {
 			opacity: 1;
 		}
 
-		&[data-sort-direction="descending"] ._sortIndicator_1vns6_127::after {
+		&[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
 			border-width: 0.375rem 0.25rem 0;
 			border-top-color: currentColor;
 			border-bottom-color: transparent;
@@ -1907,28 +2530,34 @@
 		}
 	}
 
-	._footer_1vns6_207 {
+	._footer_1iv6r_214 {
 		color: var(--lol-color-gold-300);
 
-		& ._cell_1vns6_84 {
+		& ._cell_1iv6r_84 {
 			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
 		}
 	}
 
-	._empty_1vns6_215 {
+	._empty_1iv6r_222 {
 		padding: 1rem 0.75rem;
 		text-align: center;
 	}
 
-	._start_1vns6_220 {
+	/* React aria renders the empty state in a row it builds itself, so that cell
+	   never gets `.cell` and keeps the UA's 1px padding. */
+	._table_1iv6r_7 [data-empty] > tr > td {
+		padding: 0;
+	}
+
+	._start_1iv6r_233 {
 		text-align: start;
 	}
 
-	._center_1vns6_224 {
+	._center_1iv6r_237 {
 		text-align: center;
 	}
 
-	._end_1vns6_228 {
+	._end_1iv6r_241 {
 		text-align: end;
 	}
 }
@@ -1996,7 +2625,7 @@
 	}
 }
 @layer lol {
-	._textField_cjv2r_2 {
+	._textField_1dbgw_2 {
 		background:
 			var(--lol-input-background-gradient) padding-box,
 			var(--lol-input-border-gradient) border-box;
@@ -2032,26 +2661,29 @@
 			--lol-input-background-gradient: var(--lol-gradient-grey-focus);
 		}
 
-		&._small_cjv2r_38 {
+		&._small_1dbgw_38 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_cjv2r_42 {
+		&._medium_1dbgw_42 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_cjv2r_46 {
+		&._large_1dbgw_46 {
 			min-height: var(--lol-form-height-large);
 		}
 
-		&._textArea_cjv2r_50 {
+		&._textArea_1dbgw_50 {
 			padding-top: 0.5rem;
 			padding-bottom: 0.5rem;
+			/* The UA lets a textarea be resized in both axes, which breaks the
+			   field's layout; only the height is safe to drag. */
+			resize: vertical;
 		}
 	}
 }
 @layer lol {
-	._toolbar_pv0cj_2 {
+	._toolbar_1j7x4_2 {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
@@ -2066,9 +2698,12 @@
 		}
 	}
 
-	._separator_pv0cj_17 {
+	._separator_1j7x4_17 {
 		border: none;
+		/* An <hr> when horizontal: the UA gives it block margins and a grey
+		   `color`. */
 		margin: 0;
+		color: inherit;
 		flex: none;
 		align-self: stretch;
 		height: 1px;
@@ -2093,7 +2728,7 @@
 	}
 }
 @layer lol {
-	._tree_1jyu5_2 {
+	._tree_17ans_2 {
 		--lol-tree-indent: 1.125rem;
 
 		box-sizing: border-box;
@@ -2112,7 +2747,7 @@
 		}
 	}
 
-	._item_1jyu5_21 {
+	._item_17ans_21 {
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
@@ -2195,16 +2830,24 @@
 
 	/* Top-level items are separated by the client's faint gold hairline. The
 	   sibling combinator keeps it off the first row, whichever level follows. */
-	._item_1jyu5_21 + ._item_1jyu5_21[data-level="1"] {
+	._item_17ans_21 + ._item_17ans_21[data-level="1"] {
 		border-top: 1px solid var(--lol-color-gold-600);
 	}
 
-	._chevron_1jyu5_108 {
+	._chevron_17ans_108 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+
 		flex: none;
 		width: 0.5rem;
 		height: 0.75rem;
-		padding: 0;
-		border: none;
 		outline: none;
 		cursor: pointer;
 
@@ -2222,27 +2865,27 @@
 		}
 	}
 
-	._chevronSpacer_1jyu5_131 {
+	._chevronSpacer_17ans_139 {
 		flex: none;
 		width: 0.5rem;
 	}
 
-	._item_1jyu5_21[data-expanded] ._chevron_1jyu5_108 {
+	._item_17ans_21[data-expanded] ._chevron_17ans_108 {
 		rotate: 90deg;
 	}
 
-	._item_1jyu5_21[data-hovered] ._chevron_1jyu5_108,
-	._chevron_1jyu5_108[data-hovered],
-	._chevron_1jyu5_108[data-focus-visible] {
+	._item_17ans_21[data-hovered] ._chevron_17ans_108,
+	._chevron_17ans_108[data-hovered],
+	._chevron_17ans_108[data-focus-visible] {
 		--lol-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
 	}
 
-	._item_1jyu5_21[data-disabled] ._chevron_1jyu5_108 {
+	._item_17ans_21[data-disabled] ._chevron_17ans_108 {
 		cursor: default;
 		filter: grayscale(100%);
 	}
 
-	._label_1jyu5_151 {
+	._label_17ans_159 {
 		flex: 1;
 		min-width: 0;
 		overflow: hidden;
@@ -2250,18 +2893,18 @@
 		text-overflow: ellipsis;
 	}
 
-	._empty_1jyu5_159 {
+	._empty_17ans_167 {
 		padding: 1rem 0.75rem;
 		text-align: center;
 	}
 
-	._loadMore_1jyu5_164 {
+	._loadMore_17ans_172 {
 		display: flex;
 		justify-content: center;
 		padding: 0.5rem;
 	}
 
-	._spinner_1jyu5_170 {
+	._spinner_17ans_178 {
 		width: 1.5rem;
 	}
 }