/**
 * Eternium CSS framework
 * License:  MIT
 * https://vorticode.github.io/eternium
 * @copyright Vorticode LLC
 *
 * Eternium provides custom layout and form element styles for elements inside an element with
 * the .eternium class (or .eternium-style for element styles only, .eternium-layout for layout only).
 *
 * STRUCTURE — four cascade layers; your own CSS is unlayered and therefore ALWAYS wins:
 *   @layer eternium.theme       All CSS variables (the default theme).  Paints nothing.
 *   @layer eternium.base        How bare elements look: inputs, buttons, selects, checkboxes...
 *   @layer eternium.components  Opt-in widgets: .card, .badge, .alert-*, .tabs, .data-table...
 *   @layer eternium.utilities   One-property helpers: .row, .col, .gap-*, .pad-*, widths...
 *
 * THEMING — override seed variables on :root (or on any wrapper element) in your own stylesheet:
 *   :root { --primary: #ff5100; --radius: 4px; --button-transform: uppercase }
 * Seeds derive the rest (shades, hovers, status tints) via color-mix(); every derived variable
 * can also be overridden individually.  See the Variables region below.
 *
 * DARK MODE — colors are declared with light-dark().  Default is light.
 *   <html dark>  forces dark;  <div dark> darkens a subtree;  [light] re-lightens one.
 *   For automatic OS dark mode, add to your own CSS:  :root { color-scheme: light dark }
 *
 * Requires a ~2025 browser baseline: cascade layers, CSS nesting, color-mix(), light-dark().
 *
 * Input and button modifiers:
 * .flat - no border or background except on hover/focus
 * .square - non-rounded border
 * .no-pad - no padding
 * .no-hover - no hover effects
 * .no-focus - no focus outline
 * .no-effects - no hover/focus effects
 */

@layer eternium.theme, eternium.base, eternium.components, eternium.utilities;


/*┌─────────────────╮
  |Variables        |
  └─────────────────╯*/
