/* components/navbar: a grid of equal cells; each item is a primary button filling its cell. The item's text
   shrinks with the menu's width (between two tokens), so on a landscape phone the items stand on one row. The
   list says its item count in --navbar-items: when the items fit at --navbar-item-min-size they stand on one row,
   else half of them to a row (four items: 2x2, never 3+1). No break width: a menu that does not fit asks for
   cells of half the row, and a huge deficit (times 99999) makes that the cell's minimum. */
@layer components {
	.dv-navbar {
		container-type: inline-size;
	}

	.dv-navbar-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(max(var(--navbar-item-min-size),
			min(calc((var(--navbar-items) * var(--navbar-item-min-size) + (var(--navbar-items) - 1) * var(--navbar-gap) - 100%) * 99999),
				calc((100% - (round(up, var(--navbar-items) / 2, 1) - 1) * var(--navbar-gap)) / round(up, var(--navbar-items) / 2, 1) - 1px))), 1fr));
		gap: var(--space-1) var(--navbar-gap);
		margin: 0;
		padding: 0;
		font-size: clamp(var(--navbar-font-min), var(--navbar-font-fluid), var(--font-size-control));
		list-style: none;
	}

	.dv-navbar .dv-navbar-item {
		display: flex;
		inline-size: 100%;
		padding-inline: var(--space-1);
		font-size: inherit;
		overflow-wrap: anywhere;
	}
}