@lolmath/ui 9.4.0 → 9.6.0

package/dist/index.css

@@ -1,185 +1,3 @@
-@layer lol {
-	/* ----- CSS reset ----- */
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	/* ----- Default CSS variables ----- */
-
-	:root {
-		color-scheme: dark;
-
-		--lol-z-index-app: 100;
-		--lol-z-index-modal: 200;
-		--lol-z-index-popover: 300;
-		--lol-z-index-overlay: 400;
-		--lol-z-index-max: 9999;
-
-		--lol-scale: 1;
-
-		--lol-color-blue-100: #cdfafa;
-		--lol-color-blue-200: #0ac8b9;
-		--lol-color-blue-300: #0397ab;
-		--lol-color-blue-400: #005a82;
-		--lol-color-blue-500: #0a323c;
-		--lol-color-blue-600: #091428;
-		--lol-color-blue-700: #0a1428;
-
-		--lol-color-grey-100: #a09b8c;
-		--lol-color-grey-150: #5b5a56;
-		--lol-color-grey-200: #3c3c41;
-		--lol-color-grey-300: #1e2328;
-		--lol-color-grey-cool: #1e282d;
-
-		--lol-color-hextech-black: #010a13;
-
-		--lol-color-gold-100: #f0e6d2;
-		--lol-color-gold-200: #c8aa6e;
-		--lol-color-gold-300: #cdbe91;
-		--lol-color-gold-400: #c89b3c;
-		--lol-color-gold-500: #785a28;
-		--lol-color-gold-600: #463714;
-		--lol-color-gold-700: #32281e;
-
-		--lol-font-size-h1: 3.3333rem;
-		--lol-line-height-h1: 3.5rem;
-		--lol-letter-spacing-h1: 0.05em;
-		--lol-font-weight-h1: 700;
-
-		--lol-font-size-h2: 2.3333rem;
-		--lol-line-height-h2: 2.6667rem;
-		--lol-letter-spacing-h2: 0.05em;
-		--lol-font-weight-h2: 700;
-
-		--lol-font-size-h3: 1.9167rem;
-		--lol-line-height-h3: 2.3333rem;
-		--lol-letter-spacing-h3: 0.05em;
-		--lol-font-weight-h3: 700;
-
-		--lol-font-size-h4: 1.5rem;
-		--lol-line-height-h4: 1.8333rem;
-		--lol-letter-spacing-h4: 0.05em;
-		--lol-font-weight-h4: 700;
-
-		--lol-font-size-h5: 1.1667rem;
-		--lol-line-height-h5: 1.5rem;
-		--lol-letter-spacing-h5: 0.075em;
-		--lol-font-weight-h5: 700;
-
-		--lol-font-size-label: 0.9167rem;
-		--lol-line-height-label: 1.3333rem;
-		--lol-letter-spacing-label: 0.05em;
-		--lol-font-weight-label: 700;
-
-		--lol-font-size-stat: 1.1667rem;
-		--lol-line-height-stat: 1.6667rem;
-		--lol-letter-spacing-stat: 0.05em;
-		--lol-font-weight-stat: 700;
-
-		--lol-font-size-large-number: 4.75rem;
-		--lol-line-height-large-number: 5.1667rem;
-		--lol-letter-spacing-large-number: 0.025em;
-		--lol-font-weight-large-number: 500;
-
-		--lol-font-size-xs: 0.75rem;
-		--lol-line-height-xs: 1rem;
-		--lol-letter-spacing-xs: 0.025em;
-		--lol-font-weight-xs: 400;
-
-		--lol-font-size-sm: 0.875rem;
-		--lol-line-height-sm: 1.1025rem;
-		--lol-letter-spacing-sm: 0.02em;
-		--lol-font-weight-sm: 400;
-
-		--lol-font-size-base: 1rem;
-		--lol-line-height-base: 1.24rem;
-		--lol-letter-spacing-base: 0.01em;
-		--lol-font-weight-base: 400;
-
-		--lol-font-size-md: 1.1667rem;
-		--lol-line-height-md: 1.6667rem;
-		--lol-letter-spacing-md: 0.025em;
-		--lol-font-weight-md: 400;
-
-		--lol-font-size-lg: 1.5rem;
-		--lol-line-height-lg: 1.875rem;
-		--lol-letter-spacing-lg: 0.025em;
-		--lol-font-weight-lg: 400;
-
-		--lol-font-family-beaufort: "beaufort";
-		--lol-font-family-spiegel: "spiegel";
-
-		--lol-gradient-gold: linear-gradient(
-			to top,
-			var(--lol-color-gold-500),
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200)
-		);
-		--lol-gradient-gold-hover: linear-gradient(
-			to top,
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200),
-			var(--lol-color-gold-100)
-		);
-		--lol-gradient-gold-press: linear-gradient(
-			to top,
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-500)
-		);
-
-		--lol-gradient-grey-300: linear-gradient(
-			to top,
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-grey-focus: linear-gradient(
-			to top,
-			var(--lol-color-grey-200),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-hextech-black: linear-gradient(
-			to top,
-			var(--lol-color-hextech-black),
-			var(--lol-color-hextech-black)
-		);
-		--lol-gradient-disabled: linear-gradient(
-			to top,
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150)
-		);
-		--lol-gradient-transparent: linear-gradient(
-			to top,
-			transparent,
-			transparent
-		);
-
-		--lol-gradient-hextech: linear-gradient(
-			to top,
-			var(--lol-color-blue-200),
-			var(--lol-color-blue-400)
-		);
-		--lol-gradient-hextech-hover: linear-gradient(
-			to top,
-			var(--lol-color-blue-100),
-			var(--lol-color-blue-300)
-		);
-		--lol-gradient-hextech-press: linear-gradient(
-			to top,
-			var(--lol-color-blue-500),
-			var(--lol-color-blue-400)
-		);
-
-		--lol-form-height-small: 2rem;
-		--lol-form-height-medium: 2.25rem;
-		--lol-form-height-large: 2.5rem;
-	}
-}
 @layer lol {
 	._breadcrumbs_1gzfl_2 {
 		display: flex;
@@ -2412,12 +2230,14 @@
 	}
 }
 @layer lol {
-	._resizableContainer_1iv6r_2 {
+	._resizableContainer_1ftu2_2 {
 		overflow: auto;
 		position: relative;
 	}
 
-	._table_1iv6r_7 {
+	._table_1ftu2_7 {
+		--lol-table-indent: 1.125rem;
+
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
@@ -2433,9 +2253,38 @@
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: 0.25rem;
 		}
+
+		/* The whole table is the drop target when a drag is dropped on it rather
+		   than between two of its rows. */
+		&[data-drop-target] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.25rem;
+		}
+	}
+
+	/* Inside a `Virtualizer` the table is a <div> whose rows are placed by the
+	   layout, and it scrolls them itself — which is what the virtualizer measures
+	   against, so it is the one table that needs a height of its own. */
+	div._table_1ftu2_7 {
+		overflow: auto;
+		position: relative;
+
+		/* That also makes the header stick over the rows as they scroll past. The
+		   header cells tile the full width of the row, so frosting each one covers
+		   the strip; without it the rows read straight through the labels. The
+		   tint is the client's page black, which is what any surface the table
+		   sits on is a shade of. */
+		& ._column_1ftu2_46 {
+			background-color: color-mix(
+				in srgb,
+				var(--lol-color-hextech-black),
+				transparent 4%
+			);
+			backdrop-filter: blur(12px);
+		}
 	}
 
-	._row_1iv6r_25 {
+	._row_1ftu2_56 {
 		color: var(--lol-color-grey-100);
 		outline: none;
 		transition: color 0.3s ease;
@@ -2488,13 +2337,28 @@
 			cursor: default;
 		}
 
+		&[data-dragging] {
+			opacity: 0.4;
+		}
+
 		&[data-focus-visible] {
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: -1px;
 		}
+
+		/* A row is only its own drop target when the table takes drops onto rows;
+		   reordering draws the `.dropIndicator` between them instead. */
+		&[data-drop-target] {
+			color: var(--lol-color-gold-100);
+			--lol-table-row-highlight: linear-gradient(
+				90deg,
+				rgb(from var(--lol-color-gold-400) r g b / 0.35),
+				rgb(from var(--lol-color-gold-400) r g b / 0.1)
+			);
+		}
 	}
 
-	._cell_1iv6r_84 {
+	._cell_1ftu2_130 {
 		/*
 		 * Collapsed borders are resolved between neighbours, and Chrome paints the
 		 * winning hairline once per edge when the losing side is styled `none`. The
@@ -2512,7 +2376,7 @@
 		}
 	}
 
-	._resizer_1iv6r_102 {
+	._resizer_1ftu2_148 {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: 0;
@@ -2544,7 +2408,7 @@
 	}
 
 	/* Fixed footprint so toggling the sort direction never shifts the header. */
-	._sortIndicator_1iv6r_134 {
+	._sortIndicator_1ftu2_180 {
 		display: inline-block;
 		vertical-align: middle;
 		width: 0.5rem;
@@ -2568,7 +2432,7 @@
 		}
 	}
 
-	._column_1iv6r_158 {
+	._column_1ftu2_46 {
 		position: relative;
 		font-family: var(--lol-font-family-beaufort);
 		color: var(--lol-color-gold-100);
@@ -2604,15 +2468,15 @@
 			color: var(--lol-color-gold-500);
 		}
 
-		&[data-hovered] ._sortIndicator_1iv6r_134 {
+		&[data-hovered] ._sortIndicator_1ftu2_180 {
 			opacity: 0.5;
 		}
 
-		&[data-sort-direction] ._sortIndicator_1iv6r_134 {
+		&[data-sort-direction] ._sortIndicator_1ftu2_180 {
 			opacity: 1;
 		}
 
-		&[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
+		&[data-sort-direction="descending"] ._sortIndicator_1ftu2_180::after {
 			border-width: 0.375rem 0.25rem 0;
 			border-top-color: currentColor;
 			border-bottom-color: transparent;
@@ -2624,55 +2488,191 @@
 		}
 	}
 
-	._footer_1iv6r_214 {
-		color: var(--lol-color-gold-300);
-
-		& ._cell_1iv6r_84 {
-			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
-		}
+	/* The checkbox and the drag handle sit in columns of their own, added by
+	   `TableHeader` and `TableRow`. Both shrink to their content: a percentage
+	   width smaller than the content is the table layout's way of saying "as
+	   narrow as this can go". */
+	._selectionColumn_1ftu2_264,
+	._selectionCell_1ftu2_265,
+	._gripColumn_1ftu2_266,
+	._gripCell_1ftu2_267 {
+		width: 1%;
+		white-space: nowrap;
 	}
 
-	._empty_1iv6r_222 {
-		padding: 1rem 0.75rem;
-		text-align: center;
+	._selectionCell_1ftu2_265,
+	._gripCell_1ftu2_267 {
+		padding-inline-end: 0;
 	}
 
-	/* 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 {
+	._grip_1ftu2_266 {
+		/* 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;
+		color: inherit;
 
-	._start_1iv6r_233 {
-		text-align: start;
+		display: block;
+		width: 0.625rem;
+		height: 0.75rem;
+		outline: none;
+		/* Three hairlines, the client's drag affordance. */
+		background: repeating-linear-gradient(
+			to bottom,
+			currentColor 0 1px,
+			transparent 1px 0.25rem
+		);
 	}
 
-	._center_1iv6r_237 {
-		text-align: center;
+	/* React aria drags the row itself and leaves the handle inert, so the cursor
+	   has to come from the row. */
+	._table_1ftu2_7[data-allows-dragging] ._row_1ftu2_56 {
+		cursor: grab;
 	}
 
-	._end_1iv6r_241 {
-		text-align: end;
+	/* The indicator is a row of its own with a single full-width cell, so the
+	   line is drawn by a pseudo element that takes up no space of its own. */
+	._dropIndicator_1ftu2_119 {
+		& > td,
+		& > th {
+			position: relative;
+		}
+
+		&[data-drop-target] > td::after,
+		&[data-drop-target] > th::after {
+			content: "";
+			position: absolute;
+			inset-inline: 0;
+			top: -1px;
+			height: 2px;
+			background-color: var(--lol-color-gold-400);
+		}
 	}
-}
-@layer lol {
-	._list_nrxix_2 {
-		margin-left: -1rem;
+
+	/* The expand chevron of a `treeColumn` cell, and the indent that puts a
+	   nested row under its parent. React aria sets `--table-row-level` on every
+	   row, starting at 1. */
+	._treeContent_1ftu2_327 {
 		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-inline-start: calc(
+			(var(--table-row-level, 1) - 1) *
+			var(--lol-table-indent)
+		);
 	}
 
-	._tab_nrxix_7 {
-		font-family: var(--lol-font-family-beaufort);
-		color: var(--lol-color-gold-300);
-		position: relative;
-		cursor: pointer;
-		user-select: none;
-		padding: 0.25rem 1rem;
-		font-size: 0.75rem;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		line-height: 1rem;
+	._chevron_1ftu2_337 {
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+
+		flex: none;
+		width: 0.5rem;
+		height: 0.75rem;
+		outline: none;
+		cursor: pointer;
+
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABF0lEQVR42r3WMY7CQAxA0R8r2oobUMBB9hTLPegguQJUNHuJLbZb7RU4BvQIiZaKJiNFo0wy8dhYiiJNLD+N5RmlOv9sGYgtsAQajKJOICeg6p69BSQjCMAOOFpDMYIlJhOIGSbAqitSTeQWYQJcgQ3wzMhXY6F1f8CXJ9YfBlcsHm83TAbWXDBJrJtjMvLNFJOJAmaYZBQwwSRzaIoxmXEUijCZecDVmCiuLRVWKy/jgP0CHxmYakchHpm7ArhpoU/gH1hk5DbAUd6BaFqnQuZCamQOVITkQsVIDmSCTEFmyBhkiqQgc2QIckFiyA3pQ65IgNbeSIAuwLcn0m9dCxy8kHgYUlgxMjTeMWaCpP4Z2u59t0IAXn+VXtMKZ5riAAAAAElFTkSuQmCC");
+		background: var(--lol-table-chevron) no-repeat center / contain;
+		transition: rotate 0.15s ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.125rem;
+		}
+	}
+
+	._chevronSpacer_1ftu2_366 {
+		flex: none;
+		width: 0.5rem;
+	}
+
+	._row_1ftu2_56[data-expanded] ._chevron_1ftu2_337 {
+		rotate: 90deg;
+	}
+
+	._row_1ftu2_56[data-hovered] ._chevron_1ftu2_337,
+	._chevron_1ftu2_337[data-hovered],
+	._chevron_1ftu2_337[data-focus-visible] {
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
+	}
+
+	._row_1ftu2_56[data-disabled] ._chevron_1ftu2_337 {
+		cursor: default;
+		filter: grayscale(100%);
+	}
+
+	._loadMore_1ftu2_386 > td,
+	._loadMore_1ftu2_386 > th {
+		padding: 0.5rem;
+	}
+
+	._spinner_1ftu2_391 {
+		width: 1.5rem;
+		margin-inline: auto;
+	}
+
+	._footer_1ftu2_396 {
+		color: var(--lol-color-gold-300);
+
+		& ._cell_1ftu2_130 {
+			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		}
+	}
+
+	._empty_1ftu2_404 {
+		padding: 1rem 0.75rem;
+		text-align: center;
+	}
+
+	/* 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_1ftu2_7 [data-empty] > tr > td {
+		padding: 0;
+	}
+
+	._start_1ftu2_415 {
+		text-align: start;
+	}
+
+	._center_1ftu2_419 {
+		text-align: center;
+	}
+
+	._end_1ftu2_423 {
+		text-align: end;
+	}
+}
+@layer lol {
+	._list_nrxix_2 {
+		margin-left: -1rem;
+		display: flex;
+	}
+
+	._tab_nrxix_7 {
+		font-family: var(--lol-font-family-beaufort);
+		color: var(--lol-color-gold-300);
+		position: relative;
+		cursor: pointer;
+		user-select: none;
+		padding: 0.25rem 1rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		line-height: 1rem;
 		outline: none;
 
 		&[data-selected] {
@@ -3119,3 +3119,589 @@
 		width: 1.5rem;
 	}
 }
+@layer lol {
+	._table_v9mcp_2 {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+
+		font-family: var(--lol-font-family-spiegel);
+		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);
+		color: var(--lol-color-grey-100);
+	}
+
+	/*
+	 * Both headings are set the same way — the client's heading face, in gold
+	 * over the grey of the data. What tells them apart is only which edge of the
+	 * table they run along.
+	 *
+	 * The zero-width `solid` on the edges each one leaves alone is the guard the
+	 * table's own cells carry: collapsed borders are resolved between
+	 * neighbours, and Chrome paints the winning hairline once per edge when the
+	 * losing side is styled `none`, so a 25%-opacity line blends twice and comes
+	 * out twice as bright.
+	 */
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27,
+	._corner_v9mcp_28 {
+		border: 0 solid;
+	}
+
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27 {
+		font-family: var(--lol-font-family-beaufort);
+		color: var(--lol-color-gold-100);
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.075em;
+		line-height: 1rem;
+		text-transform: uppercase;
+		white-space: nowrap;
+		padding: 0.375rem 0.75rem;
+	}
+
+	/* The field names head their rows, so the hairline that separates the
+	   heading from the data runs down the table rather than across it. */
+	._fieldHeader_v9mcp_26 {
+		text-align: start;
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		/* Shrink to the names: a percentage under the content width is the table
+		   layout's way of saying "as narrow as this can go". */
+		width: 1%;
+	}
+
+	._recordHeader_v9mcp_27 {
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	/* The blank corner over the field names carries both hairlines, so the one
+	   under the record names and the one beside the field names meet instead of
+	   stopping short of each other. */
+	._corner_v9mcp_28 {
+		padding: 0;
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	._cell_v9mcp_70 {
+		border: 0 solid;
+		padding: 0.375rem 0.75rem;
+		vertical-align: middle;
+	}
+
+	._start_v9mcp_76 {
+		text-align: start;
+	}
+
+	._center_v9mcp_80 {
+		text-align: center;
+	}
+
+	._end_v9mcp_84 {
+		text-align: end;
+	}
+}
+@layer lol {
+	/*
+	 * "Metal linework as a framing element to support and draw focus towards
+	 * key pieces of information." The frame is a one-pixel hairline and nothing
+	 * more: a gradient painted into the border box, the plot painted into the
+	 * padding box. Anything heavier would compete with the data.
+	 */
+	._frame_7dkb0_8 {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		border: 1px solid transparent;
+		background:
+			var(--lol-chart-frame-fill) padding-box,
+			var(--lol-chart-frame-border) border-box;
+		color: var(--lol-chart-foreground);
+		font-family: var(--lol-chart-font-body);
+		/* A <figure>: the UA gives it 1em block and 40px inline margins. */
+		margin: 0;
+		padding: 1rem 1.125rem 1.125rem;
+		gap: 0.75rem;
+	}
+
+	/* Unframed: the same type and colours, no metal. For charts that already
+	 * sit inside a panel of their own. */
+	._bare_7dkb0_26 {
+		border-color: transparent;
+		background: none;
+		padding: 0;
+	}
+
+	/*
+	 * The diamond is the language's accent piece — it "guides attention toward
+	 * key information". Four of them pin the frame's corners to the grid the
+	 * square establishes. They are decoration, so they are hidden from the
+	 * accessibility tree by the component.
+	 */
+	._corner_7dkb0_38 {
+		position: absolute;
+		width: 5px;
+		height: 5px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-accent);
+		background: var(--lol-chart-surface);
+	}
+
+	._bare_7dkb0_26 ._corner_7dkb0_38 {
+		display: none;
+	}
+
+	._cornerTopLeft_7dkb0_51 {
+		top: -3px;
+		left: -3px;
+	}
+
+	._cornerTopRight_7dkb0_56 {
+		top: -3px;
+		right: -3px;
+	}
+
+	._cornerBottomLeft_7dkb0_61 {
+		bottom: -3px;
+		left: -3px;
+	}
+
+	._cornerBottomRight_7dkb0_66 {
+		bottom: -3px;
+		right: -3px;
+	}
+
+	._header_7dkb0_71 {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	._headings_7dkb0_78 {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	/* Beaufort, spaced and uppercased — the client's voice for anything that
+	 * names a thing rather than measures it. */
+	._title_7dkb0_87 {
+		margin: 0;
+		font-family: var(--lol-chart-font-display);
+		font-size: var(--lol-font-size-h5, 1.1667rem);
+		line-height: var(--lol-line-height-h5, 1.5);
+		letter-spacing: var(--lol-letter-spacing-h5, 0.075em);
+		font-weight: var(--lol-font-weight-h5, 700);
+		text-transform: uppercase;
+		color: var(--lol-chart-foreground);
+	}
+
+	._subtitle_7dkb0_98 {
+		margin: 0;
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+		color: var(--lol-chart-muted);
+	}
+
+	._actions_7dkb0_106 {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	/* A rule terminated at both ends by a diamond: the same figure the client
+	 * draws under every panel heading. */
+	._rule_7dkb0_115 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	._ruleLine_7dkb0_121 {
+		height: 1px;
+		flex-grow: 1;
+		border: none;
+		margin: 0;
+		background-image: linear-gradient(
+			to right,
+			transparent,
+			var(--lol-chart-frame-rule) 15%,
+			var(--lol-chart-frame-rule) 85%,
+			transparent
+		);
+	}
+
+	._ruleDiamond_7dkb0_135 {
+		width: 4px;
+		height: 4px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-rule);
+		flex-shrink: 0;
+	}
+
+	._body_7dkb0_143 {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	._footer_7dkb0_149 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem 1rem;
+	}
+}
+@layer lol {
+	._legend_1rk8r_2 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem 1.25rem;
+		/* A <ul>: the UA gives it block margins and a list marker. */
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	._item_1rk8r_13 {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		/* Never the series colour. Identity comes from the swatch beside the
+		 * label; a light teal or gold set as text would not clear contrast. */
+		color: var(--lol-chart-muted);
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+	}
+
+	/* The diamond again, at series scale, lit by the hue it stands for. */
+	._swatch_1rk8r_26 {
+		width: 0.5rem;
+		height: 0.5rem;
+		flex-shrink: 0;
+		rotate: 45deg;
+		background: var(--lol-chart-legend-color);
+		box-shadow: 0 0 5px var(--lol-chart-legend-color);
+	}
+
+	._square_1rk8r_35 {
+		rotate: none;
+	}
+
+	._line_1rk8r_39 {
+		width: 0.875rem;
+		height: 2px;
+		rotate: none;
+		box-shadow: none;
+	}
+}
+@layer lol {
+	._chart_1mnqy_2 {
+		width: 100%;
+		min-width: 0;
+	}
+}
+@layer lol {
+	/* ----- CSS reset ----- */
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	/* ----- Default CSS variables ----- */
+
+	:root {
+		color-scheme: dark;
+
+		--lol-z-index-app: 100;
+		--lol-z-index-modal: 200;
+		--lol-z-index-popover: 300;
+		--lol-z-index-overlay: 400;
+		--lol-z-index-max: 9999;
+
+		--lol-scale: 1;
+
+		--lol-color-blue-100: #cdfafa;
+		--lol-color-blue-200: #0ac8b9;
+		--lol-color-blue-300: #0397ab;
+		--lol-color-blue-400: #005a82;
+		--lol-color-blue-500: #0a323c;
+		--lol-color-blue-600: #091428;
+		--lol-color-blue-700: #0a1428;
+
+		--lol-color-grey-100: #a09b8c;
+		--lol-color-grey-150: #5b5a56;
+		--lol-color-grey-200: #3c3c41;
+		--lol-color-grey-300: #1e2328;
+		--lol-color-grey-cool: #1e282d;
+
+		--lol-color-hextech-black: #010a13;
+
+		--lol-color-gold-100: #f0e6d2;
+		--lol-color-gold-200: #c8aa6e;
+		--lol-color-gold-300: #cdbe91;
+		--lol-color-gold-400: #c89b3c;
+		--lol-color-gold-500: #785a28;
+		--lol-color-gold-600: #463714;
+		--lol-color-gold-700: #32281e;
+
+		--lol-font-size-h1: 3.3333rem;
+		--lol-line-height-h1: 3.5rem;
+		--lol-letter-spacing-h1: 0.05em;
+		--lol-font-weight-h1: 700;
+
+		--lol-font-size-h2: 2.3333rem;
+		--lol-line-height-h2: 2.6667rem;
+		--lol-letter-spacing-h2: 0.05em;
+		--lol-font-weight-h2: 700;
+
+		--lol-font-size-h3: 1.9167rem;
+		--lol-line-height-h3: 2.3333rem;
+		--lol-letter-spacing-h3: 0.05em;
+		--lol-font-weight-h3: 700;
+
+		--lol-font-size-h4: 1.5rem;
+		--lol-line-height-h4: 1.8333rem;
+		--lol-letter-spacing-h4: 0.05em;
+		--lol-font-weight-h4: 700;
+
+		--lol-font-size-h5: 1.1667rem;
+		--lol-line-height-h5: 1.5rem;
+		--lol-letter-spacing-h5: 0.075em;
+		--lol-font-weight-h5: 700;
+
+		--lol-font-size-label: 0.9167rem;
+		--lol-line-height-label: 1.3333rem;
+		--lol-letter-spacing-label: 0.05em;
+		--lol-font-weight-label: 700;
+
+		--lol-font-size-stat: 1.1667rem;
+		--lol-line-height-stat: 1.6667rem;
+		--lol-letter-spacing-stat: 0.05em;
+		--lol-font-weight-stat: 700;
+
+		--lol-font-size-large-number: 4.75rem;
+		--lol-line-height-large-number: 5.1667rem;
+		--lol-letter-spacing-large-number: 0.025em;
+		--lol-font-weight-large-number: 500;
+
+		--lol-font-size-xs: 0.75rem;
+		--lol-line-height-xs: 1rem;
+		--lol-letter-spacing-xs: 0.025em;
+		--lol-font-weight-xs: 400;
+
+		--lol-font-size-sm: 0.875rem;
+		--lol-line-height-sm: 1.1025rem;
+		--lol-letter-spacing-sm: 0.02em;
+		--lol-font-weight-sm: 400;
+
+		--lol-font-size-base: 1rem;
+		--lol-line-height-base: 1.24rem;
+		--lol-letter-spacing-base: 0.01em;
+		--lol-font-weight-base: 400;
+
+		--lol-font-size-md: 1.1667rem;
+		--lol-line-height-md: 1.6667rem;
+		--lol-letter-spacing-md: 0.025em;
+		--lol-font-weight-md: 400;
+
+		--lol-font-size-lg: 1.5rem;
+		--lol-line-height-lg: 1.875rem;
+		--lol-letter-spacing-lg: 0.025em;
+		--lol-font-weight-lg: 400;
+
+		--lol-font-family-beaufort: "beaufort";
+		--lol-font-family-spiegel: "spiegel";
+
+		--lol-gradient-gold: linear-gradient(
+			to top,
+			var(--lol-color-gold-500),
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200)
+		);
+		--lol-gradient-gold-hover: linear-gradient(
+			to top,
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200),
+			var(--lol-color-gold-100)
+		);
+		--lol-gradient-gold-press: linear-gradient(
+			to top,
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-500)
+		);
+
+		--lol-gradient-grey-300: linear-gradient(
+			to top,
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-grey-focus: linear-gradient(
+			to top,
+			var(--lol-color-grey-200),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-hextech-black: linear-gradient(
+			to top,
+			var(--lol-color-hextech-black),
+			var(--lol-color-hextech-black)
+		);
+		--lol-gradient-disabled: linear-gradient(
+			to top,
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150)
+		);
+		--lol-gradient-transparent: linear-gradient(
+			to top,
+			transparent,
+			transparent
+		);
+
+		--lol-gradient-hextech: linear-gradient(
+			to top,
+			var(--lol-color-blue-200),
+			var(--lol-color-blue-400)
+		);
+		--lol-gradient-hextech-hover: linear-gradient(
+			to top,
+			var(--lol-color-blue-100),
+			var(--lol-color-blue-300)
+		);
+		--lol-gradient-hextech-press: linear-gradient(
+			to top,
+			var(--lol-color-blue-500),
+			var(--lol-color-blue-400)
+		);
+
+		--lol-form-height-small: 2rem;
+		--lol-form-height-medium: 2.25rem;
+		--lol-form-height-large: 2.5rem;
+
+		/* ----- Charts -----
+		 *
+		 * Hextech separates the interface into two materials: metal linework
+		 * that *frames* information, and hextech magic that *is* it. A chart
+		 * maps onto that split exactly — gold for the frame, the axes and the
+		 * grid; the magic palette for the marks — so the ink and frame tokens
+		 * below are gold and the series tokens are not.
+		 *
+		 * Used by `@lolmath/ui/charts`, but defined here so a host page can
+		 * retune them from one place, and so a chart built by hand against
+		 * TanStack Charts picks them up too. */
+
+		/* Parchment gold for what you read, dimmer gold for what merely
+		 * orients you. The chart engine paints tick labels at 0.68 opacity on
+		 * top of these, so `muted` is deliberately brighter than it looks. */
+		--lol-chart-foreground: var(--lol-color-gold-100);
+		--lol-chart-muted: var(--lol-color-gold-300);
+		/* The grid is painted at 0.11 opacity — it has to start bright to
+		 * survive that and still read as gold rather than grey. */
+		--lol-chart-grid: var(--lol-color-gold-200);
+		--lol-chart-surface: var(--lol-color-hextech-black);
+
+		--lol-chart-frame-fill: linear-gradient(
+			180deg,
+			var(--lol-color-blue-600) 0%,
+			var(--lol-color-hextech-black) 100%
+		);
+		--lol-chart-frame-border: linear-gradient(
+			180deg,
+			var(--lol-color-gold-500) 0%,
+			var(--lol-color-gold-600) 55%,
+			var(--lol-color-gold-500) 100%
+		);
+		--lol-chart-frame-accent: var(--lol-color-gold-400);
+		--lol-chart-frame-rule: var(--lol-color-gold-500);
+
+		/* Six categorical slots in a fixed order, assigned in sequence and
+		 * never cycled. Slots 1 and 2 are the Hextech signature (teal energy,
+		 * Piltover gold); the rest reach into the wider Runeterra palette,
+		 * because a palette that stayed inside gold and teal could not be told
+		 * apart. The set is validated on the hextech-black surface for the
+		 * OKLCH lightness band, the chroma floor, protan/deutan separation and
+		 * contrast — see the readme before changing a value. */
+		--lol-chart-series-1: #0aa89b;
+		--lol-chart-series-2: #ba8c2e;
+		--lol-chart-series-3: #8e6be8;
+		--lol-chart-series-4: #e8574f;
+		--lol-chart-series-5: #1e8fd5;
+		--lol-chart-series-6: #4fa83a;
+
+		/* Reserved meanings. Never spend these on "series 4". */
+		--lol-chart-positive: #2e9e63;
+		--lol-chart-negative: #d6453c;
+
+		--lol-chart-font-display:
+			var(--lol-font-family-beaufort), "Times New Roman", serif;
+		--lol-chart-font-body:
+			var(--lol-font-family-spiegel), system-ui, sans-serif;
+
+		/* Bridge to TanStack Charts' own defaults, so a chart definition
+		 * written by hand — one that never sets a theme — still picks up the
+		 * Hextech palette and tooltip. */
+		--ts-chart-1: var(--lol-chart-series-1);
+		--ts-chart-2: var(--lol-chart-series-2);
+		--ts-chart-3: var(--lol-chart-series-3);
+		--ts-chart-4: var(--lol-chart-series-4);
+		--ts-chart-5: var(--lol-chart-series-5);
+		--ts-chart-6: var(--lol-chart-series-6);
+		--ts-chart-focus-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-marker-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-label-halo: var(--lol-chart-surface);
+
+		--ts-chart-tooltip-background: var(--lol-chart-surface);
+		--ts-chart-tooltip-border: 1px solid var(--lol-color-gold-500);
+		--ts-chart-tooltip-border-radius: 0;
+		--ts-chart-tooltip-color: var(--lol-chart-foreground);
+		--ts-chart-tooltip-padding: 0.5rem 0.7rem;
+		--ts-chart-tooltip-shadow:
+			0 0 0 1px var(--lol-color-hextech-black), 0 8px 24px rgb(1 10 19 / 0.75);
+		--ts-chart-tooltip-font: 400 0.8125rem / 1.35 var(--lol-chart-font-body);
+	}
+
+	/*
+	 * The scene TanStack Charts paints is plain SVG with stable class names on
+	 * it, so the parts CSS does better than JS — line caps, the magic glow —
+	 * are done here. `[data-lol-chart]` is set by `HextechChart`; nothing
+	 * outside a Hextech chart is touched.
+	 */
+	[data-lol-chart] {
+		font-family: var(--lol-chart-font-body);
+		color: var(--lol-chart-foreground);
+	}
+
+	[data-lol-chart] .ts-chart__line {
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	/*
+	 * "Its brightest executions are reserved for pivotal moments." The glow is
+	 * the one place the marks are allowed to be loud, so it stays faint.
+	 */
+	[data-lol-chart-glow="true"] .ts-chart__line,
+	[data-lol-chart-glow="true"] .ts-chart__area {
+		filter: drop-shadow(0 0 3px rgb(10 168 155 / 0.18));
+	}
+
+	[data-lol-chart] .ts-chart__crosshair {
+		pointer-events: none;
+	}
+}