@layer eternium.theme {
	:root {
		color-scheme: light;

		/* Seeds — a complete reskin usually touches only these. */
		/* Dark mode: content on a blue-black that is almost black, the bars around it a dark gray
		   with the same blue cast (--chrome-bg), cards and menus a step up from the content, bright
		   text and a blue accent.  Few, well-spaced levels rather than many close grays. */
		--background: light-dark(#fff, #05070b);
		--text: light-dark(#333, #e6edf3);
		--shade-base: light-dark(#36466a, #8b949e); /* hue the gray ramp mixes toward; use var(--text) for neutral grays */
		--primary: light-dark(#07c, #1f6feb);
		--primary-text: #fff;
		--success: light-dark(#188038, #5bb974);
		--warning: light-dark(#9a6700, #d4a72c);
		--danger:  light-dark(#b3223c, #f2555a);
		--info:    light-dark(#0b6bcb, #62a8f5);
		/* A starred or favorite mark: a bright gold star (--star) drawn with a darker gold edge
		   (--star-edge), which keeps it crisp on white and on a selected row in light mode. */
		--star: light-dark(#f5b400, #d4a72c);
		--star-edge: light-dark(#c98a00, #d4a72c);
		--font: system-ui, sans-serif;
		--font-display: var(--font);
		--font-mono: ui-monospace, Consolas, monospace;
		--radius: .25rem;       /* controls */
		--radius-md: .375rem;   /* rounded rows, bar buttons, tabs, menus */
		--radius-lg: .625rem;   /* cards, dialogs */
		--radius-full: 9999px;  /* pills, dots */
		--border-width: 1px;
		--speed: 0;
		--ease: ease;
		--shadow-color: light-dark(#00000022, #0000008c);
		--shadow: 0 0 .25rem var(--shadow-color);
		--shadow-lg: 0 0 .5rem var(--shadow-color); /* dialogs, popovers */

		/* Derived — computed from the seeds; override any individually. */
		--invert: light-dark(#000, #fff);
		--text-muted: color-mix(in oklab, var(--text), var(--background) 38%);
		/* The gray ramp, a few points darker in light mode, where its steps read faint on white. */
		--shade1: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 19%), color-mix(in oklab, var(--background), var(--shade-base) 16%));
		--shade2: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 32%), color-mix(in oklab, var(--background), var(--shade-base) 28%));
		--shade3: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 43%), color-mix(in oklab, var(--background), var(--shade-base) 38%));
		--shade4: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 54%), color-mix(in oklab, var(--background), var(--shade-base) 48%));
		--primary-hover: color-mix(in oklab, var(--primary), #fff 15%);
		--success-tint: color-mix(in oklab, var(--background), var(--success) 14%);
		--success-border: color-mix(in oklab, var(--background), var(--success) 35%);
		--warning-tint: color-mix(in oklab, var(--background), var(--warning) 14%);
		--warning-border: color-mix(in oklab, var(--background), var(--warning) 35%);
		--danger-tint: color-mix(in oklab, var(--background), var(--danger) 14%);
		--danger-border: color-mix(in oklab, var(--background), var(--danger) 35%);
		--danger-hover: color-mix(in oklab, var(--danger), var(--invert) 15%); /* hover step of a filled .danger button */
		--danger-text: light-dark(#fff, #000); /* text on a --danger fill */
		--info-tint: color-mix(in oklab, var(--background), var(--info) 14%);
		--info-border: color-mix(in oklab, var(--background), var(--info) 35%);

		/* Elements */
		/* Structural lines (panes, rows, menus, bars) are a step lighter than control borders in light
		   mode; inputs keep --input-border-color. */
		--border-color: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 22%), var(--shade2));
		--border: var(--border-width) solid var(--border-color);

		/* Interaction washes shared by list rows, tree rows, tiles, menu items and flat buttons. */
		--hover-bg: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 9%), var(--shade1));
		--selected-bg: light-dark(color-mix(in oklab, var(--background), var(--primary) 13%),
			color-mix(in oklab, var(--background), var(--primary) 42%));
		--selected-border-color: light-dark(color-mix(in oklab, var(--background), var(--primary) 50%),
			color-mix(in oklab, var(--primary), #fff 30%));
		/* --primary as a text or icon color on --background (a toggled icon, a sort arrow).  Plain
		   --primary is a fill color and is too dark for text in dark mode. */
		--primary-fg: light-dark(var(--primary), color-mix(in oklab, var(--primary), #fff 45%));
		/* Side panes that describe rather than list (a details pane): a tint off the page background
		   in light mode; the bars' gray in dark. */
		--pane-bg: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 6%), var(--chrome-bg));
		/* The well such a pane shows its item's picture or player in, a step off the pane. */
		--well-bg: light-dark(color-mix(in oklab, var(--shade2) 45%, var(--background)), var(--shade1));
		/* A whole background (background: var(--checkerboard)) for a picture that can be
		   transparent: a light checkerboard in both schemes, so a dark logo stays visible in dark
		   mode and a white one in light mode. */
		--checkerboard: #fff conic-gradient(#0000000f 25%, #0000 0 50%, #0000000f 0 75%, #0000 0) 0 0 / 10px 10px;
		/* The faint band behind every other row of a .striped list (a file manager's alternate row).
		   Dark mode takes a little more of the gray, so the band stands as far from the near-black
		   page as light mode's does from white. */
		--row-alt-bg: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 6%),
			color-mix(in oklab, var(--background), var(--shade-base) 7%));
		/* Tints: see-through colors a person gives to something to set it apart, such as a table
		   column (the color picker's palette, a soft row and a strong one).  Laid over whatever is
		   behind them, so a striped or hovered row still shows through, and the same tint reads on
		   a light page and a dark one; dark mode makes them a little stronger, since a tint barely
		   shows on near-black. */
		--tint-gray: light-dark(oklch(55% .02 260 / 15%), oklch(75% .02 260 / 16%));
		--tint-red: light-dark(oklch(63% .2 25 / 17%), oklch(63% .2 25 / 26%));
		--tint-orange: light-dark(oklch(72% .17 55 / 20%), oklch(70% .17 55 / 26%));
		--tint-yellow: light-dark(oklch(86% .17 95 / 32%), oklch(80% .16 95 / 24%));
		--tint-lime: light-dark(oklch(82% .19 128 / 26%), oklch(76% .19 128 / 22%));
		--tint-green: light-dark(oklch(68% .16 150 / 18%), oklch(66% .16 150 / 26%));
		--tint-teal: light-dark(oklch(70% .12 190 / 20%), oklch(68% .12 190 / 26%));
		--tint-blue: light-dark(oklch(62% .17 255 / 16%), oklch(62% .17 255 / 30%));
		--tint-violet: light-dark(oklch(58% .2 295 / 15%), oklch(60% .2 295 / 30%));
		--tint-pink: light-dark(oklch(66% .2 350 / 15%), oklch(64% .2 350 / 28%));
		--tint-gray-strong: light-dark(oklch(55% .02 260 / 32%), oklch(75% .02 260 / 32%));
		--tint-red-strong: light-dark(oklch(63% .2 25 / 36%), oklch(63% .2 25 / 52%));
		--tint-orange-strong: light-dark(oklch(72% .17 55 / 42%), oklch(70% .17 55 / 50%));
		--tint-yellow-strong: light-dark(oklch(86% .17 95 / 66%), oklch(80% .16 95 / 45%));
		--tint-lime-strong: light-dark(oklch(82% .19 128 / 52%), oklch(76% .19 128 / 42%));
		--tint-green-strong: light-dark(oklch(68% .16 150 / 38%), oklch(66% .16 150 / 50%));
		--tint-teal-strong: light-dark(oklch(70% .12 190 / 42%), oklch(68% .12 190 / 50%));
		--tint-blue-strong: light-dark(oklch(62% .17 255 / 34%), oklch(62% .17 255 / 56%));
		--tint-violet-strong: light-dark(oklch(58% .2 295 / 32%), oklch(60% .2 295 / 56%));
		--tint-pink-strong: light-dark(oklch(66% .2 350 / 32%), oklch(64% .2 350 / 52%));
		/* The bars and headers around the content: a command bar, pane headers, status bars.  A gray
		   that frames the work area in both modes: a step darker than the white content in light
		   mode, a step lighter than the almost-black content in dark. */
		--chrome-bg: light-dark(color-mix(in oklab, var(--background), var(--shade-base) 7%), #23272c);
		/* The hover wash on those bars and on a .side-pane (they set --hover-bg to it).  It is
		   mixed from the bar's own color, since a wash mixed from the page's would barely show on a
		   bar in light mode and not at all in dark. */
		--chrome-hover-bg: light-dark(color-mix(in oklab, var(--chrome-bg), var(--shade-base) 10%),
			color-mix(in oklab, var(--chrome-bg), var(--shade-base) 20%));

		/* Tab strips (.tab-strip): the bars' own gray, so a header with tabs matches the headers
		   beside it, and a selected tab filled with the content's color reads as opening into it. */
		--tab-strip-bg: var(--chrome-bg);
		--tab-hover-bg: var(--chrome-hover-bg);
		--focus-ring: var(--border-width) solid var(--primary-hover);
		--focus-ring-primary: var(--border-width) solid var(--invert);

		--secondary: light-dark(var(--shade2), var(--shade3));
		--secondary-bg: var(--secondary);
		--secondary-bg-hover: var(--shade4);
		--secondary-border: var(--border-width) solid var(--secondary);
		--secondary-border-hover: var(--shade4); /* color only */

		--primary-bg: var(--primary);
		--primary-border: var(--border-width) solid var(--primary);
		--primary-bg-hover: var(--primary-hover);
		--primary-border-hover: var(--border-width) solid var(--primary-hover);

		--input-bg: var(--background);
		--input-border-color: light-dark(var(--shade2), var(--shade3));
		--input-border: var(--border-width) solid var(--input-border-color);
		--disabled-bg: var(--shade1);

		--card-bg: light-dark(var(--background), color-mix(in oklab, var(--background), var(--shade-base) 8%));
		--card-border-color: light-dark(var(--shade4), var(--border-color));
		--card-border: var(--border-width) solid var(--card-border-color);

		/* Dialogs, menus and dropdown lists float a step above the page.  In dark mode that is a
		   lighter gray than the bars, with a light hairline and a faint highlight along the top
		   edge, over a darker backdrop, so they stand clear of the near-black page.  Light mode
		   keeps them white on a dimmed page. */
		--popup-bg: light-dark(var(--background), #30353c);
		--popup-border-color: light-dark(var(--border-color), #ffffff38);
		--popup-border: var(--border-width) solid var(--popup-border-color);
		--popup-highlight: inset 0 1px 0 light-dark(#0000, #ffffff14);
		--backdrop: light-dark(#0008, #000c); /* dialog ::backdrop */

		/* Type scale (matches Tailwind text-xs..xl) */
		--font-size-xs: .75rem;
		--font-size-sm: .875rem;
		--font-size-md: 1rem;
		--font-size-lg: 1.125rem;
		--font-size-xl: 1.25rem;

		/* Control heights (inputs and buttons) */
		--control-sm: 1.25rem;
		--control-md: 1.5rem;
		--control-lg: 2rem;
		--control-xl: 3rem;

		/* Toolbar row height (.toolbar, tab bars): a control plus a little breathing room
		   above and below it, so changing --control-md rescales every bar with it.
		   Rows add their own 1px border-bottom BELOW this height. */
		--bar-height: calc(var(--control-md) + 2 * var(--space-2xs));
		/* A flat button inside a bar: a rounded square, so a bar can be taller than its buttons
		   (.command-bar raises it). */
		--bar-button-size: var(--control-md);
		/* A page's command bar (one full-width toolbar row), the quieter header row of each pane
		   under it (.panel-header, which a .list-header matches so they line up), one list or
		   tree row, a tab inside a strip (shorter than the strip, leaving a gap above), and a
		   view's .statusbar, which a pane's own bottom row matches so the two lines meet. */
		--command-bar-height: 2.5rem;
		--panel-header-height: 2rem;
		--row-height: 1.75rem;
		--tab-height: 1.6875rem;
		--statusbar-height: 1.75rem;
		/* A finger's target on a phone, 44px: a touch row's least height and a touch button's size. */
		--touch-target: 2.75rem;

		/* Input horizontal padding per size */
		--control-pad-md: .25rem;
		--control-pad-lg: .5rem;
		--control-pad-xl: 1rem;

		/* Button horizontal padding per size */
		--button-pad-md: 1rem;
		--button-pad-lg: 1.5rem;
		--button-pad-xl: 2rem;

		/* Button chrome — skins restyle buttons without new rules. */
		--button-font-size: var(--font-size-md);
		--button-weight: normal;
		--button-transform: none;
		--button-tracking: normal;
		--button-hover-lift: none;   /* e.g. translateY(-2px) */
		--button-hover-shadow: none;
		--button-transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease),
			border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
			transform var(--speed) var(--ease);

		/* Table */
		/* In dark mode a table is a card (--card-bg), with the structural line color. */
		--table-header-bg: var(--shade1);
		--table-border-color: light-dark(var(--shade1), var(--border-color));
		--table-border: 1px solid var(--table-border-color);
		--table-bg: var(--card-bg);
		/* The band behind every other row of a table.  A table is a card in dark mode, a step
		   lighter than the page, so its band is a step darker than the card: one lighter than the
		   page, as --row-alt-bg is, would be the card's own color and vanish.  A .table-on-page
		   table isn't raised, and takes the page's colors instead. */
		--table-row-alt-bg: light-dark(var(--row-alt-bg), color-mix(in oklab, var(--background), var(--shade-base) 2%));
		--table-padding: .25rem .5rem;

		--icon-size: 1rem;
		--menu-item-padding: 0 .625rem;

		/* Spacing scale, used by the gap-* and pad-* classes. */
		--space-2xs: 0.125rem;
		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 3rem;
	}
	/* Under a finger a status bar is 40px tall, as a menu row is, so the switches and buttons in it
	   can be tapped.  The rows that match it (a tree's pinned bottom row) grow with it. */
	@media (pointer: coarse) {
		:root { --statusbar-height: 2.5rem }
	}

	/* Force a color scheme on the page or any subtree.  Dark scrollbars take a gray from the
	   shade ramp, as the bars do, over a clear track: the browser's own neutral gray clashed with
	   the bars' cast. */
	[light] { color-scheme: light }
	[dark] { color-scheme: dark; scrollbar-color: color-mix(in oklab, var(--chrome-bg), var(--shade-base) 40%) transparent }
}


/*┌─────────────────╮
  |Base             |
  └─────────────────╯*/
@layer eternium.base {
	.eternium, .eternium-style {
		/* No flash of the browser's own over what a finger taps (a square behind a tree row's name):
		   what is pressed shows it with its own pressed and hover looks.  Inherited, so this is all. */
		-webkit-tap-highlight-color: transparent;

		/*┌─────────────────╮
		  |Normalize        |
		  └─────────────────╯*/
		body { background: var(--background); color: var(--text); font-family: var(--font) }
		[dark], [light] { color: var(--text) } /* re-resolve inherited text color at a scheme boundary */
		button, input, optgroup, select, textarea { font-family: inherit; font-size: 100% }

		/**
		 * Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
		sub, sup { line-height: 0 }

		:focus-visible { outline: none } /* Remove browser's default outline */
		hr { border: none; border-bottom: var(--border) }

		/* Link outline on tab-focus */
		a:focus-visible:not(.no-focus) { outline: var(--focus-ring) }

		fieldset { border: var(--border) }
		legend { font-size: .75rem; font-weight: bold }

		/* Placeholder + Contenteditable placeholder */
		::placeholder { color: inherit; opacity: .6 }
		[placeholder]:empty {
			&:before { content: attr(placeholder); opacity: .6; white-space: nowrap; cursor: text }
			&:is(:focus,.focus):before { content: '' }
		}


		/*┌─────────────────╮
		  |Input+Btn Height |
		  └─────────────────╯*/
		input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]),
		.input, select, button, .button, textarea {
			box-sizing: border-box; min-height: var(--control-md)
		}

		textarea, [contenteditable].input {
			/* Make text centered vertically with inputs and single-line textareas.  Top half of the diff between input height and text height */
			padding-top: calc((var(--control-md) - 1lh) / 2 - var(--border-width));
		}

		/*┌─────────────────╮
		  |Input            |
		  └─────────────────╯*/
		.input, select, textarea,
		input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]) {
			font-size: var(--font-size-md); color: var(--text);
			vertical-align: top;
			&:not(.square) { border-radius: var(--radius); }
			&:not(.flat) {
				border: var(--input-border); padding-left: var(--control-pad-md); padding-right: var(--control-pad-md);
			}
			&:not([disabled]) { /* TODO Support checkbox, radio, etc */
				background: var(--input-bg);
			}
		}

		/* Input focus */
		:is(input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]),
			.input, select, textarea) {

			&[disabled] { background: var(--disabled-bg) }

			:not(.no-focus):is(&:focus,.focus) { /* TODO: Why is & required here?) */
				outline: var(--focus-ring); outline-offset: -1px; z-index: 2; /* z-index lets it the border be on top when inside .group */
			}
		}

		input[type=file]:not(.no-focus):is(:focus-within, .focus) { outline: var(--focus-ring) } /* Can't style file, but at least make the focus look similar. */

		/*┌─────────────────╮
		  |Form Validation  |
		  └─────────────────╯*/
		/* Flag fields red only after the user has interacted with them (:user-invalid), so a freshly
		   loaded form full of empty required fields doesn't start out covered in red. */
		:is(input:not([type=checkbox],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]),
			select, textarea):not(.flat):user-invalid {
			border-color: var(--danger);
			&:is(:focus-within,.focus) { outline-color: var(--danger) }
		}
		/* Checkboxes draw their box on :before, so the danger color is applied in the Checkboxes region below. */


		/*┌─────────────────╮
		  |Buttons          |
		  └─────────────────╯*/
		:is(.button, button, input:is([type=button],[type=submit],[type=reset])) {
			box-sizing: border-box; font-size: var(--button-font-size); user-select: none; text-align: center; color: var(--text);
			font-weight: var(--button-weight); text-transform: var(--button-transform); letter-spacing: var(--button-tracking);
			align-items: center; justify-content: center;
			transition: var(--button-transition);

			&:not([disabled]) { cursor: pointer }
			&:not(.square) { border-radius: var(--radius) }
			&:not(.flat) {
				border: var(--secondary-border); background: var(--secondary-bg);
				line-height: normal; padding: 1px var(--button-pad-md); /* 1px matches the UA's <button> padding so an a.button is the same height */
			}

			/* Button Hover/Focus */
			&:not([disabled],.no-hover,.no-effects):is(:hover,.hover,.selected,[aria-pressed=true]) {
				background: var(--secondary-bg-hover); border: var(--border-width) solid var(--secondary-border-hover);
				color: var(--invert);
				transform: var(--button-hover-lift); box-shadow: var(--button-hover-shadow);
			}
			&:not(.no-focus,.no-effects):is(:focus-visible,.focus) { outline: var(--focus-ring); outline-offset: -1px; z-index: 2 }
			&:is([disabled]) { cursor: default; opacity: .5; filter: saturate(.5) }

			/* Button Primary */
			&.primary {
				&:not(.flat) { background: var(--primary-bg); border: var(--primary-border) }
				&:not(.flat) { color: var(--primary-text) }

				&:is(:active,:hover,.active,.hover,.selected,[aria-pressed=true]):not([disabled],.no-hover,.no-effects) {
					background: var(--primary-bg-hover); border: var(--primary-border-hover); color: var(--primary-text) }
				&:not(.no-focus,.no-effects):is(:focus-visible,.focus){
					outline: var(--focus-ring-primary); outline-offset: -1px; z-index: 2 }
			}

			/* Button Colors, peers of .primary and never combined with it.  .danger is a solid fill so a
			   destructive action is unmistakable; .warning and .success are an outline in the status
			   color that fills on hover. */
			&.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-text) }
			&.warning { border-color: var(--warning); color: var(--warning) }
			&.success { border-color: var(--success); color: var(--success) }
			&:is(.danger, .warning, .success):not([disabled],.no-hover,.no-effects):is(:hover,.hover,.selected,[aria-pressed=true]) { color: var(--primary-text) }
			&.danger:not([disabled],.no-hover,.no-effects):is(:hover,.hover,.selected,[aria-pressed=true]) { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-text) }
			&.warning:not([disabled],.no-hover,.no-effects):is(:hover,.hover,.selected,[aria-pressed=true]) { background: var(--warning); border-color: var(--warning) }
			&.success:not([disabled],.no-hover,.no-effects):is(:hover,.hover,.selected,[aria-pressed=true]) { background: var(--success); border-color: var(--success) }


			/*┌─────────────────╮
			  |Button Status    |
			  └─────────────────╯*/
			/* Progress feedback after the label: .loading spins, .done shows a check, .failed a warning.
			   (.success / .danger are the button COLORS above — a different axis.) */
			/* TODO: Let inputs have status also. */
			&:is(.loading,.done,.failed) { position: relative;
				display: inline-flex;
				/* TODO: Use the same logic on other sizes of buttons. */
				padding-left: calc(var(--button-pad-md) - .5rem);
				padding-right: calc(var(--button-pad-md) - .5rem);
				&:after { position: relative; top: .125rem; left: .25rem; }
				&.primary:after { filter: invert(100%) }
			}

			&.loading:after {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path style="transform-origin: center" fill="currentColor" d="M13 2v2c4.39.54 7.5 4.53 6.96 8.92A8.014 8.014 0 0 1 13 19.88v2c5.5-.6 9.45-5.54 8.85-11.03C21.33 6.19 17.66 2.5 13 2m-2 0c-1.96.18-3.81.95-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68V2M4.26 5.67A9.81 9.81 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9L4.26 5.67M2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8.002 8.002 0 0 1 4.06 13h-2m5 5.37l-1.39 1.37A9.994 9.994 0 0 0 11 22v-2a8.002 8.002 0 0 1-3.9-1.63h-.04Z"><animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="2s" repeatCount="indefinite" /></path></svg>');
			}
			&.done:after {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92c-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93c-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68v-2M4.26 5.67A9.885 9.885 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9L4.26 5.67M15.5 8.5l-4.88 4.88l-2.12-2.12l-1.06 1.06l3.18 3.18l5.94-5.94L15.5 8.5M2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8.002 8.002 0 0 1 4.06 13h-2m5.04 5.37l-1.43 1.37A9.994 9.994 0 0 0 11 22v-2a8.002 8.002 0 0 1-3.9-1.63Z"/></svg>');
			}
			&.failed:after {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 2v2c4.39.54 7.5 4.53 6.96 8.92A8.014 8.014 0 0 1 13 19.88v2c5.5-.6 9.45-5.54 8.85-11.03C21.33 6.19 17.66 2.5 13 2m-2 0c-1.96.18-3.81.95-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68v-2M4.26 5.67A9.81 9.81 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9L4.26 5.67M2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8.002 8.002 0 0 1 4.06 13h-2m5 5.37l-1.39 1.37A9.994 9.994 0 0 0 11 22v-2a8.002 8.002 0 0 1-3.9-1.63h-.04M13 13V7h-2v6h2m0 4v-2h-2v2h2Z"/></svg>');
			}


			/*┌─────────────────╮
			  |Button Sizes     |
			  └─────────────────╯*/

			/* Small buttons. */
			/* We calculate how much vertical padding space is left after using line height and border: */
			&.sm {
				min-height: var(--control-sm); padding: calc((var(--control-sm) - 1lh) / 2 - var(--border-width)) calc(var(--control-sm) / 2)
			}

			/* Big buttons. */
			&.lg {
				height: var(--control-lg); padding: calc((var(--control-lg) - 1lh) / 2 - var(--border-width)) var(--button-pad-lg)
			}

			/* Huge buttons */
			&.xl {
				height: var(--control-xl); padding: calc((var(--control-xl) - 1lh) / 2 - var(--border-width)) var(--button-pad-xl)
			}
		}

		/* Icon buttons render as flex so their icon + label center vertically.  The button rule above
		   already declares align-items/justify-content: center, but the default (non-flex) display left
		   them inert — a raw <svg> sat on the text baseline.  Scoped to icon-bearing buttons so plain
		   full-width text buttons keep their normal block/inline-block flow.
		   A flex box drops the space between an icon and its label, so the gap puts it back, the same
		   .375rem a toolbar button has.  :not([hidden]), as every display rule here: a hidden icon
		   button must stay gone. */
		:is(.button, button):not([hidden]):has(> svg, > .icon) { display: inline-flex; gap: .375rem }

		/* Links styled as buttons are inline-flex so their label centers vertically like a real <button>'s does. */
		a:is(.button, .button:hover) { text-decoration: none; display: inline-flex }
		a.button[disabled] { pointer-events: none }


		/*┌─────────────────╮
		  |Input Sizes      |
		  └─────────────────╯*/
		:is(button, .button, input, select).sm {
			height: var(--control-sm); /* Needed for <select> to get it to shrink its height. */
		}

		input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]),
		.input, select, textarea {

			/* Put input[type=number] outside the padding */
			&::-webkit-inner-spin-button { position: relative; left: var(--control-pad-md); transform-origin: 100% 50%; height: var(--control-md); }

			/* TODO: spinner scaling depends on inherited font size, which is unknown  */
			&.sm { min-height: var(--control-sm); padding: calc((var(--control-sm) - 1lh) / 2 - 2 * var(--border-width)) calc(var(--control-sm) / 4) }
			&.lg { min-height: var(--control-lg); font-size: var(--font-size-lg); padding: calc((var(--control-lg) - 1lh) / 2 - 2 * var(--border-width)) var(--control-pad-lg);

				/* Make input type number spinners bigger.  TODO: What about Firefox/Safari? */
				&::-webkit-inner-spin-button { position: relative; left: var(--control-pad-lg); height: var(--control-lg)  }
			}
			&.xl { min-height: var(--control-xl); font-size: var(--font-size-xl); padding: calc((var(--control-xl) - 1lh) / 2 - 2 * var(--border-width)) var(--control-pad-xl);
				&::-webkit-inner-spin-button { position: relative; left: var(--control-pad-xl); height: var(--control-xl) /* Make spinners bigger */ }
			}
		}


		/*┌─────────────────╮
		  |Flat             |
		  └─────────────────╯*/
		/* Flat Buttons + Inputs have no bg, border, or padding.  Good for toolbars. */
		:is(input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]),
			.input, select, textarea, button, .button).flat {
			border: var(--border-width) solid transparent; background: transparent;
		}
		:is(button, .button, [type=button],[type=reset],[type=submit]):not([disabled]).flat {
			/* Flat/toolbar buttons stay flat on interaction: a gray wash on hover, and when toggled
			   on, the selection wash in the primary ink, so "on" reads as on.  The extra .flat class
			   outweighs the general button rule's solid fill. */
			&:is(:hover, .hover):not(.no-hover, .no-effects) {
				background: var(--hover-bg); border-color: transparent; color: var(--text) }
			&:is(.selected, .active, [aria-pressed=true]) {
				background: var(--selected-bg); border-color: transparent; color: var(--primary-fg) }
		}
		/* A trailing .caret marks a flat button as a dropdown: a small, faint chevron. */
		:is(button, .button).flat > .caret { display: inline-flex; width: .6875rem; height: .6875rem; margin-left: -.125rem; opacity: .6;
			> svg { width: 100%; height: 100% } }

		/* A secondary button on the background with a line border instead of the gray fill, for
		   actions beside a .primary on a pane (a details pane's Download beside Edit). */
		:is(.button, button).outline:not(.flat, .primary) { background: var(--background); border: var(--border);
			&:not([disabled],.no-hover,.no-effects):is(:hover,.hover) { background: var(--hover-bg); border: var(--border); color: var(--text) }
		}

		input[type=range] { accent-color: var(--primary) }
		/* How far some work has got: a thin track filled in the primary color. */
		progress { appearance: none; display: block; width: 100%; height: .375rem; border: none; border-radius: var(--radius-full);
			overflow: hidden; background: var(--shade2); color: var(--primary);
			&::-webkit-progress-bar { background: var(--shade2) }
			&::-webkit-progress-value { background: var(--primary); transition: width .2s }
			&::-moz-progress-bar { background: var(--primary) }
		}
		.input:focus-within :focus-within { outline: none !important }


		/*┌─────────────────╮
		  |Checkboxes       |
		  └─────────────────╯*/
		/* Allow us to customize the border on checkboxes when they're invalid. */
		[type=checkbox] {
			appearance:none; outline: none; content: none; margin: 0; vertical-align: text-top;
			/* As a flex item (a direct .row/.col/.group child), the input becomes a flex container
			   that centers the square its ::before draws.  Without this the input's box is a
			   font-tall line box with the square hanging from its baseline, so the row's
			   align-items:center centers the invisible line box and the visible square sits
			   ~2px high of the label text. */
			:is(.row, .col, .group) > & { display: inline-flex; align-items: center; justify-content: center }
			&:before { content: "✓"; box-sizing: border-box;
				align-items: center; justify-content: center; color: transparent; background: var(--input-bg);
				display: inline-flex; width: .9rem; height: .9rem; font: bold .75rem Arial; line-height: 0;}
			&:not(.flat,.square):before { border-radius: var(--radius) }
			&:not(.flat):before { border: var(--input-border) }
			&:user-invalid:before { border-color: var(--danger) } /* E.g. a required checkbox left unchecked, after the user has touched it. */
			&:not(.no-focus):is(:focus-visible,.focus):before { outline: var(--focus-ring); outline-offset: -1px; z-index: 2; position: relative } /* relative needed for z-index to work */

			/* Checkbox gets primary style when checked. */
			&:checked:not(:disabled):before { color: var(--primary-text); background: var(--primary-bg) }
			&:checked:disabled:before { color: var(--shade4); background: var(--disabled-bg) }
			&:checked:is(:focus-visible,.focus):before { outline: var(--focus-ring-primary) }

			/* Make checkboxes the size of .sm, .lg, and .xl input heights */
			&.sm:before {
				width: var(--control-sm);
				height: var(--control-sm);
				font-size: calc(var(--control-sm) * .75) }
			&.md:before {
				width: var(--control-md);
				height: var(--control-md);
				font-size: calc(var(--control-md) * .75) }
			&.lg:before {
				width: var(--control-lg);
				height: var(--control-lg);
				font-size: calc(var(--control-lg) * .75) }
			&.xl:before {
				width: var(--control-xl);
				height: var(--control-xl);
				font-size: calc(var(--control-xl) * .75) }
		}
	}
}


/*┌─────────────────╮
  |Components       |
  └─────────────────╯*/
@layer eternium.components {
	/* Page scroll locks behind any open modal dialog; :has() needs no open-counter. */
	body:has(dialog:modal) { overflow: hidden }

	.eternium, .eternium-style {

		/* Experimental: Dialog */
		dialog { background: var(--popup-bg); color: var(--text);
			border: var(--border-width) solid light-dark(var(--card-border-color), var(--popup-border-color)); border-radius: var(--radius-lg);
			box-shadow: var(--shadow-lg), var(--popup-highlight);
			&::backdrop { background: var(--backdrop) }
		}

		/* Card */
		.card { background: var(--card-bg); box-shadow: var(--shadow);
			&:not(.square) { border-radius: var(--radius-lg) }
			&:not(.flat) { border: var(--card-border) }
		}

		/* A button that looks like a select: a field's box naming the value, with an arrow, for a
		   choice made in a panel or a menu rather than a native list.  In the components layer, so
		   it holds over the base button's fill and hover. */
		:is(button, .button).select-button { display: flex; align-items: center; gap: .375rem; height: var(--control-md);
			padding: 0 .5rem; font: inherit; font-weight: normal; text-align: start; color: var(--text);
			border: var(--input-border); border-radius: var(--radius); background: var(--input-bg);
			&::after { content: '▾'; margin-left: auto; opacity: .6 }
			&:disabled { background: var(--disabled-bg) } }

		/*┌─────────────────╮
		  |Alerts           |
		  └─────────────────╯*/
		:is(.alert-info, .alert-success, .alert-warning, .alert-danger) {
			display: inline-flex; align-items: center;
			min-height: var(--control-md); padding-left: var(--button-pad-md); padding-right: var(--button-pad-md);
			border: var(--border-width) solid; border-radius: var(--radius);
			&.lg { min-height: var(--control-lg) }
			&.xl { min-height: var(--control-xl) }
			/* An empty alert is hidden, so a form can mount its error line unconditionally and just
			   set textContent. */
			&:empty { display: none }
		}
		.alert-info { background: var(--info-tint); border-color: var(--info-border); color: var(--info) }
		.alert-success { background: var(--success-tint); border-color: var(--success-border); color: var(--success) }
		.alert-warning { background: var(--warning-tint); border-color: var(--warning-border); color: var(--warning) }
		.alert-danger { background: var(--danger-tint); border-color: var(--danger-border); color: var(--danger) }

		/*┌─────────────────╮
		  |Badges + Dots    |
		  └─────────────────╯*/
		/* Experimental: Small status label, pill-shaped.  Put .badge on a <button> for an interactive chip. */
		/* A badge's colors, as variables any element can paint itself with: .badge-fill takes them
		   without the pill shape (a color picker's rows and box). */
		:is(.badge, .badge-fill) { --badge-bg: var(--shade1); --badge-border: var(--shade2); --badge-fg: var(--text);
			&.success { --badge-bg: var(--success-tint); --badge-border: var(--success-border); --badge-fg: var(--success) }
			&.warning { --badge-bg: var(--warning-tint); --badge-border: var(--warning-border); --badge-fg: var(--warning) }
			&.danger { --badge-bg: var(--danger-tint); --badge-border: var(--danger-border); --badge-fg: var(--danger) }
			&.info { --badge-bg: var(--info-tint); --badge-border: var(--info-border); --badge-fg: var(--info) }
			&.violet { --badge-bg: light-dark(#f3e8ff, #2e1a47); --badge-border: light-dark(#d8b4fe, #6b3fa0); --badge-fg: light-dark(#7e22ce, #d8b4fe) }
		}
		.badge { display: inline-flex; align-items: center; gap: .3em;
			padding: .1em .6em; font-size: var(--font-size-xs); font-weight: 600; line-height: 1.6;
			background: var(--badge-bg); border: var(--border-width) solid var(--badge-border); color: var(--badge-fg);
			&:not(.square) { border-radius: var(--radius-full) }
		}
		.badge-fill { background: var(--badge-bg); border-color: var(--badge-border); color: var(--badge-fg) }
		/* A count on a button, such as how many filters apply: a small pill in the primary color,
		   or the danger color with .danger (unsaved changes). */
		.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
			padding: 0 .3rem; box-sizing: border-box; border-radius: var(--radius-full); background: var(--primary-bg);
			color: var(--primary-text); font-size: var(--font-size-xs); font-weight: 600; line-height: 1;
			&.danger { background: var(--danger); color: var(--danger-text) } }
		/* Key hints (ui/KeyHints.ts): while Ctrl is held, an element with data-key-hint shows the key
		   that reaches it in a small cap in the primary color, laid over the element's start where
		   its first icon is (hidden meanwhile; a <tool-bar-item>'s sits in its <slot>).  Nothing
		   moves or changes width, though a cap may cover the start of a name.  The element needs a
		   position of its own (a .tab has one), and --key-hint-left moves the cap from its left
		   padding edge to where its icon starts. */
		:root.key-hints & [data-key-hint] {
			> :is(svg, img):first-of-type, > slot > :is(svg, img):first-of-type { visibility: hidden }
			&::before { content: attr(data-key-hint); position: absolute; z-index: 1; left: var(--key-hint-left, 0); top: 50%; translate: 0 -50%;
				display: grid; place-items: center; box-sizing: border-box; min-width: var(--icon-size); height: var(--icon-size); padding: 0 .125rem;
				border-radius: 3px; background: var(--primary-bg); color: var(--primary-text); font-size: .6875rem; font-weight: 700; line-height: 1;
				pointer-events: none }
		}

		/* Experimental: Status circle for "● Online" style indicators.  Colored via the status classes or currentColor. */
		.dot { display: inline-block; width: .55em; height: .55em; border-radius: var(--radius-full); background: currentColor;
			&.success { background: var(--success) }
			&.warning { background: var(--warning) }
			&.danger { background: var(--danger) }
			&.info { background: var(--info) }
		}

		/*┌─────────────────╮
		  |Tabs             |
		  └─────────────────╯*/
		/* Underline tab strip.  Children are typically buttons; mark the active one .selected.
		   Labels are muted until hovered; the selected tab takes the primary color and a 2px
		   underline that sits on the strip's border. */
		.tabs:not([hidden]) { display: flex; gap: var(--space-lg); border-bottom: var(--border);
			> * { border: none; background: transparent; border-radius: 0; color: var(--text-muted); cursor: pointer;
				font-weight: 650; font-size: var(--font-size-sm);
				padding: var(--space-2xs) 0; margin-bottom: calc(-1 * var(--border-width));
				border-bottom: 2px solid transparent }
			> :is(:hover,.hover):not([disabled]) { color: var(--text) }
			> .selected { color: var(--primary-fg); border-bottom-color: var(--primary-fg) }
		}

		/*┌─────────────────╮
		  |Labels           |
		  └─────────────────╯*/
		/* Experimental: Uppercase micro-label for captions and section eyebrows. */
		.label-caps { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase;
			letter-spacing: .05em; opacity: .75; user-select: none }

		/*┌─────────────────╮
		  |Toolbar          |
		  └─────────────────╯*/
		/* The one toolbar chrome, shared by plain-div bars, the <tool-bar> web component
		   (which adds overflow-into-menu behavior and applies this class to itself), and
		   DockPanel's tab rows.  Row height comes from --bar-height so a single token
		   rescales every bar; a bar that needs a bottom edge adds its own 1px border
		   BELOW that height (parked dock toolbars get the border from the dock instead).
		   Two button styles, chosen by the author per button:
		   - .flat = quiet action (icon or text): a rounded --bar-button-size square (wider
		     with text) centered in the bar, gray wash on hover, selection wash when on.  A
		     trailing .caret is a small chevron (a dropdown).
		   - anything else (Save, selects, inputs) keeps its normal rounded, bordered
		     control chrome at --control-md, vertically centered in the bar. */
		.toolbar:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap;
			gap: var(--space-2xs); min-height: var(--bar-height); padding: 0 var(--space-2xs);

			/* Spacing, one rule for every bar (a command bar, a pane header, a page's toolbar):
			   - inside a button, its icon and its label are .375rem apart;
			   - flat buttons sit close (the bar's gap), their hover washes telling them apart;
			   - a boxed control (a filled or bordered button, a select, a field, a segmented
			     switch) keeps .25rem more on each side, except at the bar's ends, so two boxes, or
			     a box and a flat button, never read as one.  Joined controls (.group) are left be. */
			:is(button, .button) { justify-content: center; gap: .375rem }
			:is(button:not(.flat), .button:not(.flat), select, .input, .group.segmented):not(:where(.group > *)) {
				margin-inline: .25rem;
				&:first-child { margin-left: 0 }
				&:last-child { margin-right: 0 } }
			/* :not([hidden]) so a hidden flat button really is gone.  Setting display here at all
			   overrides the UA's `[hidden] { display: none }` (author styles beat UA styles), and
			   every bar that hides a button as a capability gate — CodeEditor's outline,
			   occurrences, diagnostics and help; a tool-bar's "gone entirely" state — was leaving
			   it on screen.  Every other display rule in this file is guarded the same way. */
			:is(button, .button).flat:not([hidden]) { height: var(--bar-button-size); min-height: 0;
				min-width: var(--bar-button-size); padding: 0; border-radius: var(--radius-md);
				display: inline-flex; align-items: center; gap: .375rem; font-size: var(--font-size-sm);
				/* Icon-only buttons (a lone svg or .icon child) stay square via the min-width
				   above; buttons showing text get side padding instead. */
				&:not(:has(> :is(svg, .icon):only-child)) { padding: 0 .5rem 0 .4375rem }
			}
			:is(button, .button) > svg { width: var(--icon-size); height: var(--icon-size) }
			/* A thin separator line between groups of buttons; <tool-bar> turns one into a menu
			   separator when the buttons around it fold into its ⌄ menu. */
			.divider:not([hidden]) { flex: 0 0 var(--border-width); align-self: center; height: 1.125rem; margin: 0 .3125rem;
				background: var(--border-color); overflow: hidden; color: transparent }

			/* Pin chromed controls to the control height so an inherited line-height
			   can't grow them past it and unbalance the row. */
			:is(select, .input, button:not(.flat), .button:not(.flat),
				input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range])) {
				height: var(--control-md); min-height: 0 }
		}

		/*┌─────────────────╮
		  |Grouped          |
		  └─────────────────╯*/
		/* Grouped inputs + buttons share borders */
		.group:not([hidden]) { display: flex }
		.group > * { min-width: 0 }  /* shrink to fit so a wide joined row can't overflow */
		.group > :is(:not(:first-child), .group-left),
		.group > :is(:not(:first-child), .group-left) :is(input, .input, select, textarea, button),
		.group > input[type=checkbox]:is(.sm,.md,.lg,.xl):is(:not(:first-child), .group-left):before,
		.group > :is(:not(:first-child), .group-left) input[type=checkbox]:is(.sm,.md,.lg,.xl):before {
			border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
		}
		.group > :is(:not(:last-child), .group-right),
		.group > :is(:not(:last-child), .group-right) :is(input, .input, select, textarea, button),
		.group > input[type=checkbox]:is(.sm,.md,.lg,.xl):is(:not(:last-child), .group-right):before,
		.group > :is(:not(:last-child), .group-right) input[type=checkbox]:is(.sm,.md,.lg,.xl):before {
			border-top-right-radius: 0; border-bottom-right-radius: 0;
		}

		/* A segmented control: a .group of buttons on a tinted track, the selected one raised.  The
		   selection changes background and color only, never weight, so switching moves nothing.
		   Give each button an icon (hidden) and a <span class="bar-label">; a narrow .command-bar
		   shows the icons instead.
		   <div class="group segmented"><button class="selected">Details</button><button>Icons</button></div> */
		.group.segmented:not([hidden]) { padding: 2px; gap: 2px; border-radius: calc(var(--radius-md) + 2px); flex: 0 0 auto;
			align-items: center; background: light-dark(var(--shade1), var(--shade2));
			> :is(button, .button) { height: calc(var(--bar-button-size) - 2px); min-height: 0; padding: 0 .6875rem; gap: .375rem;
				border: none; background: none; box-shadow: none;
				border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--text); display: inline-flex; align-items: center;
				> :is(svg, .icon) { display: none }
				&:not([disabled]):is(:hover, .hover) { background: color-mix(in oklab, var(--background) 55%, transparent) }
				&:not([disabled]):is(.selected, [aria-pressed=true]) { background: light-dark(var(--background), var(--shade4)); color: var(--invert);
					box-shadow: 0 1px 2px var(--shadow-color), 0 0 0 1px light-dark(#0000000d, #ffffff14) }
			}
		}

		/*┌─────────────────╮
		  |Data table       |
		  └─────────────────╯*/
		/* One border around the whole table, and then right and bottom borders on each cell that's not the last in the row/column.
		 * Table rows (tr) must be direct children of thead/tbody/tfoot.
		 * To quickly give a table a different padding size, you can set style="--table-padding: 1rem 2rem" */
		/* border-box: a .data-table stretched to 100% of a scroll container must fit its own
		   1px side borders inside that width — content-box made every such table overflow by
		   2px, leaving a permanent horizontal scrollbar. */
		.data-table { border-collapse: collapse; background: var(--table-bg); border: var(--table-border); font-size: inherit; box-sizing: border-box;
			> :is(thead,.thead) > :is(tr,.tr) > :is(th,.th) { vertical-align: bottom }
			> :is(tbody,.tbody,tfoot,.tfoot) > :is(tr,.tr) > :is(th,.th) { vertical-align: top }
			> :is(thead,.thead,tbody,.tbody,tfoot,.tfoot) {
				> :is(tr,.tr) {
					> :is(th,.th) { padding: var(--table-padding); background: var(--table-header-bg);
						text-align: left; font-weight: 500; white-space: nowrap }
					> :is(td,.td) { padding: var(--table-padding) }
					> :is(th,.th,td,.td):not(:last-child) { border-right: var(--table-border) }
				}
				> :is(tr,.tr):not(:last-child) > :is(th,.th,td,.td) { border-bottom: var(--table-border) }
			}

			:is(tr,.tr).selected > :is(td,.td),
			:is(td,.td).selected { background: var(--primary); border-color: var(--primary-hover) !important; color: var(--primary-text) }
		}
		/* A table that sits straight on the page instead of raised as a card in dark mode, set on
		   the table or any element around it: the page's background, and the page's band for
		   striped rows.  The Files listing and the Database page use it, so their panes match. */
		.table-on-page { --table-bg: var(--background); --table-row-alt-bg: var(--row-alt-bg) }
		/* Zebra rows: .striped on a <table>, or on a .data-table grid of .tbody/.tr rows, draws a
		   faint band behind every other body row.  The band goes on the row, so whatever a cell
		   paints itself (a hover wash, a selection) shows over it.  A plain table sits on the page and
		   takes the page's band (--row-alt-bg); a .data-table is a card in dark mode and takes the
		   card's (--table-row-alt-bg, which .table-on-page sets back to the page's).  The DataTable
		   grid and the Files listing band their rows themselves, with the same colors, because their
		   pinned cells must take the band too.
		   <table class="striped">…</table> */
		table.striped > tbody > tr:nth-child(even of tr) { background: var(--row-alt-bg) }
		.data-table.striped > :is(tbody, .tbody) > :is(tr, .tr):nth-child(even of :is(tr, .tr)) { background: var(--table-row-alt-bg) }


		/*┌─────────────────╮
		  |Breadcrumb       |
		  └─────────────────╯*/
		/* A path as clickable segments in a field-like box.  A .breadcrumb-sep between segments can
		   open that level's siblings; .breadcrumb-more stands for leading segments folded away when
		   narrow; clicking .breadcrumb-blank can turn the box into a text field (.editing, holding an
		   input).  The current segment is bold, and every segment reserves its bold width (the hidden
		   copy of data-label), so navigating never shifts the row.  A .breadcrumb-icon puts an icon
		   before a segment's text, a .breadcrumb-sep.inert is only a separator, with nothing to list,
		   and a .menu.breadcrumb-suggest popover lists suggestions under the field while typing.
		   A bar that is also a search box shows a .breadcrumb-hint at its blank end (.hinted), muted
		   words with a search icon that replaces them when the bar is short (.icon); its field form
		   can hold a .breadcrumb-field-icon and a .breadcrumb-lead before the input,
		   .breadcrumb-field-tools after it, and .breadcrumb-tools behind a divider at its end, whose
		   .tool-label and .caret hide when the bar is under 36rem (not .bar-label, which a command
		   bar hides when it is under 64rem: the path gives way before these do).
		   <nav class="breadcrumb"><a class="breadcrumb-segment" data-label="docs"><span>docs</span></a>
		     <button class="breadcrumb-sep">›</button> … <span class="breadcrumb-blank"></span></nav> */
		.breadcrumb:not([hidden]) { flex: 1; min-width: 0; display: flex; align-items: center; height: 1.875rem; box-sizing: border-box;
			padding: 0 2px 0 3px; border: var(--border); border-radius: calc(var(--radius-md) + 1px);
			background: var(--input-bg); overflow: hidden; font-size: var(--font-size-md);
			/* Folded segments carry [hidden]; a button display rule would otherwise bring them back. */
			> [hidden] { display: none }
			&:hover { border-color: var(--shade3) }
			&.editing { border-color: var(--primary-fg); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-fg) 22%, transparent);
				container: breadcrumb-field / inline-size; cursor: text;
				/* The segments' own font: a selection is painted exactly as tall as the font, and a
				   monospace font's slashes and tall letters reach its top edge, so it looked cut off. */
				> input { flex: 1; min-width: 4rem; height: 1.625rem; min-height: 0; border: none; outline: none; background: none; box-shadow: none;
					padding: 0 .5rem; font: inherit; color: var(--invert);
					&::placeholder { color: var(--text-muted); opacity: .8 } }
				/* A search keeps its field open after it loses the focus: then it drops the ring. */
				&:not(:focus-within) { border-color: var(--border-color); box-shadow: none }
				> .breadcrumb-field-icon { flex: none; display: inline-flex; padding-left: .3125rem; color: var(--text-muted);
					> svg { width: var(--icon-size); height: var(--icon-size) } }
				/* What the search looks in (the database page's table), muted, before the text. */
				> .breadcrumb-lead { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .3125rem; padding-left: .4375rem;
					color: var(--text-muted); white-space: nowrap; overflow: hidden;
					> * { flex: none }
					svg { width: .9375rem; height: .9375rem } }
				:is(.breadcrumb-field-tools, .breadcrumb-tools) { flex: none; display: flex; align-items: center; gap: .125rem;
					button:not([hidden]) { height: 1.5rem; min-height: 0; padding: 0 .3125rem; border: none; background: none; box-shadow: none;
						display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); white-space: nowrap; font-size: var(--font-size-sm);
						border-radius: calc(var(--radius-md) - 1px);
						&:hover { background: var(--hover-bg); color: var(--text) }
						> svg { width: var(--icon-size); height: var(--icon-size); flex: none }
						> .caret svg { width: .625rem; height: .625rem } } }
				> .breadcrumb-field-tools { padding-right: .25rem }
				> .breadcrumb-tools { align-self: stretch; padding: 0 .125rem 0 .25rem; border-left: var(--border) }
			}
			/* On a touch screen the bar scrolls sideways instead of folding (ui/Breadcrumb.ts), and
			   sliding it back shows what has scrolled away, so it shows no "…".  An icon-only root
			   stays pinned at the start, and once the bar is scrolled ([data-scrolled]) the segments
			   going under it fade, as they fade into the far end when the bar is scrolled back.  The
			   blank end stays wide enough to tap. */
			@media (pointer: coarse) {
				&:not(.editing) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 0;
					&::after { content: ''; position: sticky; right: 0; z-index: 1; flex: 0 0 1rem; margin-left: -1rem; align-self: stretch;
						background: linear-gradient(to right, transparent, var(--input-bg)); pointer-events: none }
				}
				/* The root's -3px shadow covers the bar's left padding, which segments would show
				   through. */
				> .breadcrumb-segment.root:not(.current) { position: sticky; left: 0; z-index: 1; flex-shrink: 0;
					background: var(--input-bg); box-shadow: -3px 0 0 var(--input-bg) }
				&[data-scrolled] > .breadcrumb-segment.root:not(.current)::after { content: ''; position: absolute; left: 100%; top: 0; bottom: 0;
					width: .5rem; height: auto; visibility: visible; background: linear-gradient(to left, transparent, var(--input-bg)); pointer-events: none }
				> .breadcrumb-blank { min-width: 3rem }
				/* A search box's icon stays at the right end, with the path scrolling under a short fade
				   just before it, so the path shows as close to the icon as it can; the whole end, a
				   little wider than the icon, takes the tap.  The bar's own fade at its end steps aside. */
				&:has(> .breadcrumb-blank.hinted)::after { content: none }
				> .breadcrumb-blank.hinted { position: sticky; right: 0; z-index: 1; flex: 1 0 auto; box-sizing: border-box; min-width: 2.25rem;
					padding: 0 .5rem 0 .5rem; background: linear-gradient(to right, transparent, var(--input-bg) .5rem) }
				/* The field form's buttons, a finger's width wide, and its text 16px, below which a
				   phone's browser zooms the page in on focus. */
				&.editing :is(.breadcrumb-field-tools, .breadcrumb-tools) button:not([hidden]) { min-width: 2.25rem; justify-content: center }
				&.editing > input { font-size: max(16px, 1em) }
			}
		}
		/* Segments and their arrows are buttons, so a click or a drag across them selects no text. */
		:is(.breadcrumb-segment, .breadcrumb-sep, .breadcrumb-more) { user-select: none }
		.breadcrumb-segment:not([hidden]) { display: inline-grid; align-items: center; height: 1.5rem; padding: 0 .4375rem; flex: 0 0 auto;
			border-radius: calc(var(--radius-md) - 1px); cursor: pointer; white-space: nowrap; color: var(--text); text-decoration: none;
			> *, &::after { grid-area: 1 / 1 }
			&::after { content: attr(data-label); font-weight: 600; visibility: hidden; height: 0; overflow: hidden }
			&:hover { background: var(--hover-bg) }
			&.current { font-weight: 600; color: var(--invert) }
			&.root { display: inline-flex; gap: .3125rem; padding: 0 .3125rem; color: var(--text-muted); flex-shrink: 1; min-width: 0;
				&::after { content: none }
				> span { min-width: 0; overflow: hidden; text-overflow: ellipsis } /* the site's name, alone at the root */
				&:hover { color: var(--text) }
				> svg { width: var(--icon-size); height: var(--icon-size) }
			}
		}
		.breadcrumb-icon { display: inline-flex; align-items: center; gap: .3125rem;
			> svg { width: .9375rem; height: .9375rem; color: var(--text-muted) } }
		.breadcrumb-sep:not([hidden]), .breadcrumb-more:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
			height: 1.5rem; min-height: 0; padding: 0; border: none; border-radius: calc(var(--radius-md) - 1px); background: none;
			color: var(--text-muted); cursor: pointer;
			&:hover { background: var(--hover-bg); color: var(--text) }
		}
		.breadcrumb-sep:not([hidden]) { width: 1.125rem;
			> svg { width: .75rem; height: .75rem; transition: rotate .12s }
			&.selected { background: var(--shade2); color: var(--text);
				> svg { rotate: 90deg }
			}
			&.inert { cursor: default; &:hover { background: none; color: var(--text-muted) } }
		}
		.breadcrumb-more { letter-spacing: 1px }
		.breadcrumb-blank:not([hidden]) { flex: 1; align-self: stretch; min-width: 1.25rem; display: flex; align-items: center; padding-left: .625rem;
			cursor: text; font-size: var(--font-size-xs); color: transparent; white-space: nowrap; overflow: hidden;
			&:hover { color: var(--text-muted) }
			/* The hint is never cut off: the blank end is at least as wide as it, so a bar too short
			   for the words overflows, and Breadcrumb swaps them for the icon. */
			&.hinted { justify-content: flex-end; min-width: max-content; padding-right: .4375rem; overflow: visible; color: var(--text-muted);
				&:hover { color: var(--text) } }
		}
		.breadcrumb-hint { position: relative; display: inline-flex; align-items: center; font-size: var(--font-size-sm); white-space: nowrap;
			--key-hint-left: calc(-1 * var(--icon-size) - .3125rem); /* its key hint just before the words */
			> svg { display: none; width: var(--icon-size); height: var(--icon-size) }
			&.icon { > span { display: none } > svg { display: block } } }
		/* Under 36rem a bar's tools keep their icons and counts. */
		@container breadcrumb-field (width < 36rem) { .breadcrumb-tools :is(.tool-label, .caret) { display: none } }
		/* The suggestions under the typed path stop short of a menu's full height.  The selector names
		   .menu and [popover] to outrank the .menu[popover] rule further down. */
		.menu.breadcrumb-suggest[popover] { max-height: 24rem;
			/* Its hints say where a row is and what a search found, not a key, so a finger sees them
			   too.  A row too long for the list cuts its hint short first, then its name. */
			> .menu-item { > .menu-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
				> .menu-hint { display: inline; flex: 0 100 auto; min-width: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } }
			/* A row drawn as a button: the phone's "Search packages for …" over the tables. */
			> .menu-item.suggest-button { min-height: 3rem; margin: .125rem .375rem .375rem; border-radius: var(--radius-md);
				background: color-mix(in oklab, var(--primary-fg) 12%, transparent); color: var(--primary-fg);
				> .menu-hint { color: inherit; opacity: .8 } } }

		/*┌─────────────────╮
		  |Panes            |
		  └─────────────────╯*/
		/* A side pane that describes rather than lists (Details, Columns, a column's Format): the
		   pane tint, with the bars' hover wash, since one mixed from the page's color barely shows
		   on it. */
		.side-pane { background: var(--pane-bg); --hover-bg: var(--chrome-hover-bg) }

		/* A page's command bar: one full-width toolbar row across the top of a workspace, holding the
		   tools of whatever the workspace is showing.  Its flat buttons are a little larger than in
		   other bars. */
		.command-bar:not([hidden]) { display: flex; align-items: center; gap: .25rem; min-height: var(--command-bar-height); box-sizing: border-box;
			padding: 0 .5rem; border-bottom: var(--border); background: var(--chrome-bg); --hover-bg: var(--chrome-hover-bg); --bar-button-size: 1.75rem;
			container: command-bar / inline-size;
			/* Each part takes the room its tools need, and a .breadcrumb the rest.  Bars never wrap
			   here: one row is the point. */
			> * { min-width: 0 }
			.toolbar { flex-wrap: nowrap; padding: 0 }
		}
		/* The page's own ends of its command bar (ui/CommandBarEnds.ts): the lead, a sidebar toggle, a
		   divider and the page's navigation, and the trail, a divider and the other sidebar's toggle.
		   The lead keeps the room its contents need (the address folds its own segments down to their
		   least), so a narrow bar folds the tools beside it, or moves them under their tab, rather than
		   drawing the two over each other.  A phone's row holds nothing but the lead, whose address
		   then folds into "…" to fit. */
		.command-bar-lead:not([hidden]) { display: flex; align-items: center; flex: 1 1 auto; min-width: min-content;
			&[data-phone] { min-width: 0 } }
		/* A phone's address row: the address ends as far from the screen's edge as it sits from the
		   row's top and bottom, which gives it a little more room. */
		.command-bar:has(> .command-bar-lead[data-phone]) { padding-right: calc((var(--command-bar-height) - 1.875rem) / 2) }
		.command-bar-trail:not([hidden]) { flex: 0 0 auto }
		/* A phone's address row while its address is a search field: the panel button and the
		   navigation's own buttons (Up) step aside, so the field has the whole row. */
		.command-bar:has(> .command-bar-lead[data-phone] .breadcrumb.editing) {
			> :not(.command-bar-lead), > .command-bar-lead > :not(:has(.breadcrumb)), .command-bar-lead :has(> bread-crumb) > :not(bread-crumb) { display: none }
		}
		/* Once the tools have moved under their tab, the bar holds only its lead and trail, and the
		   address is all that can give way: its segments stop counting toward the lead's least
		   width, which leaves the room the address keeps for itself (Breadcrumb's 20rem), so its
		   leading segments fold into "…" rather than pushing the trail out of view. */
		.command-bar:not(:has(> :not(.command-bar-lead, .command-bar-trail))) .command-bar-lead .breadcrumb { contain: inline-size }
		/* A left sidebar's toggle: the right one's icon, facing left. */
		.sidebar-toggle-left { transform: scaleX(-1) }
		/* Filters shown as removable pills, under a search field: one .chip per filter, an ×
		   button inside it, and a .chip-clear link to remove them all.  A chip that is itself a
		   <button> (or holds one as its label) opens what it describes.
		   <div class="chips"><span class="chip">qcStatus is passed<button class="flat">×</button></span>
		     <button class="flat chip-clear">Clear filters</button></div> */
		.chips:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
			font-size: var(--font-size-sm); color: var(--text-muted) }
		.chip:not([hidden]) { display: inline-flex; align-items: center; gap: .125rem; padding: .0625rem .125rem .0625rem .5rem;
			border-radius: var(--radius-full); background: var(--shade1); border: var(--border-width) solid var(--shade2); color: var(--text);
			font-size: var(--font-size-sm); white-space: nowrap; max-width: 100%;
			> .chip-label { overflow: hidden; text-overflow: ellipsis; cursor: pointer; border: none; background: none; padding: 0;
				min-height: 0; font: inherit; color: inherit }
			> button:last-child { padding: 0; min-height: 0; width: 1.125rem; height: 1.125rem; border-radius: var(--radius-full);
				color: var(--text-muted); flex: none;
				&:hover { color: var(--text); background: var(--hover-bg) } }
			svg { width: .75rem; height: .75rem; display: block }
		}
		.chip-clear:not([hidden]) { padding: 0 .25rem; min-height: 0; color: var(--primary-fg); background: none; border: none;
			font-size: var(--font-size-sm); cursor: pointer; &:hover { text-decoration: underline } }

		/* What can be done with the items ticked in a list, shown in a bar in place of its usual
		   tools while any are ticked: a tinted pill holding the count, its buttons and an × that
		   unticks them.  <span class="selection-group"><b>3 selected</b><button class="flat">…</button></span> */
		.selection-group:not([hidden]) { display: inline-flex; align-items: center; gap: .125rem; flex: 0 0 auto;
			height: var(--bar-button-size); padding: 0 .125rem 0 .625rem; box-sizing: border-box; border-radius: var(--radius-md);
			background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--selected-border-color); white-space: nowrap;
			font-size: var(--font-size-sm); --hover-bg: color-mix(in oklab, var(--selected-bg), var(--primary) 14%);
			> b { font-weight: 600; margin-right: .375rem; color: var(--invert) }
			:is(button, .button).flat:not([hidden]) { height: calc(var(--bar-button-size) - .25rem) }
		}

		/* A command bar narrower than 64rem gives the room to its path: buttons there show only their
		   icons, and their tooltips still name them.  A button's text takes part when it is a
		   .bar-label, and a segmented control shows its icons instead. */
		@container command-bar (width < 64rem) {
			:is(button, .button) > .bar-label { display: none }
			.group.segmented > :is(button, .button):has(> .bar-label) { padding: 0 .4375rem;
				> :is(svg, .icon) { display: block } }
		}

		/* A pane's header row: its title (or its tabs, in a .tab-strip) on the left and the pane's own
		   tools at the right end of the same row.  Every header is --panel-header-height tall, as is a
		   .list-header, so a row of panes reads as one line.  A header holding a .tab-strip is tinted,
		   and its bottom line is an overlay the selected tab covers, so the tab opens into the pane. */
		.panel-header:not([hidden]) { display: flex; min-height: var(--panel-header-height); flex: 0 0 auto;
			box-sizing: border-box; border-bottom: var(--border); background: var(--chrome-bg); --hover-bg: var(--chrome-hover-bg); min-width: 0;
			> .toolbar { min-height: 0; flex-wrap: nowrap; padding: 0 .25rem; gap: 0;
				:is(button, .button).flat:not([hidden], :hover, .hover, .selected, [aria-pressed=true]) { color: var(--text-muted) }
			}
			&:has(> .tab-strip) { position: relative; border-bottom: none; background: var(--tab-strip-bg);
				&::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-width);
					background: var(--border-color); z-index: 1; pointer-events: none }
			}
		}
		/* A pane's title, in muted text.  When the title is the pane's drag handle, it shows six grip
		   dots and a wash on hover (.grip-dots), so dragging is discoverable without dots everywhere. */
		/* It fills the header's height, square, so its hover wash reads as the pane's handle. */
		.panel-title:not([hidden]) { display: inline-flex; align-items: center; align-self: stretch; gap: .3125rem; flex: 0 1 auto; min-width: 0;
			padding: 0 .5rem 0 .5625rem; margin: 0; user-select: none;
			font-size: var(--font-size-sm); color: var(--text-muted); white-space: nowrap;
			span:not(.grip-dots) { overflow: hidden; text-overflow: ellipsis }
			.grip-dots { width: .625rem; height: .875rem; flex: 0 0 auto; opacity: 0;
				background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 5px 5px }
			&:has(.grip-dots) { cursor: grab;
				&:hover { background: var(--hover-bg); color: var(--text);
					.grip-dots { opacity: .7 } }
			}
		}

		/* A strip of tabs that join their content (Chrome's shape): the selected tab takes the
		   content's color (--background) with side and top borders and no bottom border; inactive tabs
		   have no fill, muted text, a rounded-top wash on hover and thin separators between inactive
		   neighbours.  Tabs stop short of the strip's top and shrink with an ellipsis.  A .tab-close
		   shows on the selected and hovered tab and always keeps its space, so hovering moves
		   nothing.  .active on the strip marks the tab a command bar is serving with a primary line.
		   <div class="panel-header"><div class="tab-strip"><div class="tab selected"><span>Files</span>
		     <span class="tab-close">×</span></div>…</div></div> */
		.tab-strip:not([hidden]) { flex: 0 1 auto; min-width: 0; min-height: 0; align-self: stretch; display: flex; align-items: flex-end; gap: 0;
			padding: 0 .25rem 0 .375rem; overflow-x: clip;
			/* Tight inside, so a squeezed tab keeps as much of its name as it can: little padding, small
			   gaps, and a close box no wider than its icon. */
			.tab { position: relative; display: inline-flex; align-items: center; gap: .3125rem; height: var(--tab-height); box-sizing: border-box;
				padding: 0 .25rem 0 .5rem; --key-hint-left: .5rem; margin: 0; flex: 0 1 auto; min-width: 3.5rem; max-width: 16rem; font-weight: normal;
				font-size: var(--font-size-sm); color: var(--text-muted); white-space: nowrap; cursor: default; background: none;
				border: var(--border-width) solid transparent; border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0;
				.tab-name { overflow: hidden; text-overflow: ellipsis }
				:is(svg, img):not(.tab-close *) { width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto }
				&::after { content: ''; position: absolute; right: calc(-1 * var(--border-width)); top: 50%; width: var(--border-width); height: 1rem;
					translate: 0 -50%; background: var(--shade3); pointer-events: none }
				&:is(.selected, :hover, .hover, :last-child)::after, &:has(+ :is(.selected, :hover, .hover))::after { opacity: 0 }
				&:not(.selected):is(:hover, .hover) { color: var(--text); background: var(--tab-hover-bg) }
				&.selected { z-index: 2; color: var(--invert); background: var(--background); border-color: var(--border-color) }
				.tab-close { display: inline-flex; flex: 0 0 auto; width: 1.125rem; height: 1.25rem; margin-left: -.125rem; align-items: center; justify-content: center;
					border-radius: var(--radius); color: inherit; opacity: .6; visibility: hidden; cursor: pointer;
					> svg { width: var(--icon-size); height: var(--icon-size) } /* the size of a pane header's close */
					&:hover { background: var(--tab-hover-bg); opacity: 1 }
				}
				&:is(.selected, :hover, .hover) .tab-close { visibility: visible }
			}
			&.active .tab.selected { border-top-color: var(--primary-fg); box-shadow: inset 0 var(--border-width) 0 var(--primary-fg) }
		}

		/* A view's bottom line: counts on the left, state, a .zoom slider and the view's switch on
		   the right. */
		.statusbar:not([hidden]) { display: flex; align-items: center; gap: .875rem; min-height: var(--statusbar-height); flex: 0 0 auto; box-sizing: border-box;
			padding: 0 .625rem 0 .875rem; border-top: var(--border); background: var(--chrome-bg); --hover-bg: var(--chrome-hover-bg); font-size: var(--font-size-xs); color: var(--text-muted);
			font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
			b { font-weight: 600; color: var(--text) }
			> .zoom:not([hidden]) { display: inline-flex; align-items: center; gap: .25rem;
				> svg { width: .875rem; height: .875rem }
				> input[type=range] { width: 6rem; height: 1rem; min-height: 0; margin: 0 }
			}
			/* A text that gives way first: it ends in an ellipsis before the bar's controls are cut. */
			> .status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis }
			/* A switch here (how the view shows: Details | Icons, Data | Structure) is each choice's
			   icon and name on a track a little shorter than the bar.  A bar without room for the
			   names (.icons-only, which Toolbar.fitStatusBar sets) shows only the icons, the names
			   left to the tooltip and the screen reader.  The choice not in use is drawn muted, so
			   the one in use reads at a glance. */
			> .group.segmented:not([hidden]) > :is(button, .button) { height: calc(var(--statusbar-height) - .5rem); padding: 0 .5rem;
				font-size: inherit; color: var(--text-muted);
				> :is(svg, .icon) { display: block; flex: none; width: 1rem; height: 1rem }
				&:not([disabled]):is(.selected, [aria-pressed=true]) { color: var(--text) } }
			&.icons-only > .group.segmented > :is(button, .button) > .bar-label { display: none }
			@media (pointer: coarse) {
				> .group.segmented:not([hidden]) > :is(button, .button) { height: 1.75rem;
					> :is(svg, .icon) { width: 1.125rem; height: 1.125rem } }
			}
		}

		/*┌─────────────────╮
		  |Lists            |
		  └─────────────────╯*/
		/* Rows you point at and select: a listing, a tree, a result list.  Rows are inset from the
		   edges with rounded corners; hover is a gray wash, the selection a primary wash, always
		   outlined.  Columns are the page's business (grid-template-columns on the rows). */
		.item-list:not([hidden]) { display: flex; flex-direction: column; padding: 0 var(--space-sm) }
		.list-item:not([hidden]) { display: flex; align-items: center; min-height: var(--row-height); box-sizing: border-box;
			border-radius: var(--radius-md); cursor: default; user-select: none; color: var(--text);
			&:is(:hover, .hover) { background: var(--hover-bg) }
			&.selected { background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--selected-border-color) }
		}
		/* A name edited in place in a row (F2): exactly one text line tall, so the row keeps its
		   height, and outlined rather than bordered, since an outline takes no room. */
		input.rename-field { font: inherit; block-size: 1lh; min-block-size: 0; padding: 0 2px; border: none;
			outline: var(--border-width) solid var(--primary-fg); background: var(--background); user-select: text }
		/* A text field with buttons inside its box (InputWrapper: input-clearable, select-file and the
		   like).  The host paints the box (its .input class), so the inner input loses its own chrome,
		   with !important because eternium's input rules match the input itself and would draw a
		   second box.  It inherits only the size and family of the text, so a host sizing class (.lg)
		   reaches it while a bold <label> doesn't.  The focus and invalid rings, which eternium draws
		   on a focused input, go on the host, which only sees :focus-within. */
		.input-wrapper:not([hidden]) { display: inline-flex; align-items: center; gap: .25rem;
			> input { flex: 1 1 auto; min-width: 0; border: none !important; background: none !important; outline: none !important;
				padding: 0 !important; min-height: 0 !important; font-size: inherit !important; font-family: inherit !important;
				color: inherit !important }
			&:focus-within:not(.no-focus) { outline: var(--focus-ring); outline-offset: -1px; z-index: 2 }
			&:focus-within:has(input:invalid) { outline-color: var(--danger) } }
		/* A quiet icon button inside an .input-wrapper's box (browse, show the password). */
		.inline-button { flex: none; display: flex; align-items: center; justify-content: center;
			min-height: 0 !important; padding: 0 !important; color: inherit; opacity: .6;
			&:hover { opacity: 1 } }
		/* What a list or a pane says when it has nothing to show, as a table's own note does: muted
		   and centered.  With .fill it takes the room left in a flex column and centers in it. */
		.empty-message:not([hidden]) { padding: 1.5rem 1rem; color: var(--text-muted); text-align: center }
		.empty-message.fill:not([hidden]) { flex: 1; display: flex; align-items: center; justify-content: center }
		/* A round arrow over a side of a picture that steps to the one before or after it (the
		   lightbox, a picture tab).  The picture's box positions it. */
		.side-arrow:not([hidden]) { position: absolute; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; padding: 0;
			border: none; border-radius: 50%; background: #0009; color: #fff; cursor: pointer; display: grid; place-items: center;
			svg { width: 1.5rem; height: 1.5rem }
			&:hover { background: #000c } }
		.side-arrow-prev { left: .75rem }
		.side-arrow-next { right: .75rem }
		/* Zebra rows, as a file manager draws its details view: every other row gets a faint band
		   across the list's full width, under the inset, and hover and selection stay inset and
		   rounded on top of it.  The band sits behind the row (isolation keeps it inside the list),
		   and reaches out by the list's own side padding. */
		.item-list.striped:not([hidden]) { isolation: isolate;
			> .list-item:nth-child(even of .list-item) { position: relative;
				&::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--space-sm)); z-index: -1;
					background: var(--row-alt-bg); pointer-events: none }
			}
		}
		/* A list's sticky column header in the bars' gray, as a table's: muted labels whose separators
		   appear on hover. */
		.list-header:not([hidden]) { position: sticky; top: 0; z-index: 2; display: flex; align-items: stretch; height: var(--panel-header-height);
			box-sizing: border-box; padding: 0 var(--space-sm); background: var(--chrome-bg); --hover-bg: var(--chrome-hover-bg); border-bottom: var(--border);
			> * { display: flex; align-items: center; gap: .25rem; padding: 0 .625rem; position: relative; font-size: var(--font-size-sm);
				color: var(--text-muted); user-select: none; cursor: default }
			> :hover { color: var(--text); background: var(--hover-bg) }
			> .selected { color: var(--text) }
			> .selected > svg { width: .625rem; height: .625rem; color: var(--primary-fg) }
			> * + *::before { content: ''; position: absolute; left: 0; top: .5625rem; bottom: .5625rem; width: var(--border-width); background: var(--border-color); opacity: 0 }
			&:hover > * + *::before { opacity: 1 }
		}

		/* Label/value pairs in two columns (a details pane's properties). */
		.properties:not([hidden]) { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .3125rem .625rem; margin: 0;
			font-size: var(--font-size-sm); line-height: 1.4;
			> dt { color: var(--text-muted) }
			> dd { margin: 0; min-width: 0; overflow-wrap: break-word; color: var(--invert) }
		}
		/* A muted, normal-case section heading; .label-caps stays the uppercase eyebrow. */
		.subhead:not([hidden]) { display: block; font-size: var(--font-size-sm); color: var(--text-muted); font-weight: normal; margin: 0 }

		/*┌─────────────────╮
		  |Experimental     |
		  └─────────────────╯*/
		/* These may change in the future. */

		/* Rows of form controls rendered as one spreadsheet — the .data-table look for editable
		 * fields.  The container draws the outer border and the row/column separators; controls
		 * inside lose their own chrome and fill their cells, so the grid lines read as the cell
		 * borders.  Direct children are rows (lay them out yourself: grid or flex, no gap — the
		 * separators sit on cell edges); each row child is one cell.  A checkbox that is a cell
		 * fills the cell (no inner box); a .header row gets the table-header treatment. */
		.spreadsheet { border: var(--table-border); background: var(--input-bg); overflow-x: auto;
			&:not(.square) { border-radius: var(--radius) }
			> * { gap: 0 }
			> * + * { border-top: var(--table-border) }
			> .header > * { padding: var(--table-padding); background: var(--table-header-bg);
				font-weight: 500; white-space: nowrap }
			/* Strip each control's own frame so the grid lines are the only borders.  Both the
			   :where() and :not(:where(...)) keep this at ZERO specificity (a plain :not() would
			   raise it to 0,2,0), so the column-separator rule below still wins on border-left
			   even when a control IS a cell (a bare <input> as a row child).  The :not() stops the
			   strip from reaching controls inside a nested popover/dialog — those are separate
			   floating surfaces (e.g. a chooser panel parented in a cell), not spreadsheet cells,
			   so they keep their normal chrome. */
			:where(input:not([type=checkbox], [type=radio]), .input, select, textarea):not(:where([popover] *, dialog *)) {
				border: none; border-radius: 0; background: none;
				&[disabled] { background: var(--disabled-bg) }
			}
			/* Cells that ARE controls fill their track so the grid lines read as their borders. */
			> * > :is(input:not([type=checkbox], [type=radio]), .input, select, textarea) {
				width: 100%; height: 100% }
			/* A checkbox cell fills the cell; the grid lines are its frame, so drop the ::before
			   box border.  Unchecked reads as a blank cell, checked fills with the check colour. */
			> * > input[type=checkbox] { width: 100%; height: 100%; margin: 0;
				&::before { width: 100%; height: 100%; border: none; border-radius: 0 } }
			/* Vertical separators between every field — LAST so it beats the chrome reset's
			   border on control cells (equal specificity, later wins). */
			> * > * + * { border-left: var(--table-border) }
		}

		/* menu-item */
		/* A rounded row inside a menu: the selection wash on hover (the text keeps its color), and
		   an outline as well for keyboard focus.  No font size is set, so a menu inherits its
		   parent's font, and the row height follows it. */
		.menu-item {
			display: flex; align-items: center; min-height: 2.15em; box-sizing: border-box; padding: var(--menu-item-padding);
			gap: .5625rem; border-radius: var(--radius-md); color: var(--text);
			user-select: none; cursor: pointer; white-space: nowrap;
			/* Lit under the pointer, under a finger while it presses, and for keyboard focus only: a
			   row a click or tap focused would stay lit after the pointer leaves, and a finger's
			   :hover sticks to the last row tapped.  The parent of an OPEN submenu stays lit too: the
			   pointer crossing into the submenu takes :hover with it, and an unhighlighted parent
			   reads as the submenu belonging to nothing. */
			&:not(.disabled):is(:active, :focus-visible, .highlighted, :has(> .menu[popover]:popover-open)) { background: var(--selected-bg) }
			@media (hover: hover) { &:not(.disabled):hover { background: var(--selected-bg) } }
			&:focus { outline: none }
			&:focus-visible { box-shadow: inset 0 0 0 1px var(--selected-border-color) }
			&.disabled { opacity: .45; cursor: default;
				&:focus-visible { box-shadow: none }
				/* Its trailing actions still work (MenuItem.trailing), so only the rest is dimmed. */
				&:has(> .menu-trailing) { opacity: 1; > :not(.menu-trailing) { opacity: .45 } }
			}
			&.danger { color: var(--danger) }
			/* Where the person is now, in a list of places (Menu's MenuItem.current). */
			&.current { background: var(--selected-bg); font-weight: 600 }
			> .menu-lead { opacity: .85;
				> :is(svg, img) { width: var(--icon-size); height: var(--icon-size) }
			}
			&[aria-checked=true] > .menu-lead { color: var(--primary-fg); opacity: 1 }
			> .menu-label { flex: 1 }
			> .menu-hint { margin-left: auto; color: var(--text-muted); font-size: .85em; padding-left: 1.5rem }
			/* A right-aligned secondary action (MenuItem.trailing, e.g. a tab-close ×). */
			> .menu-trailing { margin-left: auto; opacity: .55; padding: 0 var(--space-2xs); font-weight: bold; line-height: 1;
				cursor: pointer; > svg { display: block } }
			> .menu-trailing:hover { opacity: 1 }
			> .menu-arrow { margin-right: calc(-1 * var(--space-2xs)); opacity: .6 }
			/* A folder's caret (MenuItem.expanded), turned down while it is open, as the Navigator's
			   tree draws one.  Every row of a menu with a folder has the column, and a folder's rows
			   step in by one column. */
			> .menu-caret { flex: none; width: 1rem; margin: 0 -.25rem 0 calc(var(--menu-depth, 0) * 1.5rem); color: var(--text-muted);
				> svg { width: 1rem; height: 1rem; transition: rotate .12s } }
			&[aria-expanded=true] > .menu-caret > svg { rotate: 90deg }
			/* Under a finger a row is 40px tall, its keyboard hint is left out, and its icon is a
			   little larger. */
			@media (pointer: coarse) {
				min-height: 2.5rem; font-size: 1rem;
				> .menu-hint { display: none }
				> .menu-lead > :is(svg, img) { width: 1.25rem; height: 1.25rem }
			}
		}

		/* Menu (popover) */
		/* Data-driven popup/context menus — ui/Menu.ts.  Top-layer popovers: no z-index, clipping, or click-out handling. */
		/* The surface floats on the raised card color with a soft shadow and a little padding, so the
		   rounded rows sit inside it. */
		&.menu[popover], .menu[popover] {
			position: fixed; inset: auto; margin: 0; padding: .25rem; box-sizing: border-box;
			min-width: 12rem; max-height: calc(100dvh - 1rem); overflow-y: auto;
			background: var(--popup-bg); color: var(--text); border: var(--popup-border);
			border-radius: calc(var(--radius-md) + 3px);
			box-shadow: 0 10px 30px light-dark(#0f172a26, #000c), 0 2px 6px light-dark(#0f172a14, #0008), var(--popup-highlight);
			/* Menu.ts focuses the surface when it opens; its rows show focus, the surface doesn't. */
			&:focus-visible { outline: none }
		}
		/* Submenus: anchored to the parent .menu-item via CSS anchor positioning (anchor-name pairs generated by Menu.ts).
		   position-area opens them top-aligned at the item's right edge; the fallbacks flip them at viewport edges. */
		.menu-item > .menu[popover] {
			margin-top: -.25rem; position-area: inline-end span-block-end;
			position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
		}
		.menu-sep { border-top: var(--border); margin: .25rem .375rem }
		/* The field above a long menu's rows that narrows them (Menu's filter option); .highlighted
		   marks the row its Enter picks. */
		.menu > .menu-filter { display: block; width: 100%; box-sizing: border-box; margin-bottom: .25rem }
		/* A menu's caption above its rows (Menu.ts's heading items): what the menu is for. */
		.menu-heading { padding: .375rem .75rem .25rem; font-size: .85em; color: var(--text-muted);
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none }

		/* Icon */
		.icon { font-size: var(--icon-size); display: flex; align-items: center; justify-content: center; line-height: 1;
			min-width: var(--icon-size); max-width: var(--icon-size); min-height: var(--icon-size); max-height: var(--icon-size);
			&:not([disabled]) { cursor: pointer;
				&.selected { color: var(--primary-hover) }
			}
		}

		/* Switch */
		/* A checkbox styled as a sliding toggle:  <input type="checkbox" class="switch">
		   The track is the checkbox's ::before and the knob its ::after, both sized in em of the
		   input's own font: the plain checkbox rule gives ::before the check mark's smaller font, so
		   the track takes it back, or the knob comes out bigger than the track's rounded end.  The
		   input is a flex box hugging its track, so the knob centers on the track in a flex row and
		   in running text alike.  The knob stays white in both modes, where the page's own dark
		   background would read as a hole in the track. */
		[type=checkbox].switch { position: relative; display: inline-flex; align-items: center; vertical-align: middle;
			&:before { content: ''; font-size: inherit; width: 2em; height: 1.1em; border-radius: var(--radius-full);
				background: var(--shade3); border: none; transition: background var(--speed) var(--ease) }
			&:after { content: ''; position: absolute; top: 50%; left: .14em; translate: 0 -50%;
				width: .84em; height: .84em; border-radius: var(--radius-full); background: #fff; box-shadow: 0 1px 2px #0003;
				transition: left var(--speed) var(--ease) }
			&:checked:before { background: var(--primary) }
			&:checked:after { left: 1.02em }
			&:disabled { opacity: .5 }
		}

		/* Console */
		/* A monospace output block, dark in light mode. */
		.console { font-family: var(--font-mono); font-size: var(--font-size-sm);
			background: light-dark(#14171a, var(--shade1)); color: light-dark(#d3dce3, var(--text));
			padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
			overflow: auto; white-space: pre-wrap }
	}
}


/*┌─────────────────╮
  |Utilities        |
  └─────────────────╯*/
@layer eternium.utilities {

	/* Show an element only in the light or only in the dark scheme (a logo or an icon drawn
	   differently for each).  The scheme is the [dark] attribute on any ancestor, usually <html>,
	   which sits outside the .eternium scope, so these two are unscoped. */
	.dark-only:not([dark] *) { display: none !important }
	[dark] .light-only { display: none !important }

	/* The element covering the whole window, over the page's menus and header (ui/FullScreen.ts,
	   which also asks the browser for its full screen).  Unscoped like the two above: the page
	   around the element may not be an .eternium scope. */
	.full-screen { position: fixed; inset: 0; z-index: 1000; margin: 0; background: var(--background) }

	/* Text and misc utilities. */
	.eternium, .eternium-style {
		.text-left { text-align: left }
		.text-right { text-align: right }
		.text-center { text-align: center }
		.text-justify { text-align: justify }

		/* Labels */
		.label { font-size: 85%; font-weight: bold; user-select: none }

		/* Small and muted.  .small matches the <small> element and Bootstrap's .small. */
		.small { font-size: .875em; line-height: 1.25 }
		.muted { opacity: .66 }
		.no-select { user-select: none }
	}

	.eternium, .eternium-layout {

		.min0 { min-width: 0; min-height: 0 } /* Allow size to collapse */
		.scroll-x { overflow-x: auto } /* Horizontal scroll for a table wider than its column */

		/**
		 * Experimental:
		 * Fill 100% of parent's size, but never more. */
		.fit {  min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100% }

		@media screen { .print { display: none } }
		@media print { .no-print { display: none } }

		/* Rows and column layout.  These can occur on the same element with :is(.eternium, .eternium-style)
		 * Unlike bootstrap, a col class will stack each of its children into a column,
		 * and having a col class for each item in a row isn't necessary.*/
		.row:not([hidden]) { display: flex; align-items: start }  /* align-items: start prevents stretching to available height */
		.col:not([hidden]) { display: flex; flex-direction: column; align-items: start }

		/* EXPERIMENTAL: opt-out of shrink-to-fit for one item, when its
		wrapper has no width/height pin but its content (e.g. an icon) must not be squeezed. */
		.noShrink { flex-shrink: 0 }

		/* Don't let children be wider than the column. */
		.col > * { max-width: 100% }

		/* Gaps */
		.gap-2xs { gap: var(--space-2xs) }
		.gap-xs { gap: var(--space-xs) }
		.gap-sm { gap: var(--space-sm) }
		.gap { gap: var(--space-md) }
		.gap-lg { gap: var(--space-lg) }
		.gap-xl { gap: var(--space-xl) }

		/* Pad */
		.pad-2xs { padding: var(--space-2xs) }
		.pad-xs { padding: var(--space-xs) }
		.pad-sm { padding: var(--space-sm) }
		.pad { padding: var(--space-md) }
		.pad-lg { padding: var(--space-lg) }
		.pad-xl { padding: var(--space-xl) }

		.pad-h-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs) }
		.pad-h-xs { padding-left: var(--space-xs); padding-right: var(--space-xs) }
		.pad-h-sm { padding-left: var(--space-sm); padding-right: var(--space-sm) }
		.pad-h { padding-left: var(--space-md); padding-right: var(--space-md) }
		.pad-h-lg { padding-left: var(--space-lg); padding-right: var(--space-lg) }
		.pad-h-xl { padding-left: var(--space-xl); padding-right: var(--space-xl) }

		.pad-v-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs) }
		.pad-v-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs) }
		.pad-v-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm) }
		.pad-v { padding-top: var(--space-md); padding-bottom: var(--space-md) }
		.pad-v-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg) }
		.pad-v-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }

		/* Alignment */
		.row.left { justify-content: start }
		.col.left { align-items: start }

		.row.right { justify-content: end }
		.col.right { align-items: end }

		.row.top { align-items: start }
		.col.top { justify-content: start }

		.row.bottom { align-items: end }
		.col.bottom { justify-content: end }

		:is(.row,.col).stretch { align-items: stretch }
		:is(.row,.col).stretch > * { flex: 1 }

		.row.stretch-h > * { flex: 1 }
		.row.stretch-v { align-items: stretch }

		.col.stretch-h { align-items: stretch }
		.col.stretch-v  > * { flex: 1 }

		.row:is(.center, .center-h) { justify-content: center }
		.col:is(.center, .center-h) { align-items: center }

		.row:is(.center, .center-v) { align-items: center }
		.col:is(.center, .center-v) { justify-content: center }

		/* Spacing */
		.space-between { justify-content: space-between }
		.space-around { justify-content: space-around }
		.space-evenly { justify-content: space-evenly }

		/* Wrap */
		.wrap { flex-wrap: wrap }
		:is(.no-wrap, .nowrap) { flex-wrap: nowrap; white-space: nowrap }


		/*┌─────────────────╮
		  |Dimensions       |
		  └─────────────────╯*/

		/* Pixel widths */
		.px10 { min-width: 10px; max-width: 10px }
		.px20 { min-width: 20px; max-width: 20px }
		.px30 { min-width: 30px; max-width: 30px }
		.px40 { min-width: 40px; max-width: 40px }
		.px50 { min-width: 50px; max-width: 50px }
		.px60 { min-width: 60px; max-width: 60px }
		.px70 { min-width: 70px; max-width: 70px }
		.px80 { min-width: 80px; max-width: 80px }
		.px90 { min-width: 90px; max-width: 90px }
		.px100 { min-width: 100px; max-width: 100px }
		.px120 { min-width: 120px; max-width: 120px }
		.px150 { min-width: 150px; max-width: 150px }
		.px200 { min-width: 200px; max-width: 200px }
		.px250 { min-width: 250px; max-width: 250px }
		.px300 { min-width: 300px; max-width: 300px }
		.px350 { min-width: 350px; max-width: 350px }
		.px400 { min-width: 400px; max-width: 400px }
		.px450 { min-width: 450px; max-width: 450px }
		.px500 { min-width: 500px; max-width: 500px }
		.px550 { min-width: 550px; max-width: 550px }
		.px600 { min-width: 600px; max-width: 600px }
		.px650 { min-width: 650px; max-width: 650px }
		.px700 { min-width: 700px; max-width: 700px }
		.px750 { min-width: 750px; max-width: 750px }
		.px800 { min-width: 800px; max-width: 800px }
		.px850 { min-width: 850px; max-width: 850px }
		.px900 { min-width: 900px; max-width: 900px }
		.px950 { min-width: 950px; max-width: 950px }
		.px1000 { min-width: 1000px; max-width: 1000px }

		/* Rem widths */
		.rem0-125 { min-width: 0.125rem; max-width: 0.125rem }
		.rem0-25 { min-width: 0.25rem; max-width: 0.25rem }
		.rem0-5 { min-width: 0.5rem; max-width: 0.5rem }
		.rem0-75 { min-width: 0.75rem; max-width: 0.75rem }
		.rem1 { min-width: 1rem; max-width: 1rem }
		.rem1-25 { min-width: 1.25rem; max-width: 1.25rem }
		.rem1-5 { min-width: 1.5rem; max-width: 1.5rem }
		.rem2 { min-width: 2rem; max-width: 2rem }
		.rem2-5 { min-width: 2.5rem; max-width: 2.5rem }
		.rem3 { min-width: 3rem; max-width: 3rem }
		.rem4 { min-width: 4rem; max-width: 4rem }
		.rem5 { min-width: 5rem; max-width: 5rem }
		.rem6 { min-width: 6rem; max-width: 6rem }
		.rem7 { min-width: 7rem; max-width: 7rem }
		.rem8 { min-width: 8rem; max-width: 8rem }
		.rem9 { min-width: 9rem; max-width: 9rem }
		.rem10 { min-width: 10rem; max-width: 10rem }
		.rem11 { min-width: 11rem; max-width: 11rem }
		.rem12 { min-width: 12rem; max-width: 12rem }
		.rem13 { min-width: 13rem; max-width: 13rem }
		.rem14 { min-width: 14rem; max-width: 14rem }
		.rem15 { min-width: 15rem; max-width: 15rem }
		.rem16 { min-width: 16rem; max-width: 16rem }
		.rem17 { min-width: 17rem; max-width: 17rem }
		.rem18 { min-width: 18rem; max-width: 18rem }
		.rem19 { min-width: 19rem; max-width: 19rem }
		.rem20 { min-width: 20rem; max-width: 20rem }
		.rem22 { min-width: 22rem; max-width: 22rem }
		.rem25 { min-width: 25rem; max-width: 25rem }
		.rem30 { min-width: 30rem; max-width: 30rem }

		/* Percents in thirds, fourths, and tenths.  The w-* aliases match Bootstrap. */
		.pc10 { width: 10% }
		.pc20 { width: 20% }
		.pc25, .w-25 { width: 25% }
		.pc30 { width: 30% }
		.pc33 { width: 33.333% }
		.pc40 { width: 40% }
		.pc50, .w-50 { width: 50% }
		.pc60 { width: 60% }
		.pc66 { width: 66.666% }
		.pc70 { width: 70% }
		.pc75, .w-75 { width: 75% }
		.pc80 { width: 80% }
		.pc90 { width: 90% }
		.pc100, .w-100 { width: 100% }

		/* Flex */
		.flex1 { flex: 1 }
		.flex2 { flex: 2 }
		.flex3 { flex: 3 }
		.flex4 { flex: 4 }
		.flex5 { flex: 5 }
		.flex6 { flex: 6 }
		.flex7 { flex: 7 }
		.flex8 { flex: 8 }
		.flex9 { flex: 9 }
		.flex10 { flex: 10 }
		.flex11 { flex: 11 }
		.flex12 { flex: 12 }
	}


	/*┌─────────────────╮
	  |Grid Mobile      |
	  └─────────────────╯*/
	@media (width < 768px) {

		.eternium, .eternium-layout {

			/* Row/Col */
			.row-mobile { display: flex; flex-direction: row; align-items: start; justify-content: start }
			.col-mobile { display: flex; flex-direction: column; align-items: start; justify-content: start }

			/* Gaps */
			.gap-2xs-mobile { gap: var(--space-2xs) }
			.gap-xs-mobile { gap: var(--space-xs) }
			.gap-sm-mobile { gap: var(--space-sm) }
			.gap-mobile { gap: var(--space-md) }
			.gap-lg-mobile { gap: var(--space-lg) }
			.gap-xl-mobile { gap: var(--space-xl) }

			/* Pad */
			.pad-2xs-mobile { padding: var(--space-2xs) }
			.pad-xs-mobile { padding: var(--space-xs) }
			.pad-sm-mobile { padding: var(--space-sm) }
			.pad-mobile { padding: var(--space-md) }
			.pad-lg-mobile { padding: var(--space-lg) }
			.pad-xl-mobile { padding: var(--space-xl) }

			.pad-h-2xs-mobile { padding-left: var(--space-2xs); padding-right: var(--space-2xs) }
			.pad-h-xs-mobile { padding-left: var(--space-xs); padding-right: var(--space-xs) }
			.pad-h-sm-mobile { padding-left: var(--space-sm); padding-right: var(--space-sm) }
			.pad-h-mobile { padding-left: var(--space-md); padding-right: var(--space-md) }
			.pad-h-lg-mobile { padding-left: var(--space-lg); padding-right: var(--space-lg) }
			.pad-h-xl-mobile { padding-left: var(--space-xl); padding-right: var(--space-xl) }

			.pad-v-2xs-mobile { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs) }
			.pad-v-xs-mobile { padding-top: var(--space-xs); padding-bottom: var(--space-xs) }
			.pad-v-sm-mobile { padding-top: var(--space-sm); padding-bottom: var(--space-sm) }
			.pad-v-mobile { padding-top: var(--space-md); padding-bottom: var(--space-md) }
			.pad-v-lg-mobile { padding-top: var(--space-lg); padding-bottom: var(--space-lg) }
			.pad-v-xl-mobile { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }

			/* Alignment */
			.row-mobile.left-mobile { justify-content: start }
			.col-mobile.left-mobile { align-items: start }

			.row-mobile.right-mobile { justify-content: end }
			.col-mobile.right-mobile { align-items: end }

			.row-mobile.top-mobile { align-items: start }
			.col-mobile.top-mobile { justify-content: start }

			.row-mobile.bottom-mobile { align-items: end }
			.col-mobile.bottom-mobile { justify-content: end }

			:is(.row-mobile,.col-mobile).stretch-mobile { align-items: stretch }
			:is(.row-mobile,.col-mobile).stretch-mobile > * { flex: 1 }

			:is(.row,.row-mobile).stretch-h-mobile > * { flex: 1 }
			.row-mobile.stretch-v-mobile { align-items: stretch }

			.col-mobile.stretch-h-mobile { align-items: stretch }
			.col-mobile.stretch-v-mobile > * { flex: 1 }

			.row-mobile:is(.center-mobile, .center-h-mobile) { justify-content: center }
			.col-mobile:is(.center-mobile, .center-h-mobile) { align-items: center }

			.row-mobile:is(.center-mobile, .center-v-mobile) { align-items: center }
			.col-mobile:is(.center-mobile, .center-v-mobile) { justify-content: center }

			/* Spacing */
			.space-between-mobile { justify-content: space-between }
			.space-around-mobile { justify-content: space-around }
			.space-evenly-mobile { justify-content: space-evenly }

			/* Wrap */
			.wrap-mobile { flex-wrap: wrap }
			:is(.no-wrap-mobile, .nowrap-mobile) { flex-wrap: nowrap; white-space: nowrap }


			/*┌─────────────────╮
			  |Dimensions       |
			  └─────────────────╯*/

			/* Pixel widths */
			.px10-mobile { min-width: 10px; max-width: 10px }
			.px20-mobile { min-width: 20px; max-width: 20px }
			.px30-mobile { min-width: 30px; max-width: 30px }
			.px40-mobile { min-width: 40px; max-width: 40px }
			.px50-mobile { min-width: 50px; max-width: 50px }
			.px60-mobile { min-width: 60px; max-width: 60px }
			.px70-mobile { min-width: 70px; max-width: 70px }
			.px80-mobile { min-width: 80px; max-width: 80px }
			.px90-mobile { min-width: 90px; max-width: 90px }
			.px100-mobile { min-width: 100px; max-width: 100px }
			.px120-mobile { min-width: 120px; max-width: 120px }
			.px150-mobile { min-width: 150px; max-width: 150px }
			.px200-mobile { min-width: 200px; max-width: 200px }
			.px250-mobile { min-width: 250px; max-width: 250px }
			.px300-mobile { min-width: 300px; max-width: 300px }
			.px350-mobile { min-width: 350px; max-width: 350px }
			.px400-mobile { min-width: 400px; max-width: 400px }
			.px450-mobile { min-width: 450px; max-width: 450px }
			.px500-mobile { min-width: 500px; max-width: 500px }
			.px550-mobile { min-width: 550px; max-width: 550px }
			.px600-mobile { min-width: 600px; max-width: 600px }
			.px650-mobile { min-width: 650px; max-width: 650px }
			.px700-mobile { min-width: 700px; max-width: 700px }
			.px750-mobile { min-width: 750px; max-width: 750px }
			.px800-mobile { min-width: 800px; max-width: 800px }
			.px850-mobile { min-width: 850px; max-width: 850px }
			.px900-mobile { min-width: 900px; max-width: 900px }
			.px950-mobile { min-width: 950px; max-width: 950px }
			.px1000-mobile { min-width: 1000px; max-width: 1000px }

			/* Rem widths */
			.rem0-125-mobile { min-width: 0.125rem; max-width: 0.125rem }
			.rem0-25-mobile { min-width: 0.25rem; max-width: 0.25rem }
			.rem0-5-mobile { min-width: 0.5rem; max-width: 0.5rem }
			.rem0-75-mobile { min-width: 0.75rem; max-width: 0.75rem }
			.rem1-mobile { min-width: 1rem; max-width: 1rem }
			.rem1-25-mobile { min-width: 1.25rem; max-width: 1.25rem }
			.rem1-5-mobile { min-width: 1.5rem; max-width: 1.5rem }
			.rem2-mobile { min-width: 2rem; max-width: 2rem }
			.rem2-5-mobile { min-width: 2.5rem; max-width: 2.5rem }
			.rem3-mobile { min-width: 3rem; max-width: 3rem }
			.rem4-mobile { min-width: 4rem; max-width: 4rem }
			.rem5-mobile { min-width: 5rem; max-width: 5rem }
			.rem6-mobile { min-width: 6rem; max-width: 6rem }
			.rem7-mobile { min-width: 7rem; max-width: 7rem }
			.rem8-mobile { min-width: 8rem; max-width: 8rem }
			.rem9-mobile { min-width: 9rem; max-width: 9rem }
			.rem10-mobile { min-width: 10rem; max-width: 10rem }
			.rem11-mobile { min-width: 11rem; max-width: 11rem }
			.rem12-mobile { min-width: 12rem; max-width: 12rem }
			.rem13-mobile { min-width: 13rem; max-width: 13rem }
			.rem14-mobile { min-width: 14rem; max-width: 14rem }
			.rem15-mobile { min-width: 15rem; max-width: 15rem }
			.rem16-mobile { min-width: 16rem; max-width: 16rem }
			.rem17-mobile { min-width: 17rem; max-width: 17rem }
			.rem18-mobile { min-width: 18rem; max-width: 18rem }
			.rem19-mobile { min-width: 19rem; max-width: 19rem }
			.rem20-mobile { min-width: 20rem; max-width: 20rem }
			.rem22-mobile { min-width: 22rem; max-width: 22rem }
			.rem25-mobile { min-width: 25rem; max-width: 25rem }
			.rem30-mobile { min-width: 30rem; max-width: 30rem }

			/* Percents in thirds, fourths, and tenths. */
			.pc10-mobile { width: 10% }
			.pc20-mobile { width: 20% }
			.pc25-mobile { width: 25% }
			.pc30-mobile { width: 30% }
			.pc33-mobile { width: 33.333% }
			.pc40-mobile { width: 40% }
			.pc50-mobile { width: 50% }
			.pc60-mobile { width: 60% }
			.pc66-mobile { width: 66.666% }
			.pc70-mobile { width: 70% }
			.pc75-mobile { width: 75% }
			.pc80-mobile { width: 80% }
			.pc90-mobile { width: 90% }
			.pc100-mobile { width: 100% }

			/* Flex */
			.flex1-mobile { flex: 1 }
			.flex2-mobile { flex: 2 }
			.flex3-mobile { flex: 3 }
			.flex4-mobile { flex: 4 }
			.flex5-mobile { flex: 5 }
			.flex6-mobile { flex: 6 }
			.flex7-mobile { flex: 7 }
			.flex8-mobile { flex: 8 }
			.flex9-mobile { flex: 9 }
			.flex10-mobile { flex: 10 }
			.flex11-mobile { flex: 11 }
			.flex12-mobile { flex: 12 }
		}
	}


	/*┌─────────────────╮
	  |Grid Tablet      |
	  └─────────────────╯*/
	@media (768px <= width < 1024px) {
		.eternium, .eternium-layout {

			/* Row/Col */
			.row-tablet { display: flex; flex-direction: row; align-items: start; justify-content: start }
			.col-tablet { display: flex; flex-direction: column; align-items: start; justify-content: start }

			/* Gaps */
			.gap-2xs-tablet { gap: var(--space-2xs) }
			.gap-xs-tablet { gap: var(--space-xs) }
			.gap-sm-tablet { gap: var(--space-sm) }
			.gap-tablet { gap: var(--space-md) }
			.gap-lg-tablet { gap: var(--space-lg) }
			.gap-xl-tablet { gap: var(--space-xl) }

			/* Pad */
			.pad-2xs-tablet { padding: var(--space-2xs) }
			.pad-xs-tablet { padding: var(--space-xs) }
			.pad-sm-tablet { padding: var(--space-sm) }
			.pad-tablet { padding: var(--space-md) }
			.pad-lg-tablet { padding: var(--space-lg) }
			.pad-xl-tablet { padding: var(--space-xl) }

			.pad-h-2xs-tablet { padding-left: var(--space-2xs); padding-right: var(--space-2xs) }
			.pad-h-xs-tablet { padding-left: var(--space-xs); padding-right: var(--space-xs) }
			.pad-h-sm-tablet { padding-left: var(--space-sm); padding-right: var(--space-sm) }
			.pad-h-tablet { padding-left: var(--space-md); padding-right: var(--space-md) }
			.pad-h-lg-tablet { padding-left: var(--space-lg); padding-right: var(--space-lg) }
			.pad-h-xl-tablet { padding-left: var(--space-xl); padding-right: var(--space-xl) }

			.pad-v-2xs-tablet { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs) }
			.pad-v-xs-tablet { padding-top: var(--space-xs); padding-bottom: var(--space-xs) }
			.pad-v-sm-tablet { padding-top: var(--space-sm); padding-bottom: var(--space-sm) }
			.pad-v-tablet { padding-top: var(--space-md); padding-bottom: var(--space-md) }
			.pad-v-lg-tablet { padding-top: var(--space-lg); padding-bottom: var(--space-lg) }
			.pad-v-xl-tablet { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }

			/* Alignment */
			.row-tablet.left-tablet { justify-content: start }
			.col-tablet.left-tablet { align-items: start }

			.row-tablet.right-tablet { justify-content: end }
			.col-tablet.right-tablet { align-items: end }

			.row-tablet.top-tablet { align-items: start }
			.col-tablet.top-tablet { justify-content: start }

			.row-tablet.bottom-tablet { align-items: end }
			.col-tablet.bottom-tablet { justify-content: end }

			:is(.row-tablet,.col-tablet).stretch-tablet { align-items: stretch }
			:is(.row-tablet,.col-tablet).stretch-tablet > * { flex: 1 }

			.row-tablet.stretch-h-tablet > * { flex: 1 }
			.row-tablet.stretch-v-tablet { align-items: stretch }

			.col-tablet.stretch-h-tablet { align-items: stretch }
			.col-tablet.stretch-v-tablet > * { flex: 1 }

			.row-tablet:is(.center-tablet, .center-h-tablet) { justify-content: center }
			.col-tablet:is(.center-tablet, .center-h-tablet) { align-items: center }

			.row-tablet:is(.center-tablet, .center-v-tablet) { align-items: center }
			.col-tablet:is(.center-tablet, .center-v-tablet) { justify-content: center }

			/* Spacing */
			.space-between-tablet { justify-content: space-between }
			.space-around-tablet { justify-content: space-around }
			.space-evenly-tablet { justify-content: space-evenly }

			/* Wrap */
			.wrap-tablet { flex-wrap: wrap }
			:is(.no-wrap-tablet, .nowrap-tablet) { flex-wrap: nowrap; white-space: nowrap }


			/*┌─────────────────╮
			  |Dimensions       |
			  └─────────────────╯*/

			/* Pixel widths */
			.px10-tablet { min-width: 10px; max-width: 10px }
			.px20-tablet { min-width: 20px; max-width: 20px }
			.px30-tablet { min-width: 30px; max-width: 30px }
			.px40-tablet { min-width: 40px; max-width: 40px }
			.px50-tablet { min-width: 50px; max-width: 50px }
			.px60-tablet { min-width: 60px; max-width: 60px }
			.px70-tablet { min-width: 70px; max-width: 70px }
			.px80-tablet { min-width: 80px; max-width: 80px }
			.px90-tablet { min-width: 90px; max-width: 90px }
			.px100-tablet { min-width: 100px; max-width: 100px }
			.px120-tablet { min-width: 120px; max-width: 120px }
			.px150-tablet { min-width: 150px; max-width: 150px }
			.px200-tablet { min-width: 200px; max-width: 200px }
			.px250-tablet { min-width: 250px; max-width: 250px }
			.px300-tablet { min-width: 300px; max-width: 300px }
			.px350-tablet { min-width: 350px; max-width: 350px }
			.px400-tablet { min-width: 400px; max-width: 400px }
			.px450-tablet { min-width: 450px; max-width: 450px }
			.px500-tablet { min-width: 500px; max-width: 500px }
			.px550-tablet { min-width: 550px; max-width: 550px }
			.px600-tablet { min-width: 600px; max-width: 600px }
			.px650-tablet { min-width: 650px; max-width: 650px }
			.px700-tablet { min-width: 700px; max-width: 700px }
			.px750-tablet { min-width: 750px; max-width: 750px }
			.px800-tablet { min-width: 800px; max-width: 800px }
			.px850-tablet { min-width: 850px; max-width: 850px }
			.px900-tablet { min-width: 900px; max-width: 900px }
			.px950-tablet { min-width: 950px; max-width: 950px }
			.px1000-tablet { min-width: 1000px; max-width: 1000px }

			/* Rem widths */
			.rem0-125-tablet { min-width: 0.125rem; max-width: 0.125rem }
			.rem0-25-tablet { min-width: 0.25rem; max-width: 0.25rem }
			.rem0-5-tablet { min-width: 0.5rem; max-width: 0.5rem }
			.rem0-75-tablet { min-width: 0.75rem; max-width: 0.75rem }
			.rem1-tablet { min-width: 1rem; max-width: 1rem }
			.rem1-25-tablet { min-width: 1.25rem; max-width: 1.25rem }
			.rem1-5-tablet { min-width: 1.5rem; max-width: 1.5rem }
			.rem2-tablet { min-width: 2rem; max-width: 2rem }
			.rem2-5-tablet { min-width: 2.5rem; max-width: 2.5rem }
			.rem3-tablet { min-width: 3rem; max-width: 3rem }
			.rem4-tablet { min-width: 4rem; max-width: 4rem }
			.rem5-tablet { min-width: 5rem; max-width: 5rem }
			.rem6-tablet { min-width: 6rem; max-width: 6rem }
			.rem7-tablet { min-width: 7rem; max-width: 7rem }
			.rem8-tablet { min-width: 8rem; max-width: 8rem }
			.rem9-tablet { min-width: 9rem; max-width: 9rem }
			.rem10-tablet { min-width: 10rem; max-width: 10rem }
			.rem11-tablet { min-width: 11rem; max-width: 11rem }
			.rem12-tablet { min-width: 12rem; max-width: 12rem }
			.rem13-tablet { min-width: 13rem; max-width: 13rem }
			.rem14-tablet { min-width: 14rem; max-width: 14rem }
			.rem15-tablet { min-width: 15rem; max-width: 15rem }
			.rem16-tablet { min-width: 16rem; max-width: 16rem }
			.rem17-tablet { min-width: 17rem; max-width: 17rem }
			.rem18-tablet { min-width: 18rem; max-width: 18rem }
			.rem19-tablet { min-width: 19rem; max-width: 19rem }
			.rem20-tablet { min-width: 20rem; max-width: 20rem }
			.rem22-tablet { min-width: 22rem; max-width: 22rem }
			.rem25-tablet { min-width: 25rem; max-width: 25rem }
			.rem30-tablet { min-width: 30rem; max-width: 30rem }

			/* Percents in thirds, fourths, and tenths. */
			.pc10-tablet { width: 10% }
			.pc20-tablet { width: 20% }
			.pc25-tablet { width: 25% }
			.pc30-tablet { width: 30% }
			.pc33-tablet { width: 33.333% }
			.pc40-tablet { width: 40% }
			.pc50-tablet { width: 50% }
			.pc60-tablet { width: 60% }
			.pc66-tablet { width: 66.666% }
			.pc70-tablet { width: 70% }
			.pc75-tablet { width: 75% }
			.pc80-tablet { width: 80% }
			.pc90-tablet { width: 90% }
			.pc100-tablet { width: 100% }

			/* Flex */
			.flex1-tablet { flex: 1 }
			.flex2-tablet { flex: 2 }
			.flex3-tablet { flex: 3 }
			.flex4-tablet { flex: 4 }
			.flex5-tablet { flex: 5 }
			.flex6-tablet { flex: 6 }
			.flex7-tablet { flex: 7 }
			.flex8-tablet { flex: 8 }
			.flex9-tablet { flex: 9 }
			.flex10-tablet { flex: 10 }
			.flex11-tablet { flex: 11 }
			.flex12-tablet { flex: 12 }
		}
	}


	/*┌─────────────────╮
	  |Grid Desktop+    |
	  └─────────────────╯*/
	@media (1024px <= width) {
		.eternium, .eternium-layout {

			/* Row/Col */
			.row-desktop { display: flex; flex-direction: row; align-items: start; justify-content: start }
			.col-desktop { display: flex; flex-direction: column; align-items: start; justify-content: start }

			/* Gaps */
			.gap-2xs-desktop { gap: var(--space-2xs) }
			.gap-xs-desktop { gap: var(--space-xs) }
			.gap-sm-desktop { gap: var(--space-sm) }
			.gap-desktop { gap: var(--space-md) }
			.gap-lg-desktop { gap: var(--space-lg) }
			.gap-xl-desktop { gap: var(--space-xl) }

			/* Pad */
			.pad-2xs-desktop { padding: var(--space-2xs) }
			.pad-xs-desktop { padding: var(--space-xs) }
			.pad-sm-desktop { padding: var(--space-sm) }
			.pad-desktop { padding: var(--space-md) }
			.pad-lg-desktop { padding: var(--space-lg) }
			.pad-xl-desktop { padding: var(--space-xl) }

			.pad-h-2xs-desktop { padding-left: var(--space-2xs); padding-right: var(--space-2xs) }
			.pad-h-xs-desktop { padding-left: var(--space-xs); padding-right: var(--space-xs) }
			.pad-h-sm-desktop { padding-left: var(--space-sm); padding-right: var(--space-sm) }
			.pad-h-desktop { padding-left: var(--space-md); padding-right: var(--space-md) }
			.pad-h-lg-desktop { padding-left: var(--space-lg); padding-right: var(--space-lg) }
			.pad-h-xl-desktop { padding-left: var(--space-xl); padding-right: var(--space-xl) }

			.pad-v-2xs-desktop { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs) }
			.pad-v-xs-desktop { padding-top: var(--space-xs); padding-bottom: var(--space-xs) }
			.pad-v-sm-desktop { padding-top: var(--space-sm); padding-bottom: var(--space-sm) }
			.pad-v-desktop { padding-top: var(--space-md); padding-bottom: var(--space-md) }
			.pad-v-lg-desktop { padding-top: var(--space-lg); padding-bottom: var(--space-lg) }
			.pad-v-xl-desktop { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }

			/* Alignment */
			.row-desktop.left-desktop { justify-content: start }
			.col-desktop.left-desktop { align-items: start }

			.row-desktop.right-desktop { justify-content: end }
			.col-desktop.right-desktop { align-items: end }

			.row-desktop.top-desktop { align-items: start }
			.col-desktop.top-desktop { justify-content: start }

			.row-desktop.bottom-desktop { align-items: end }
			.col-desktop.bottom-desktop { justify-content: end }

			:is(.row-desktop,.col-desktop).stretch-desktop { align-items: stretch }
			:is(.row-desktop,.col-desktop).stretch-desktop > * { flex: 1 }

			.row-desktop.stretch-h-desktop > * { flex: 1 }
			.row-desktop.stretch-v-desktop { align-items: stretch }

			.col-desktop.stretch-h-desktop { align-items: stretch }
			.col-desktop.stretch-v-desktop > * { flex: 1 }

			.row-desktop:is(.center-desktop, .center-h-desktop) { justify-content: center }
			.col-desktop:is(.center-desktop, .center-h-desktop) { align-items: center }

			.row-desktop:is(.center-desktop, .center-v-desktop) { align-items: center }
			.col-desktop:is(.center-desktop, .center-v-desktop) { justify-content: center }

			/* Spacing */
			.space-between-desktop { justify-content: space-between }
			.space-around-desktop { justify-content: space-around }
			.space-evenly-desktop { justify-content: space-evenly }

			/* Wrap */
			.wrap-desktop { flex-wrap: wrap }
			:is(.no-wrap-desktop, .nowrap-desktop) { flex-wrap: nowrap; white-space: nowrap }


			/*┌─────────────────╮
			  |Dimensions       |
			  └─────────────────╯*/

			/* Pixel widths */
			.px10-desktop { min-width: 10px; max-width: 10px }
			.px20-desktop { min-width: 20px; max-width: 20px }
			.px30-desktop { min-width: 30px; max-width: 30px }
			.px40-desktop { min-width: 40px; max-width: 40px }
			.px50-desktop { min-width: 50px; max-width: 50px }
			.px60-desktop { min-width: 60px; max-width: 60px }
			.px70-desktop { min-width: 70px; max-width: 70px }
			.px80-desktop { min-width: 80px; max-width: 80px }
			.px90-desktop { min-width: 90px; max-width: 90px }
			.px100-desktop { min-width: 100px; max-width: 100px }
			.px120-desktop { min-width: 120px; max-width: 120px }
			.px150-desktop { min-width: 150px; max-width: 150px }
			.px200-desktop { min-width: 200px; max-width: 200px }
			.px250-desktop { min-width: 250px; max-width: 250px }
			.px300-desktop { min-width: 300px; max-width: 300px }
			.px350-desktop { min-width: 350px; max-width: 350px }
			.px400-desktop { min-width: 400px; max-width: 400px }
			.px450-desktop { min-width: 450px; max-width: 450px }
			.px500-desktop { min-width: 500px; max-width: 500px }
			.px550-desktop { min-width: 550px; max-width: 550px }
			.px600-desktop { min-width: 600px; max-width: 600px }
			.px650-desktop { min-width: 650px; max-width: 650px }
			.px700-desktop { min-width: 700px; max-width: 700px }
			.px750-desktop { min-width: 750px; max-width: 750px }
			.px800-desktop { min-width: 800px; max-width: 800px }
			.px850-desktop { min-width: 850px; max-width: 850px }
			.px900-desktop { min-width: 900px; max-width: 900px }
			.px950-desktop { min-width: 950px; max-width: 950px }
			.px1000-desktop { min-width: 1000px; max-width: 1000px }

			/* Rem widths */
			.rem0-125-desktop { min-width: 0.125rem; max-width: 0.125rem }
			.rem0-25-desktop { min-width: 0.25rem; max-width: 0.25rem }
			.rem0-5-desktop { min-width: 0.5rem; max-width: 0.5rem }
			.rem0-75-desktop { min-width: 0.75rem; max-width: 0.75rem }
			.rem1-desktop { min-width: 1rem; max-width: 1rem }
			.rem1-25-desktop { min-width: 1.25rem; max-width: 1.25rem }
			.rem1-5-desktop { min-width: 1.5rem; max-width: 1.5rem }
			.rem2-desktop { min-width: 2rem; max-width: 2rem }
			.rem2-5-desktop { min-width: 2.5rem; max-width: 2.5rem }
			.rem3-desktop { min-width: 3rem; max-width: 3rem }
			.rem4-desktop { min-width: 4rem; max-width: 4rem }
			.rem5-desktop { min-width: 5rem; max-width: 5rem }
			.rem6-desktop { min-width: 6rem; max-width: 6rem }
			.rem7-desktop { min-width: 7rem; max-width: 7rem }
			.rem8-desktop { min-width: 8rem; max-width: 8rem }
			.rem9-desktop { min-width: 9rem; max-width: 9rem }
			.rem10-desktop { min-width: 10rem; max-width: 10rem }
			.rem11-desktop { min-width: 11rem; max-width: 11rem }
			.rem12-desktop { min-width: 12rem; max-width: 12rem }
			.rem13-desktop { min-width: 13rem; max-width: 13rem }
			.rem14-desktop { min-width: 14rem; max-width: 14rem }
			.rem15-desktop { min-width: 15rem; max-width: 15rem }
			.rem16-desktop { min-width: 16rem; max-width: 16rem }
			.rem17-desktop { min-width: 17rem; max-width: 17rem }
			.rem18-desktop { min-width: 18rem; max-width: 18rem }
			.rem19-desktop { min-width: 19rem; max-width: 19rem }
			.rem20-desktop { min-width: 20rem; max-width: 20rem }
			.rem22-desktop { min-width: 22rem; max-width: 22rem }
			.rem25-desktop { min-width: 25rem; max-width: 25rem }
			.rem30-desktop { min-width: 30rem; max-width: 30rem }

			/* Percents in thirds, fourths, and tenths. */
			.pc10-desktop { width: 10% }
			.pc20-desktop { width: 20% }
			.pc25-desktop { width: 25% }
			.pc30-desktop { width: 30% }
			.pc33-desktop { width: 33.333% }
			.pc40-desktop { width: 40% }
			.pc50-desktop { width: 50% }
			.pc60-desktop { width: 60% }
			.pc66-desktop { width: 66.666% }
			.pc70-desktop { width: 70% }
			.pc75-desktop { width: 75% }
			.pc80-desktop { width: 80% }
			.pc90-desktop { width: 90% }
			.pc100-desktop { width: 100% }

			/* Flex */
			.flex1-desktop { flex: 1 }
			.flex2-desktop { flex: 2 }
			.flex3-desktop { flex: 3 }
			.flex4-desktop { flex: 4 }
			.flex5-desktop { flex: 5 }
			.flex6-desktop { flex: 6 }
			.flex7-desktop { flex: 7 }
			.flex8-desktop { flex: 8 }
			.flex9-desktop { flex: 9 }
			.flex10-desktop { flex: 10 }
			.flex11-desktop { flex: 11 }
			.flex12-desktop { flex: 12 }
		}
	}


	/*┌─────────────────╮
	  |Grid Visibility  |
	  └─────────────────╯*/

	/* Show only for specific sizes. */
	@media (width < 768px) {
		:is(.eternium, .eternium-layout) :is(.tablet, .desktop):not(.mobile) { display: none !important }
	}
	@media (768px <= width < 1024px) {
		:is(.eternium, .eternium-layout) :is(.mobile, .desktop):not(.tablet) { display: none !important }
	}
	@media (1024px <= width) {
		:is(.eternium, .eternium-layout) :is(.mobile, .tablet):not(.desktop) { display: none !important }
	}
}