/* @beyond-js/ui 0.45.1 components. Generated from src/styles; do not edit. Requires @beyond-js/ui/tokens.css. */
/*
 * Base of the Beyond UI components: sizes, icons, hidden text, spinner and reduced motion; focus is focus.css.
 * Every color, space, type size and duration is a custom property of @beyond-js/ui/tokens.css;
 * no color literal appears in any component stylesheet.
 */
:root {
	--bui-control: var(--comfortable-control);
	--bui-row: var(--comfortable-row);
	--bui-target: 32px;
	/* What a borderless control's surface hangs past its words (0.37.0, D188) */
	--bui-quiet-hang: var(--space-2);
	/* Where a state's words start after its mark (`Status`: a 9 px mark and a 6 px gap), so what wraps or follows
	   under a line led by a mark starts under its words (0.37.0, D188) */
	--bui-status-axis: 15px;
}
:root[data-density='compact'] {
	--bui-control: var(--compact-control);
	--bui-row: var(--compact-row);
}
/* Touch screens get 44px targets whatever the density. */
@media (pointer: coarse) {
	:root {
		--bui-control: 44px;
		--bui-target: 44px;
	}
}

/* A component's `hidden` attribute always wins over its display rule. */
:where([class^='bui-'], [class*=' bui-'])[hidden] {
	display: none !important;
}

.bui-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bui-icon {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bui-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--radius-round);
	animation: bui-spin 0.8s linear infinite;
}
@keyframes bui-spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes bui-pulse {
	50% {
		opacity: 0.4;
	}
}
@keyframes bui-enter {
	from {
		opacity: 0;
		transform: translateY(var(--bui-enter-from, 4px));
	}
}
@keyframes bui-leave {
	to {
		opacity: 0;
		transform: translateY(var(--bui-enter-from, 4px));
	}
}

/* Nothing moves for a person who asked for reduced motion; state changes stay visible as text. A region's wait
   keeps its grace (feedback.css, 0.31.0): it does not move, it is only seen once its read is slow. */
@media (prefers-reduced-motion: reduce) {
	:where([class^='bui-']:not(.bui-waiting, .bui-skeleton), [class*=' bui-']:not(.bui-waiting, .bui-skeleton)),
	:where([class^='bui-'], [class*=' bui-'])::before,
	:where([class^='bui-'], [class*=' bui-'])::after,
	:where([class^='bui-'], [class*=' bui-'])::backdrop {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	/* Still, a spinner is work in progress: a half-filled circle (D129, 0.19.1), never an open ring,
	   which is the shape of what rests */
	.bui-spinner {
		border-right-color: currentColor;
		background: linear-gradient(to right, currentColor 50%, transparent 50%);
	}
	.bui-spinner:dir(rtl) {
		background: linear-gradient(to left, currentColor 50%, transparent 50%);
	}
}

/* Focus says what the keys do there (0.34.0, D187). The family draws the keyboard's place in four forms, never one
   ring for everything:
   - the ring: a control the keyboard reached, in coral, 2 px, 2 px outside its own shape, settling onto it;
   - the edge: a box that takes typing or keys lights its own border in the focus edge's light, with a halo of that
     light and a coral caret; nothing rings it, since a coral border reads as the box's error;
   - the cursor: the item the arrow keys are on is lit as the pointer lights it and ringed inside, drawn with its
     component (a menu's entries, a list's rows, a picker's options, a diff's hunks), and moves at once;
   - nothing: a place the product moves focus to so reading starts there.
   Every form stays seen in a forced-colors theme. Tokens only. */

/* The edge's halo: a ring of the edge's own light around the box, a mark and never elevation (D10). It is computed
   where a theme is set, so a frame in the other theme draws its own. */
:root,
[data-beyond-mode] {
	--bui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--color-focus-edge) 14%, transparent);
	--bui-focus-halo-danger: 0 0 0 3px color-mix(in srgb, var(--color-danger) 16%, transparent);
}

/* The ring: a control the keyboard reached, the package's own and, at no specificity, every product's, so that a
   component's or a product's own rule wins. A pointer's press draws none (`:focus-visible`). */
:where(:focus-visible),
:where([class^='bui-'], [class*=' bui-']):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
/* It settles onto the control, from 6 px out and clear to its place, in 150 ms: the eye finds where the keyboard
   went. A cursor moving through its set, drawn inside its item, moves at once (`animation: none` where it is
   drawn); under reduced motion the ring appears at once. */
@media (prefers-reduced-motion: no-preference) {
	:where(:focus-visible),
	:where([class^='bui-'], [class*=' bui-']):focus-visible {
		animation: bui-ring var(--motion-quick) var(--motion-ease);
	}
}
/* A product's reset that rings focus in no cascade layer outranks a rule of no specificity: Tailwind 3's preflight
   ships `:-moz-focusring { outline: auto; }` (0,1,0), which only Firefox applies. There the ring is restated one type
   selector above it (0,1,1), under every component's own rule on a pseudo-class (0,2,0), so a product keeps no focus
   rule of its own (0.44.0). A box that takes typing (a field, an editable region, a textbox, a search box or a
   combobox) is left to its edge, so it never takes the ring from here. In Firefox it also outranks a product's own
   rule of one class (0,1,0) that takes a control's outline off: such a rule is written on `:focus-visible`.
   Chromium and WebKit drop the rule, which they cannot parse. */
:is(:not(input, textarea, select, :where([contenteditable]:not([contenteditable='false']), [role='textbox'], [role='searchbox'], [role='combobox'])), input:where([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image'])):-moz-focusring {
	outline: 2px solid var(--color-focus);
}
@keyframes bui-ring {
	from {
		outline-offset: 6px;
		outline-color: transparent;
	}
}

/* Nothing: a place the product moves focus to so reading starts there (a page's title after a navigation, a side
   sheet's or a dialog's title, a list's region after a page change, a row read again after an action, the main
   after the skip link). Tab does not reach it (`tabindex="-1"`) and it has no interactive role, so it draws
   nothing, from the keyboard as from a pointer; the next Tab rings the next control. An item that the arrow keys
   reach names its role; a part that takes keys draws the edge (`CommandCard`). */
:where(:not(a[href], area[href], button, input, select, textarea, summary, iframe, [contenteditable]:not([contenteditable='false']), [role='button'], [role='link'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option'], [role='tab'], [role='treeitem'], [role='gridcell'], [role='row'], [role='checkbox'], [role='radio'], [role='switch'], [role='slider'], [role='spinbutton'], [role='combobox'], [role='textbox'], [role='searchbox'], [role='listbox'], [role='tree'], [role='treegrid'], [role='grid'], [role='menu'], [role='menubar'], [role='tablist'], [role='radiogroup'], [role='separator'], [role='application'], .bui-command))[tabindex='-1']:focus {
	outline: none;
	animation: none;
}

/* The edge: a box that takes typing or keys lights its own border while the focus is in it, from a pointer as from
   the keyboard, with a halo of the same light; nothing rings it. A product's own box takes it with `bui-edge`,
   lighting while a field inside it has the focus. The composer's box lights while its field has the focus, and
   rests while one of its controls has it, which is ringed instead. */
:is(.bui-input, .bui-select-control, .bui-command-edit):focus-visible,
:is(.bui-edge, .bui-navmenu-search):has(:is(input, textarea, select):focus-visible),
.bui-edge:focus-visible,
.bui-composer-box:has(.bui-composer-field:focus-visible) {
	border-color: var(--color-focus-edge);
	box-shadow: var(--bui-focus-halo);
	outline: none;
	animation: none;
}
@media (prefers-reduced-motion: no-preference) {
	:is(.bui-input, .bui-select-control, .bui-command-edit, .bui-edge, .bui-navmenu-search, .bui-composer-box, .bui-command) {
		transition:
			border-color var(--motion-quick) var(--motion-ease),
			box-shadow var(--motion-quick) var(--motion-ease);
	}
}
/* Inside a lit box the field itself draws nothing */
:is(.bui-edge, .bui-navmenu-search, .bui-composer-box) :is(input, textarea, select):focus-visible {
	outline: none;
	box-shadow: none;
	animation: none;
}
/* A request waiting for an answer takes Enter and Escape while it has the focus, however it got it, so it lights
   whenever it has it: a line of the edge's light around its border, keeping the attention's stripe and its
   elevation. The taller editor keeps its dialog's elevation under the edge. */
.bui-command:focus {
	outline: none;
	box-shadow:
		0 0 0 1px var(--color-focus-edge),
		0 0 0 4px color-mix(in srgb, var(--color-focus-edge) 14%, transparent),
		var(--elevation-raised);
	animation: none;
}
.bui-composer-editor > .bui-composer-box:has(.bui-composer-field:focus-visible) {
	box-shadow: var(--bui-focus-halo), var(--elevation-dialog);
}
/* A region that scrolls by keys and has no border of its own (a diff's lines) lights its edge inside it */
.bui-diff-lines:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 1px var(--color-focus-edge),
		inset 0 0 0 3px color-mix(in srgb, var(--color-focus-edge) 14%, transparent);
	animation: none;
}
/* A wrong value keeps the danger's edge, its halo in the danger's tone: the failure stays said */
:is(.bui-input, .bui-select-control):is([aria-invalid='true'], .bui-field-invalid *):focus-visible,
.bui-edge[data-invalid]:has(:is(input, textarea, select):focus-visible) {
	border-color: var(--color-danger);
	box-shadow: var(--bui-focus-halo-danger);
}

/* The caret is the point the keys write at: coral, as the ring is (C2, D187) */
:is(.bui-input, .bui-command-edit, .bui-composer-field, .bui-navmenu-field, .bui-palette-field),
:is(input, textarea).bui-edge,
.bui-edge :is(input, textarea) {
	caret-color: var(--color-focus);
}

/* Every form stays seen in a forced-colors theme, where shadows and fills are not drawn: the edge and a box's
   light take a system outline; a ring is an outline already. */
@media (forced-colors: active) {
	:is(.bui-input, .bui-select-control, .bui-command-edit):focus-visible,
	:is(.bui-edge, .bui-navmenu-search):has(:is(input, textarea, select):focus-visible),
	.bui-edge:focus-visible,
	.bui-composer-box:has(.bui-composer-field:focus-visible),
	.bui-command:focus {
		outline: 2px solid Highlight;
		outline-offset: 1px;
	}
	.bui-diff-lines:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/*
 * Icon sizes (decision D11): an icon built with a size (`icon(name, { size })`, React `<Icon size>`)
 * is drawn at 16, 20 or 24 px. The stroke stays 1.8 on the 24 px grid, so it scales with the icon.
 * The components' own glyphs carry no size and keep the size their component's stylesheet gives them.
 */

.bui-icon[data-size='16'] {
	width: 16px;
	height: 16px;
}

.bui-icon[data-size='20'] {
	width: 20px;
	height: 20px;
}

.bui-icon[data-size='24'] {
	width: 24px;
	height: 24px;
}

/* Buttons, icon and link buttons, toggles, the action menu and the disclosure. */
.bui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--bui-control);
	padding: 0 var(--space-4);
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--motion-quick) var(--motion-ease),
		border-color var(--motion-quick) var(--motion-ease);
}
.bui-button-small {
	min-height: max(calc(var(--bui-control) - 6px), var(--bui-target));
	padding: 0 var(--space-3);
}
.bui-button-primary {
	background: var(--color-action);
	color: var(--color-on-action);
}
.bui-button-primary:not(:disabled, [aria-disabled='true']):hover {
	background: var(--color-action-hover);
}
.bui-button-secondary {
	background: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-border-control);
}
.bui-button-secondary:not(:disabled, [aria-disabled='true']):hover {
	border-color: var(--color-text);
}
.bui-button-quiet {
	background: transparent;
	color: var(--color-link);
}
/* A borderless control is placed by what it draws (0.37.0, D188): at rest only its words show, so they sit on
   the edge and in the gaps, and its surface (hover, press, focus) hangs past them by --bui-quiet-hang. The
   padding leaves room for the button's 1px border, so the words land exactly where the box would. Beside
   another control, or what holds one, it keeps its padding on that side, so the two surfaces never meet; inside
   a sentence (a paragraph's own control) it keeps it on both, its words part of the sentence. */
.bui-button-quiet:not(.bui-button-bare) {
	padding-inline: calc(var(--bui-quiet-hang) - 1px);
	margin-inline: calc(-1 * var(--bui-quiet-hang));
}
:is(button, a, input, select, .bui-copy-button, .bui-menu-holder, :has(button, input, select)) + .bui-button-quiet:not(.bui-button-bare) {
	margin-inline-start: 0;
}
.bui-button-quiet:not(.bui-button-bare):has(+ :is(button, a, input, select, .bui-copy-button, .bui-menu-holder)) {
	margin-inline-end: 0;
}
p > .bui-button-quiet:not(.bui-button-bare) {
	margin-inline: 0;
}
/* On a touch screen its target keeps 44 px: a short word's box grows toward its end, its words staying where they
   start (D188) */
@media (pointer: coarse) {
	.bui-button-quiet:not(.bui-button-bare) {
		min-width: var(--bui-target);
		justify-content: flex-start;
	}
}
/* In one of the package's rows of actions a quiet control hangs only at the row's ends; between its neighbours,
   whatever they hold, it keeps its padding (D188) */
:is(.bui-page-actions, .bui-page-compact-actions, .bui-section-actions, .bui-callout-actions, .bui-empty-actions, .bui-unavailable-actions, .bui-recovery-actions, .bui-dialog-actions, .bui-sheet-actions, .bui-awaited-actions, .bui-command-actions, .bui-command-note-actions, .bui-refs-actions, .bui-details-actions, .bui-copy-actions, .bui-diff-actions, .bui-provider-actions, .bui-statusrow-actions, .bui-activity-actions, .bui-dictation-actions) > .bui-button-quiet:not(.bui-button-bare):not(:first-child) {
	margin-inline-start: 0;
}
:is(.bui-page-actions, .bui-page-compact-actions, .bui-section-actions, .bui-callout-actions, .bui-empty-actions, .bui-unavailable-actions, .bui-recovery-actions, .bui-dialog-actions, .bui-sheet-actions, .bui-awaited-actions, .bui-command-actions, .bui-command-note-actions, .bui-refs-actions, .bui-details-actions, .bui-copy-actions, .bui-diff-actions, .bui-provider-actions, .bui-statusrow-actions, .bui-activity-actions, .bui-dictation-actions) > .bui-button-quiet:not(.bui-button-bare):not(:last-child) {
	margin-inline-end: 0;
}
.bui-button-quiet:not(:disabled, [aria-disabled='true']):hover {
	background: var(--overlay-lift);
}
.bui-button:is(.bui-button-secondary, .bui-button-quiet):not(:disabled, [aria-disabled='true']):active {
	background: var(--color-surface-sunken);
	border-color: var(--color-text);
}
.bui-button-danger {
	background: var(--color-surface);
	color: var(--color-danger);
	border-color: var(--color-danger);
}
.bui-button-danger:not(:disabled, [aria-disabled='true']):hover {
	background: var(--color-danger-surface);
}
.bui-button:disabled,
.bui-button[aria-disabled='true'] {
	opacity: 0.6;
	cursor: not-allowed;
}
/* A disabled primary is a neutral surface with muted words, never a dimmed coral (token set 0.6.0, C2,
   DQ-17); a busy one keeps its color, since it is working, not refused. */
.bui-button-primary:disabled,
.bui-button-primary[aria-disabled='true']:not([data-busy]) {
	border-color: transparent;
	background: var(--color-disabled);
	color: var(--color-on-disabled);
	opacity: 1;
}
.bui-button[data-busy] {
	cursor: progress;
}
/* A bare button (0.26.0, D165): its glyph alone in one round target, its words its name and tooltip. */
.bui-button-bare {
	flex: none;
	width: var(--bui-target);
	min-width: var(--bui-target);
	padding: 0;
	border-radius: var(--radius-round);
}
.bui-button-bare.bui-button-small {
	min-height: var(--bui-target);
	padding: 0;
}

.bui-icon-button {
	display: inline-grid;
	place-items: center;
	width: var(--bui-target);
	height: var(--bui-target);
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bui-icon-button:not(:disabled, [aria-disabled='true']):hover {
	background: var(--overlay-lift);
}
.bui-icon-button[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
}

.bui-link-button {
	min-height: var(--bui-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-link);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.bui-toggles {
	display: inline-flex;
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-control);
	overflow: hidden;
}
/* The group's border is outside its toggles, so the group is exactly one control tall. */
.bui-toggle {
	min-height: calc(var(--bui-control) - 2px);
	padding: 0 var(--space-4);
	border: 0;
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	cursor: pointer;
}
/* Toggles are divided inside the group's boundary; the divider is not a control's edge. */
.bui-toggle + .bui-toggle {
	border-left: 1px solid var(--color-border-strong);
}
.bui-toggle[aria-pressed='true'] {
	background: var(--color-surface-selected);
	font-weight: var(--weight-medium);
	box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Action menu */
.bui-menu-holder,
.bui-disclosure {
	position: relative;
	display: inline-block;
}
.bui-menu-button,
.bui-disclosure-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--bui-target);
	min-width: var(--bui-target);
	justify-content: center;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	cursor: pointer;
}
.bui-menu,
.bui-disclosure-panel,
.bui-disclosure-leaving {
	position: absolute;
	top: calc(100% + var(--space-1));
	z-index: 20;
	min-width: 12rem;
	max-width: min(24rem, calc(100vw - 2 * var(--space-4)));
	margin: 0;
	padding: var(--space-1);
	list-style: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--elevation-menu);
	animation: bui-enter var(--motion-quick) var(--motion-ease);
}
.bui-menu {
	width: max-content;
	overflow-y: auto;
}
/* A trigger with a visible label stands in a row of buttons: it takes their height and weight. */
.bui-menu-button:has(> span) {
	min-height: var(--bui-control);
	font-weight: var(--weight-medium);
}
/* Opened above its button when the viewport has no room below; it rises from the button (a disclosure's
   floating panel too, since 0.11.2). */
.bui-disclosure-panel.bui-disclosure-above,
.bui-disclosure-leaving.bui-disclosure-above,
.bui-menu.bui-menu-above {
	top: auto;
	bottom: calc(100% + var(--space-1));
	--bui-enter-from: -4px;
}
.bui-align-start {
	left: 0;
}
.bui-align-end {
	right: 0;
}
.bui-menu[hidden],
.bui-disclosure-panel[hidden] {
	display: none;
}
/* The picture of a panel that just closed: it eases out where the panel was, then is removed. */
.bui-disclosure-leaving {
	pointer-events: none;
	animation: bui-leave var(--motion-quick) var(--motion-ease) forwards;
}
.bui-menu-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: var(--bui-target);
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.bui-menu-item:hover,
.bui-menu-item:focus {
	background: var(--color-surface-sunken);
	outline: none;
}
.bui-menu-item:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
.bui-menu-item-danger {
	color: var(--color-danger);
}
.bui-menu-item[aria-disabled='true'] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}
.bui-menu-reason {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
}

/* A choice among a few things that have a state (ChoiceMenu): a button that names the choice and
   its state, and the family's menu with each option's state and detail. Its words are never cut:
   the button grows, and wraps inside a narrow container. */
.bui-choice {
	max-width: 100%;
}
.bui-choice-button {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	max-width: 100%;
	min-height: var(--bui-control);
	padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-align: left;
	cursor: pointer;
}
.bui-choice-button:not(:disabled, [aria-disabled='true']):hover {
	background: var(--color-surface-sunken);
}
.bui-choice-button:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
/* A choice that can never be made (`disabled`), and one that waits for an earlier choice (`waiting`, 0.35.0,
   D183): quiet, the second still reachable, a press only putting the person where they can act. */
.bui-choice-button:disabled,
.bui-choice-button[aria-disabled='true'] {
	color: var(--color-text-muted);
	background: var(--color-surface-sunken);
	cursor: not-allowed;
}
.bui-choice-button[data-tone='danger'] {
	border-color: var(--color-danger);
}
.bui-choice-button[data-tone='warning'] {
	border-color: var(--color-warning);
}
.bui-choice-label {
	color: var(--color-text-muted);
}
.bui-choice-value {
	font-weight: var(--weight-medium);
	overflow-wrap: anywhere;
}
.bui-choice-empty .bui-choice-value {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-choice-dot {
	display: inline-flex;
}
.bui-choice-dot .bui-status-dot {
	margin-top: 0;
}
.bui-choice-state {
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-choice-button[data-tone='danger'] .bui-choice-state {
	color: var(--color-danger);
}
.bui-choice-button > .bui-icon {
	margin-left: auto;
	color: var(--color-text-muted);
}
/* As wide as its button at least (`Floating` sets the anchor's width; 100% in the page's flow before 0.15.0). */
.bui-choice-list {
	min-width: max(var(--bui-anchor-width, 100%), 16rem);
}
.bui-choice-item {
	gap: 2px;
}
/* A long detail or reason wraps inside the menu instead of running past its edge */
.bui-choice-item > * {
	max-width: 100%;
	overflow-wrap: anywhere;
}
.bui-choice-line {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
}
.bui-choice-line > .bui-icon,
.bui-choice-space {
	flex: none;
	width: 16px;
	height: 16px;
}
.bui-choice-name {
	flex: 1 1 auto;
	font-weight: var(--weight-medium);
}
.bui-choice-line > .bui-status {
	flex: none;
	font-size: var(--text-label);
}
.bui-choice-detail {
	padding-left: calc(16px + var(--space-2));
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
.bui-choice-item .bui-menu-reason {
	padding-left: calc(16px + var(--space-2));
}
.bui-menu-separator {
	height: 1px;
	margin: var(--space-1) var(--space-2);
	background: var(--color-border);
}
/* A compact choice (ChoiceChip, 0.11.0): a muted label, the value and the state's word with its dot
   beside it, at the target size (44 px on touch screens). It wraps, never cuts its words. */
.bui-chip .bui-choice-button {
	gap: 0 var(--space-1);
	min-height: var(--bui-target);
	padding: 0 var(--space-1) 0 var(--space-2);
}
.bui-chip .bui-choice-button > .bui-icon {
	width: 16px;
	height: 16px;
	margin-left: 0;
}
.bui-chip-state {
	font-size: var(--text-label);
}
.bui-chip .bui-choice-button[data-tone='danger'] .bui-chip-state {
	color: var(--color-danger);
}
/* A calm option's state is said in the chip's name and tooltip only (0.26.0); its menu still shows it */
.bui-chip .bui-chip-state[data-calm] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bui-chip.bui-choice-statement .bui-statement {
	min-height: var(--bui-target);
	align-items: center;
	font-size: var(--text-small);
}

/* A choice among options compared side by side (ChoiceCards, 0.16.0, DQ-15): native radios drawn as
   cards, the chosen one on the selection's surface with the accent's edge; it applies at once. */
.bui-cards {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.bui-cards-legend {
	margin-bottom: var(--space-2);
	padding: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
}
.bui-cards-description {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-small);
}
.bui-cards-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-2);
}
.bui-card-choice {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-1);
	padding: var(--space-3);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-small);
	cursor: pointer;
}
.bui-card-choice:hover {
	background: var(--color-surface-sunken);
}
.bui-card-choice[data-checked] {
	border-color: var(--color-accent);
	background: var(--color-surface-selected);
	box-shadow: inset 0 0 0 1px var(--color-accent);
}
.bui-card-choice[data-disabled] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}
.bui-card-choice:has(.bui-card-radio:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
/* The radio stays in the tab order and the arrows' path; the card is its mark. */
.bui-card-radio {
	position: absolute;
	inset: var(--space-3) var(--space-3) auto auto;
	margin: 0;
	accent-color: var(--color-action);
}
.bui-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	padding-inline-end: var(--space-6);
}
.bui-card-title {
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
}
.bui-card-body {
	display: grid;
	gap: var(--space-1);
}
.bui-card-detail,
.bui-card-reason {
	color: var(--color-text-muted);
}
.bui-card-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	font-variant-numeric: tabular-nums;
}

/* Fields, inputs, native selects, choices, help and tooltips. */
.bui-field,
.bui-choices {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.bui-field-label {
	padding: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	color: var(--color-text);
}
.bui-field-optional {
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-field-hint,
.bui-choice-note {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-field-error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-danger);
}
.bui-field-error[hidden] {
	display: none;
}

/* A single-line control's sides: 12 px, or since 0.35.0 the room its height leaves above its capitals where it
   is not the comfortable 36 px (`--bui-line-inset`, set in insets.css at compact density and on a touch screen).
   The base rules read it, so a field's own padding (a search's glyph) keeps its place in the cascade. */
.bui-input,
.bui-select-control {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: var(--bui-control);
	padding: 0 var(--bui-line-inset, var(--space-3));
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-body);
}
.bui-textarea {
	min-height: calc(var(--bui-control) * 3);
	padding: var(--space-2) var(--space-3);
	resize: vertical;
}
.bui-input::placeholder {
	color: var(--color-text-muted);
}
.bui-field-invalid .bui-input,
.bui-input[aria-invalid='true'] {
	border-color: var(--color-danger);
}

.bui-select {
	position: relative;
	display: inline-grid;
	min-width: 0;
	max-width: 100%;
}
.bui-select-control {
	appearance: none;
	padding-right: calc(var(--bui-line-inset, var(--space-3)) + 22px);
	cursor: pointer;
}
.bui-select > .bui-icon {
	position: absolute;
	right: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-text-muted);
}

.bui-choices-list {
	display: grid;
	gap: var(--space-1);
}
/* A radio or a checkbox with its label. A `ChoiceMenu`'s holder shares the class name and is not one: it
   keeps its own box (0.26.0), so no chip carries a column gap after its button. */
.bui-choice:not(.bui-menu-holder) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--space-2);
	min-height: var(--bui-target);
}
.bui-choice input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-action);
}
.bui-choice label {
	font-size: var(--text-body);
	cursor: pointer;
}
.bui-choice-note {
	grid-column: 2;
}
.bui-choice-disabled label {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Help: a toggle next to what it explains; the explanation flows in the layout. */
.bui-help {
	display: inline;
	position: static;
	vertical-align: middle;
}
.bui-disclosure-help {
	min-height: var(--bui-target);
	min-width: var(--bui-target);
	padding: 0;
	border: 0;
	border-radius: var(--radius-round);
	background: transparent;
	color: var(--color-link);
}
.bui-disclosure-help:hover,
.bui-disclosure-help[aria-expanded='true'] {
	background: var(--color-surface-sunken);
}
.bui-help-panel {
	position: static;
	display: block;
	max-width: min(40rem, 100%);
	margin: var(--space-1) 0 var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-info);
	border-radius: var(--radius-control);
	background: var(--color-info-surface);
	box-shadow: none;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-help-panel p + p {
	margin-top: var(--space-2);
}
.bui-help-panel p {
	margin: 0;
}

.bui-tooltip {
	position: fixed;
	z-index: 40;
	max-width: min(18rem, calc(100vw - 16px));
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-control);
	background: var(--color-tooltip);
	color: var(--color-on-tooltip);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	box-shadow: var(--elevation-menu);
	animation: bui-enter var(--motion-quick) var(--motion-ease);
}
.bui-tooltip[hidden] {
	display: none;
}

/* The searchable entity picker: chosen chips, search, filters, the listbox and its states. */
.bui-picker {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-picker-chosen {
	display: grid;
	gap: var(--space-1);
}
.bui-picker-count {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-chips[hidden] {
	display: none;
}
/* A chosen entity's chip in the picker's list. Scoped to the list: a `ChoiceChip`'s holder also carries
   `bui-chip` and draws no box of its own (its button has the one border, 0.11.1). */
.bui-chips > .bui-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	padding: 2px 2px 2px var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-chip-label {
	overflow-wrap: anywhere;
}
.bui-chips > .bui-chip-problem {
	border-color: var(--color-warning);
	background: var(--color-warning-surface);
}
/* The reason takes its own last line, so the remove button stays beside the chip's name. */
.bui-chip-reason {
	order: 1;
	flex-basis: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
}
.bui-chip-remove {
	display: inline-grid;
	place-items: center;
	width: var(--bui-target);
	height: var(--bui-target);
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
}
.bui-chip-remove:hover {
	background: var(--color-surface);
	color: var(--color-text);
}
.bui-chip-remove .bui-icon {
	width: 14px;
	height: 14px;
}

.bui-picker-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.bui-picker-search {
	position: relative;
	flex: 1 1 12rem;
	display: flex;
	min-width: 0;
}
.bui-picker-search > .bui-icon {
	position: absolute;
	left: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
}
.bui-picker-search > .bui-input {
	padding-left: calc(var(--space-2) + 24px);
}

.bui-picker-list {
	max-height: 18rem;
	margin: 0;
	padding: var(--space-1);
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface);
}
.bui-picker-list:empty {
	display: none;
}
.bui-picker-list[aria-busy='true'] {
	opacity: 0.7;
}
.bui-option {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--space-2);
	align-items: start;
	min-height: var(--bui-target);
	padding: var(--space-2);
	border-radius: var(--radius-control);
	cursor: pointer;
}
.bui-option:hover {
	background: var(--color-surface-sunken);
}
.bui-option-active {
	background: var(--color-surface-sunken);
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}
.bui-option-mark {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1px solid var(--color-border-control);
	border-radius: 4px;
	background: var(--color-surface);
	color: transparent;
}
.bui-picker:not(.bui-picker-multiple) .bui-option-mark {
	border-radius: var(--radius-round);
}
.bui-option-mark .bui-icon {
	width: 14px;
	height: 14px;
}
.bui-option[aria-selected='true'] {
	background: var(--color-surface-selected);
}
.bui-option[aria-selected='true'] .bui-option-mark {
	border-color: var(--color-action);
	background: var(--color-action);
	color: var(--color-on-action);
}
.bui-option[aria-disabled='true'] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}
.bui-option-text {
	display: grid;
	min-width: 0;
}
.bui-option-label {
	overflow-wrap: anywhere;
}
.bui-option-description,
.bui-option-reason {
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-option-reason {
	font-style: italic;
}

.bui-picker-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--bui-target);
}
.bui-picker-status {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-picker-problem {
	color: var(--color-danger);
}
.bui-picker-foot [hidden] {
	display: none;
}

/* "Choose, never type" (D56): the resource picker's parts, a stated single option, the ref chooser, the
   project picker, the secret field and a suggested value. */

/* A single option stated as text: the value, readable, with its state. */
.bui-statement {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-height: var(--bui-control);
	max-width: 100%;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-statement-text {
	overflow-wrap: anywhere;
}
.bui-choice-statement .bui-choice-label {
	color: var(--color-text-muted);
}
.bui-choice-statement .bui-choice-value {
	font-weight: var(--weight-medium);
}

/* A long ChoiceMenu opens with its search field above the options. */
.bui-choice-list > .bui-choice-items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-choice-search {
	position: relative;
	display: flex;
	margin-bottom: var(--space-1);
}
.bui-choice-search > .bui-icon {
	position: absolute;
	left: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
}
.bui-choice-search > .bui-input {
	padding-left: calc(var(--space-2) + 24px);
}
.bui-choice-none {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-choice-none[hidden],
.bui-choice-items > [hidden] {
	display: none;
}

/* The resource picker: From [account], the gate, rows with their facts and marks, a suggested group and
   "Can't find it?". */
.bui-picker-work {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-picker-work[hidden],
.bui-picker-gate[hidden],
.bui-picker-escape[hidden] {
	display: none;
}
.bui-picker-group {
	display: grid;
	padding-bottom: var(--space-1);
	margin-bottom: var(--space-1);
	border-bottom: 1px solid var(--color-border);
}
.bui-picker-heading {
	padding: var(--space-1) var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
}
.bui-picker-grouped {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-option:has(> .bui-option-avatar, > .bui-option-glyph) {
	grid-template-columns: 20px 20px 1fr;
}
.bui-option-avatar {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: var(--radius-round);
	object-fit: cover;
}
.bui-option-glyph {
	display: inline-grid;
	color: var(--color-text-muted);
}
.bui-option-glyph .bui-icon {
	width: 20px;
	height: 20px;
}
.bui-option-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
}
.bui-option-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-option-private {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.bui-option-private .bui-icon {
	width: 14px;
	height: 14px;
}
.bui-picker-escape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-picker-escape-title {
	margin: 0;
	color: var(--color-text-muted);
}
.bui-picker-escape-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

/* The ref chooser and the project picker: a label above the control, or a composer's inline button. */
.bui-refs {
	display: grid;
	justify-items: start;
	gap: var(--space-1);
	min-width: 0;
}
.bui-refs-field .bui-choice-button .bui-choice-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bui-refs-body {
	display: grid;
	justify-items: start;
	gap: var(--space-1);
	width: 100%;
}
.bui-refs-body > .bui-skeleton {
	width: min(16rem, 100%);
}
.bui-refs-problem,
.bui-refs-empty {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-refs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.bui-refs-other {
	display: grid;
	gap: var(--space-2);
	width: min(var(--layout-form), 100%);
}
.bui-refs-other[hidden] {
	display: none;
}

/* A secret with the integration first: Connect, then the folded last resort, or "Stored · Replace". */
.bui-secret {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.bui-secret-body,
.bui-secret-inside,
.bui-secret-field {
	display: grid;
	gap: var(--space-2);
	width: min(var(--layout-form), 100%);
}
.bui-secret-summary {
	min-height: var(--bui-target);
	color: var(--color-link);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	cursor: pointer;
}
.bui-secret-last,
.bui-secret-stored {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-secret-stored {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
}

/* A suggested value, marked until the person edits it. */
.bui-field-suggested {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-field-suggested[hidden] {
	display: none;
}

/* A statement keeps its option's hint (0.7.1): on its own line, muted, describing the text. */
.bui-statement-hint {
	flex-basis: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}

/* Dialogs, questions and toasts. Only floating things cast a shadow.
   A dialog never grows past the viewport: its body scrolls on its own while the title, description
   and actions stay in view. Only on very short viewports does the whole dialog scroll instead. */
.bui-dialog {
	width: min(36rem, calc(100vw - 2 * var(--space-4)));
	max-height: calc(100dvh - 2 * var(--space-4));
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--elevation-dialog);
	overflow: auto;
}
.bui-dialog[open] {
	display: flex;
	flex-direction: column;
	animation: bui-enter var(--motion-standard) var(--motion-ease);
}
.bui-dialog-small {
	width: min(28rem, calc(100vw - 2 * var(--space-4)));
}
.bui-dialog-large {
	width: min(52rem, calc(100vw - 2 * var(--space-4)));
}
.bui-dialog::backdrop {
	background: var(--overlay-scrim);
	animation: bui-dialog-veil-in var(--motion-standard) var(--motion-ease);
}
/* Keep the native top layer until the exit ends, including in Firefox and WebKit. */
.bui-dialog[open][data-motion='out'] {
	animation: bui-leave var(--motion-exit) var(--motion-ease-exit) forwards;
}
.bui-dialog[data-motion='out']::backdrop {
	animation: bui-dialog-veil-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
@keyframes bui-dialog-veil-in {
	from { opacity: 0; }
}
@keyframes bui-dialog-veil-out {
	to { opacity: 0; }
}
/* Installed hosts may keep reduced motion as a device preference. */
:root[data-motion='reduced'] .bui-dialog,
:root[data-motion='reduced'] .bui-dialog::backdrop {
	animation: none !important;
	transition: none !important;
}
.bui-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex: none;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4) 0 var(--space-5);
}
.bui-dialog-title {
	margin: 0;
	padding-top: var(--space-1);
	font-size: var(--text-title-3);
	line-height: var(--leading-title-3);
	font-weight: var(--weight-semibold);
	overflow-wrap: anywhere;
}
.bui-dialog-description {
	flex: none;
	margin: var(--space-2) var(--space-5) 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-dialog-body {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	align-content: start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bui-dialog-body:empty {
	display: none;
}
.bui-dialog-actions {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: 0 var(--space-5) var(--space-5);
}
.bui-dialog-body .bui-dialog-actions {
	padding: var(--space-2) 0 0;
}
.bui-dialog-actions[hidden] {
	display: none;
}
.bui-dialog[data-busy] .bui-dialog-body {
	cursor: progress;
}
.bui-question-message {
	margin: 0;
	overflow-wrap: anywhere;
}
.bui-question-form {
	display: grid;
	gap: var(--space-3);
}
.bui-question-problem:empty,
.bui-form-problem:empty {
	display: none;
}
@media (max-width: 480px) {
	.bui-dialog-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}
@media (max-height: 20rem) {
	.bui-dialog-body {
		flex: none;
		overflow: visible;
	}
}

/* A surface with a bottom bar of its own (a dock) raises the toaster with --bui-toaster-bottom. */
.bui-toaster {
	position: fixed;
	right: var(--space-4);
	bottom: var(--bui-toaster-bottom, var(--space-4));
	z-index: 50;
	display: grid;
	gap: var(--space-2);
	width: min(24rem, calc(100vw - 2 * var(--space-4)));
	pointer-events: none;
}
.bui-toast-stack {
	display: grid;
	gap: var(--space-2);
}
.bui-toast {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-success);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--elevation-menu);
	pointer-events: auto;
	animation: bui-enter var(--motion-standard) var(--motion-ease);
}
/* Icon, first line and close button are centred on one target-tall line. */
.bui-toast > .bui-icon {
	margin-top: calc((var(--bui-target) - 18px) / 2);
	color: var(--color-success);
}
.bui-toast-text {
	padding-top: calc((var(--bui-target) - 1lh) / 2);
}
.bui-toast-info {
	border-left-color: var(--color-info);
}
.bui-toast-info > .bui-icon {
	color: var(--color-info);
}
.bui-toast-warning {
	border-left-color: var(--color-warning);
}
.bui-toast-warning > .bui-icon {
	color: var(--color-warning);
}
.bui-toast-danger {
	border-left-color: var(--color-danger);
}
.bui-toast-danger > .bui-icon {
	color: var(--color-danger);
}
.bui-toast-title,
.bui-toast-detail {
	margin: 0;
}
.bui-toast-title {
	font-weight: var(--weight-semibold);
}
.bui-toast-detail {
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}

/* The consequence of a confirmed action: the work it affects, what is lost, what is kept, what keeps costing, how to undo it. */
.bui-consequence {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
}
/* Sentence case, as the labels are written (D20): no capitals by style. */
.bui-consequence dt {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-consequence dd {
	margin: 0;
}
.bui-consequence ul {
	margin: 0;
	padding-left: var(--space-4);
}

/* The command palette (CommandPalette, 0.16.0, DQ-21): a modal dialog with no title bar, one large field,
   grouped results with their shortcuts at the end, near the top of the window. */
.bui-palette {
	box-sizing: border-box;
	width: min(40rem, calc(100vw - 2 * var(--space-4)));
	max-height: min(32rem, calc(100dvh - 6rem));
	margin: 12vh auto auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--elevation-dialog);
}
.bui-palette[open] {
	display: flex;
	flex-direction: column;
	animation: bui-enter var(--motion-quick) var(--motion-ease);
}
.bui-palette::backdrop {
	background: var(--overlay-scrim);
}
.bui-palette-search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
}
.bui-palette-field {
	flex: 1;
	min-width: 0;
	min-height: var(--bui-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-title-3);
	outline: none;
}
/* It draws no ring on the state that draws one (0,2,0), so a product's unlayered reset (Tailwind 3's
   `:-moz-focusring`) cannot draw its own (0.44.0, D187) */
.bui-palette-field:focus-visible {
	outline: none;
}
.bui-palette-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--space-1) var(--space-2) var(--space-2);
}
.bui-palette-group + .bui-palette-group {
	margin-top: var(--space-2);
}
.bui-palette-heading,
.bui-palette-state {
	margin: 0;
	padding: var(--space-2) var(--space-2) var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-palette-state {
	padding-top: 0;
	font-weight: var(--weight-regular);
}
.bui-palette-option {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--bui-target);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-control);
	font-size: var(--text-small);
	cursor: pointer;
}
.bui-palette-option[aria-selected='true'] {
	background: var(--color-surface-selected);
	box-shadow: inset 2px 0 0 var(--color-accent);
}
.bui-palette-glyph {
	display: inline-flex;
	flex: none;
	width: 16px;
	color: var(--color-text-muted);
}
.bui-palette-glyph > .bui-icon {
	width: 16px;
	height: 16px;
}
/* The palette is an opened list: an option's words are whole, wrapping rather than cut (0.28.0, D44,
   D179), the detail going under the label when both do not share the line. */
.bui-palette-words {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-2);
	min-width: 0;
}
.bui-palette-label {
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-palette-detail {
	min-width: 0;
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.bui-palette-keys {
	flex: none;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-label);
}
.bui-palette-status {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
.bui-palette-status:empty {
	display: none;
}

/* A session that ended (Session): one small dialog, the person it belonged to, and the bar's "Sign in".
   A revoked or suspended session hides the page behind an opaque backdrop. */
.bui-session-opaque::backdrop {
	background: var(--color-canvas);
}
.bui-session-person {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}
.bui-session-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-action);
	color: var(--color-on-action);
	font-weight: var(--weight-medium);
}
.bui-session-avatar svg {
	width: 1.25rem;
	height: 1.25rem;
}
.bui-session-who {
	display: grid;
	min-width: 0;
}
.bui-session-name {
	font-weight: var(--weight-medium);
	overflow-wrap: anywhere;
}
.bui-session-email {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}
.bui-session-said {
	margin: 0;
	max-width: var(--layout-measure);
}
.bui-session .bui-dialog-actions a.bui-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
}

/* A side sheet (LR-07): a modal panel at the inline end, as tall as the window, form-wide by default and
   the whole width below the family cut (1024 px). It overlaps the page, so it takes the dialog's
   elevation; its body scrolls on its own while its title and actions stay in view. */
.bui-sheet {
	box-sizing: border-box;
	inset-block: 0;
	inset-inline: auto 0;
	width: min(var(--layout-form), 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--elevation-dialog);
	overflow: hidden;
}
.bui-sheet-standard {
	width: min(var(--layout-standard), calc(100vw - var(--layout-sidebar)));
}
.bui-sheet[open] {
	display: flex;
	flex-direction: column;
	animation: bui-sheet-in var(--motion-standard) var(--motion-ease);
}
.bui-sheet:dir(rtl)[open] {
	margin: 0 auto 0 0;
	animation-name: bui-sheet-in-rtl;
}
.bui-sheet::backdrop {
	background: var(--overlay-scrim);
	animation: bui-sheet-veil-in var(--motion-standard) var(--motion-ease);
}
/* Keep the same native modal and backdrop through exit; consumer teardown runs afterwards. */
.bui-sheet[open][data-motion='out'] {
	animation: bui-sheet-native-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
.bui-sheet:dir(rtl)[open][data-motion='out'] {
	animation-name: bui-sheet-native-out-rtl;
}
.bui-sheet[data-motion='out']::backdrop {
	animation: bui-sheet-veil-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
@keyframes bui-sheet-veil-in {
	from { opacity: var(--bui-sheet-veil-from, 0); }
}
@media (max-width: 1023.98px) {
	.bui-sheet,
	.bui-sheet-standard {
		width: 100vw;
		border-inline-start: 0;
	}
}
.bui-sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex: none;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4) 0 var(--space-5);
}
/* The sheet's title takes the panel's role (title-2, semibold, D158): a sheet holds sections, whose
   headings are one step below it (`Section` at level 3), and the body text one step below those. */
.bui-sheet-title {
	margin: 0;
	padding-top: var(--space-1);
	font-size: var(--text-title-2);
	line-height: var(--leading-title-2);
	font-weight: var(--weight-semibold);
	overflow-wrap: anywhere;
}
/* Where reading starts when the sheet opens: it draws nothing, from the keyboard as from a pointer (D187) */
.bui-sheet-title:focus {
	outline: none;
}
.bui-sheet-description {
	flex: none;
	max-width: var(--layout-measure);
	margin: var(--space-2) var(--space-5) 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-sheet-problem {
	flex: none;
	margin: var(--space-3) var(--space-5) 0;
}
.bui-sheet-problem[hidden] {
	display: none;
}
.bui-sheet-body {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	align-content: start;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bui-sheet-actions {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}
.bui-sheet-actions[hidden] {
	display: none;
}
.bui-sheet[data-busy] .bui-sheet-body {
	cursor: progress;
}
@keyframes bui-sheet-in {
	from {
		transform: var(--bui-sheet-from, translateX(100%));
	}
}
@keyframes bui-sheet-in-rtl {
	from {
		transform: var(--bui-sheet-from, translateX(-100%));
	}
}

@keyframes bui-sheet-native-out {
	from { transform: var(--bui-sheet-exit-from, none); }
	to { transform: translateX(100%); }
}
@keyframes bui-sheet-native-out-rtl {
	from { transform: var(--bui-sheet-exit-from, none); }
	to { transform: translateX(-100%); }
}
@keyframes bui-sheet-veil-out {
	from { opacity: var(--bui-sheet-veil-exit-from, 1); }
	to { opacity: 0; }
}

/* Status, badges, counts, callouts, loading, skeletons and empty states. */
/* The dot sits on the first line when the label wraps. */
.bui-status {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	color: var(--color-text);
}
.bui-status-dot {
	width: 8px;
	height: 8px;
	flex: none;
	margin-top: calc((1lh - 8px) / 2);
	border-radius: var(--radius-round);
	background: var(--color-text-muted);
}
.bui-status-success .bui-status-dot {
	background: var(--color-success);
}
.bui-status-warning .bui-status-dot {
	background: var(--color-warning);
}
.bui-status-danger .bui-status-dot {
	background: var(--color-danger);
}
.bui-status-info .bui-status-dot,
.bui-status-progress .bui-status-dot {
	background: var(--color-info);
}
.bui-status-progress .bui-status-dot {
	/* A live dot pulses about five seconds, then holds (D95) */
	animation: bui-pulse 1.2s ease-in-out 4;
}

.bui-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	white-space: nowrap;
}
.bui-badge-info {
	border-color: currentColor;
	background: var(--color-info-surface);
	color: var(--color-info);
}
.bui-badge-success {
	border-color: currentColor;
	background: var(--color-success-surface);
	color: var(--color-success);
}
.bui-badge-warning {
	border-color: currentColor;
	background: var(--color-warning-surface);
	color: var(--color-warning);
}
.bui-badge-danger {
	border-color: currentColor;
	background: var(--color-danger-surface);
	color: var(--color-danger);
}

.bui-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-round);
	background: var(--color-action);
	color: var(--color-on-action);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: 1;
}
.bui-count[hidden] {
	display: none;
}

.bui-loading {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-skeleton {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-2) 0;
}
.bui-skeleton-line {
	display: block;
	height: 12px;
	border-radius: var(--radius-control);
	/* Placeholders preserve the content’s shape without moving what the person reads; drawn in the divider
	   role since 0.23.0 (LOAD-01), as Home's were, after the sunken surface read as a blank page in dark. */
	background: var(--color-border-strong);
}
.bui-skeleton-line:nth-child(3n + 1) {
	width: 90%;
}
.bui-skeleton-line:nth-child(3n + 2) {
	width: 72%;
}
.bui-skeleton-line:nth-child(3n) {
	width: 55%;
}

/* A region's wait (0.23.0, LOAD-01): the "Loading…" line above row-shaped placeholders, on the raised frame
   of `links.css` unless the region is framed already. No shimmer and no stagger; its grace is below (0.31.0). */
.bui-waiting {
	display: grid;
}
.bui-waiting:not([data-frame]) {
	padding: var(--space-3) 0;
}
.bui-waiting-label {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
}
.bui-waiting > .bui-skeleton {
	padding: 0;
}

/* A wait shows only when its read is slow (0.31.0, D185): it is in place, busy and announced at once, but seen
   only past its grace, so a read that answers within it goes straight to its content, and then it fades in, so
   one that answers just after leaves no flash. Nothing waits for it: content replaces it the moment it arrives.
   Under reduced motion it appears at the grace without fading. What answers a person's own action (a busy
   button, a loading line) is not a region's wait and shows at once. */
.bui-waiting,
.bui-skeleton:not(.bui-waiting .bui-skeleton) {
	animation: bui-waiting-in 0s linear 300ms both;
}
@keyframes bui-waiting-in {
	from {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.bui-waiting,
	.bui-skeleton:not(.bui-waiting .bui-skeleton) {
		animation: bui-waiting-in var(--motion-standard) var(--motion-ease) 300ms both;
	}
}

.bui-empty {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-4);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-base);
}
.bui-empty-title {
	margin: 0;
	font-weight: var(--weight-semibold);
}
.bui-empty-body {
	margin: 0;
	color: var(--color-text-muted);
}

/* "Not available here" (Unavailable): explained in place, in tones that never read as a failure. */
.bui-unavailable {
	display: flex;
	gap: var(--space-3);
	max-width: 44rem;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
}
/* A compact status mark sits beside the first heading line; the body aligns below the words. */
.bui-unavailable-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--space-6);
	height: var(--space-6);
	margin-top: calc((var(--text-title-2) * var(--leading-title-2) - var(--space-6)) / 2);
	color: var(--color-warning);
}
.bui-unavailable-capability .bui-unavailable-icon {
	color: var(--color-info);
}
.bui-unavailable-association .bui-unavailable-icon {
	color: var(--color-text-muted);
}
.bui-unavailable-icon > .bui-icon { width: 20px; height: 20px; }
.bui-unavailable-body {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	min-width: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
}
.bui-unavailable-title {
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-title-2);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-title-2);
}
.bui-unavailable-body > p {
	margin: 0;
}
.bui-unavailable-label {
	color: var(--color-text-muted);
}
.bui-unavailable-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}
/* An outage's line while it tries again by itself (Again, 0.17.1, D132): quiet, its time in tabular figures. */
.bui-again {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
}
.bui-again[hidden] {
	display: none;
}
@media (max-width: 480px) {
	.bui-unavailable {
		gap: var(--space-3);
		padding: var(--space-4);
	}
}

/* A notice, its reading column and adjacent actions. */
.bui-callout {
	/* The notice is a reading block, even in a fluid region. Actions wrap beside its words. */
	--bui-callout-inset: var(--space-4);
	width: fit-content;
	max-width: min(100%, calc(var(--layout-measure) + 18px + var(--space-3) + 2 * var(--bui-callout-inset) + 4px));
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-info);
	border-radius: var(--radius-control);
	background: var(--color-info-surface);
	color: var(--color-text);
}
.bui-callout > .bui-icon {
	margin-top: calc((1lh - 18px) / 2);
	color: var(--color-info);
}
.bui-callout-success {
	border-left-color: var(--color-success);
	background: var(--color-success-surface);
}
.bui-callout-success > .bui-icon {
	color: var(--color-success);
}
.bui-callout-warning {
	border-left-color: var(--color-warning);
	background: var(--color-warning-surface);
}
.bui-callout-warning > .bui-icon {
	color: var(--color-warning);
}
.bui-callout-danger {
	border-left-color: var(--color-danger);
	background: var(--color-danger-surface);
}
.bui-callout-danger > .bui-icon {
	color: var(--color-danger);
}
.bui-callout-body {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}
.bui-callout-title,
.bui-callout-text {
	margin: 0;
	overflow-wrap: anywhere;
}
.bui-callout-title {
	font-weight: var(--weight-semibold);
}
.bui-callout-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-1);
}

@supports (padding-top: calc(1lh - 1cap)) {
	/* A terminal copy control is centred on its value, not on a paragraph's half-leading. */
	.bui-callout:has(> .bui-callout-body > .bui-copy-value:last-child, > .bui-callout-body > .bui-host:last-child > .bui-copy-value, > .bui-callout-body > .bui-callout-text:last-child > .bui-copy-value:last-child, > .bui-callout-body > .bui-callout-text:last-child > .bui-host:last-child > .bui-copy-value) {
		padding-block-end: var(--bui-callout-inset);
	}
	.bui-callout-body > :last-child:is(.bui-copy-value, .bui-host:has(> .bui-copy-value), .bui-callout-text:has(> .bui-copy-value:last-child, > .bui-host:last-child > .bui-copy-value)) {
		font-size: var(--text-small);
		margin-block-end: calc((1cap - max(var(--bui-control) - 6px, var(--bui-target))) / 2);
	}
}


/* An outage said once (Recovery, 0.24.0, D163): one line in the warning tone with who did not answer, when it
   last tried and one Try again, its evidence folded below on the words' edge. It lists nothing: each read it
   affects says so in its own place (an outage's empty state, a section's last update). */
.bui-recovery {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		'mark words action'
		'. details details';
	align-items: center;
	column-gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-warning);
	border-radius: var(--radius-control);
	background: var(--color-warning-surface);
	color: var(--color-text);
}
.bui-recovery[hidden] {
	display: none;
}
/* React's host of a notice with nothing to say takes no room in a grid or a flex row (0.24.1) */
.bui-host:has(> .bui-recovery[hidden]) {
	display: none;
}
.bui-recovery-mark {
	grid-area: mark;
	display: inline-flex;
	color: var(--color-warning);
}
.bui-recovery-mark > .bui-icon {
	width: 18px;
	height: 18px;
}
.bui-recovery-words {
	grid-area: words;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--space-3);
	min-width: 0;
}
.bui-recovery-title {
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body);
	overflow-wrap: anywhere;
}
.bui-recovery-actions {
	grid-area: action;
	display: flex;
	gap: var(--space-2);
}
.bui-recovery > .bui-details {
	grid-area: details;
	margin-top: var(--space-1);
}
/* A narrow region: Try again under the words, on their edge. Its rows keep no gap of their own: each part that is
   drawn keeps its room above it, so a line offline (no Try again) or with no Technical details ends at its words or
   its action, never one empty row's gap further (0.44.0). */
@media (max-width: 480px) {
	.bui-recovery {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			'mark words'
			'. action'
			'. details';
		align-items: start;
		row-gap: 0;
	}
	.bui-recovery-actions {
		margin-top: var(--space-2);
	}
	.bui-recovery > .bui-details {
		margin-top: calc(var(--space-2) + var(--space-1));
	}
	.bui-recovery-mark {
		margin-top: calc((1lh - 18px) / 2);
	}
}
/* Offline there is no Try again (0.33.0): its row takes no room in any form (0.44.0). */
.bui-recovery[data-offline] > .bui-recovery-actions {
	display: none;
}

/* The page form: nothing on the page could be read, so the outage is the page's body, as `Unavailable` draws one. */
.bui-recovery[data-recovery='page'] {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		'mark words'
		'. action'
		'. details';
	align-items: start;
	row-gap: 0;
	max-width: 44rem;
	padding: var(--space-6);
	border-left-width: 1px;
	border-color: var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
}
.bui-recovery[data-recovery='page'] .bui-recovery-mark {
	display: grid;
	place-items: center;
	width: var(--space-6);
	height: var(--space-6);
	margin-top: calc((var(--text-title-2) * var(--leading-title-2) - var(--space-6)) / 2);
}
.bui-recovery[data-recovery='page'] .bui-recovery-mark > .bui-icon {
	width: 20px;
	height: 20px;
}
.bui-recovery[data-recovery='page'] .bui-recovery-words {
	display: grid;
	gap: var(--space-2);
}
.bui-recovery[data-recovery='page'] .bui-recovery-title {
	font-size: var(--text-title-2);
	line-height: var(--leading-title-2);
}
/* Each part keeps its room above it, so a part that is not drawn leaves no gap (0.44.0) */
.bui-recovery[data-recovery='page'] .bui-recovery-actions {
	margin-top: var(--space-4);
}
.bui-recovery[data-recovery='page'] > .bui-details {
	margin-top: calc(var(--space-2) + var(--space-1));
}
@media (max-width: 480px) {
	.bui-recovery[data-recovery='page'] {
		padding: var(--space-4);
	}
}

/* A place whose read did not answer is one quiet line (0.24.1): the outage's mark in the warning color beside
   its words, never an empty place's box, so several places of one outage never read as a stack of boxes. */
.bui-empty-outage {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--space-2);
}
.bui-empty-outage .bui-empty-mark {
	color: var(--color-warning);
}
.bui-empty-outage .bui-empty-mark > .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-empty-outage .bui-empty-title {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-empty-outage .bui-empty-body {
	grid-column: 2;
}
/* An outage's place in a table's cell or a row's value (0.33.0): the same mark and words as phrasing content,
   on one line of the cell's size, so a list of rows keeps its rhythm. */
.bui-empty-inline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
	vertical-align: middle;
}
.bui-empty-inline .bui-empty-mark {
	display: inline-flex;
	flex: none;
	color: var(--color-warning);
}
.bui-empty-inline .bui-empty-mark > .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-empty-inline .bui-empty-said {
	min-width: 0;
	overflow-wrap: anywhere;
}
/* An empty or unavailable place inside a region that is framed already: no box inside a box (0.24.0). */
.bui-empty-unframed {
	padding: var(--space-3) 0;
	border: 0;
}

/* When content kept from an earlier read was read: quiet, its time in tabular figures. */
.bui-last-update {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
}

/* The family bar's notice when it says an outage (0.44.0, D132): the warning tone with the outage's mark, who did
   not answer and, under the words, when it last tried; its way on after them, on their first line. */
.bui-navmenu-notice[data-tone='warning'] {
	flex-wrap: nowrap;
	background: var(--color-warning-surface);
}
/* One line tall with a baseline of its own, so the row's baseline sets it on the words' first line */
.bui-navmenu-notice-mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 1lh;
	color: var(--color-warning);
}
.bui-navmenu-notice-mark::before {
	content: '\200b';
	width: 0;
}
.bui-navmenu-notice-mark > .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-navmenu-notice-words {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-navmenu-notice-action {
	flex: none;
}

/* Who did not answer among the products a list of notifications reads (0.44.0, D163): one line each, then what is
   not listed. */
.bui-notify-silent {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A named in-page loading line's mark is work in progress's (D129, 0.21.0): the half-filled circle in the
   colour of work in progress, as `Status`' busy, pulsing a few times and then still; still at once under
   reduced motion. Never a ring with a dot, which read as a choice to make. */
.bui-loading > .bui-spinner {
	flex: none;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--color-info);
	border-radius: var(--radius-round);
	background: linear-gradient(to right, var(--color-info) 50%, transparent 50%);
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-loading > .bui-spinner:dir(rtl) {
	background: linear-gradient(to left, var(--color-info) 50%, transparent 50%);
}
@media (prefers-reduced-motion: reduce) {
	.bui-loading > .bui-spinner {
		animation: none;
	}
}

/* A state's mark differs by shape as well as hue (0.15.0, decision C2, DQ-04): a filled circle for done
   or ready, a half-filled circle for work in progress (0.18.4: an open ring read as a letter beside
   words), a diamond for what needs the person, a square for a
   failure, a hollow circle for what rests, a dashed circle for what is not known. It follows `status()`'s
   tones too: `warning` is drawn as attention and `danger` as a failure. Tokens only. */
.bui-status-dot {
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	margin-top: calc((1lh - 9px) / 2);
}
.bui-status-label {
	min-width: 0;
}
.bui-status-success .bui-status-dot {
	background: var(--color-success);
}
.bui-status-progress .bui-status-dot {
	border: 1.5px solid var(--color-info);
	background: linear-gradient(to right, var(--color-info) 50%, transparent 50%);
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-status-progress:dir(rtl) .bui-status-dot {
	background: linear-gradient(to left, var(--color-info) 50%, transparent 50%);
}
.bui-status-attention .bui-status-dot,
.bui-status-warning .bui-status-dot {
	border-radius: 1px;
	background: var(--color-warning);
	transform: rotate(45deg) scale(0.85);
}
.bui-status-failure .bui-status-dot,
.bui-status-danger .bui-status-dot {
	border-radius: 2px;
	background: var(--color-danger);
}
.bui-status-idle .bui-status-dot {
	border: 1.5px solid var(--color-text-muted);
	background: none;
}
.bui-status-unknown .bui-status-dot {
	border: 1.5px dashed var(--color-text-muted);
	background: none;
}
/* The badge: the mark and the words in a pill, in the tone's own surface. */
.bui-status-badge {
	align-items: center;
	padding: 1px var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-round);
	font-size: var(--text-label);
	white-space: nowrap;
}
.bui-status-badge .bui-status-dot {
	margin-top: 0;
}
.bui-status-badge.bui-status-success {
	border-color: var(--color-success);
	background: var(--color-success-surface);
}
.bui-status-badge.bui-status-attention {
	border-color: var(--color-warning);
	background: var(--color-warning-surface);
}
.bui-status-badge.bui-status-failure {
	border-color: var(--color-danger);
	background: var(--color-danger-surface);
}
.bui-status-badge.bui-status-progress {
	border-color: var(--color-info);
	background: var(--color-info-surface);
}

/* Skeleton rows in the shape of what comes (0.15.0): a list's mark and two lines, a table's three cells. */
.bui-skeleton-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--bui-target);
}
.bui-skeleton-row > .bui-skeleton-line {
	flex: 1;
}
.bui-skeleton-mark {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: var(--radius-round);
	background: var(--color-border-strong);
}
.bui-skeleton-text {
	display: grid;
	flex: 1;
	gap: var(--space-1);
}
.bui-skeleton-text > .bui-skeleton-line:last-child {
	width: 45%;
	height: 10px;
}

/* Compact collections: tools, the table with rows as links, and the pager. */
/* A collection never widens the page: its column shrinks to the container, a filter never exceeds the
   row, and a table wider than the room scrolls inside the body. */
.bui-collection {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	min-width: 0;
}
.bui-collection-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
}
.bui-collection-search {
	display: grid;
	gap: var(--space-1);
	flex: 1 1 14rem;
	min-width: 0;
}
.bui-collection-filter {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	max-width: 100%;
}
/* After a page change focus moves to the new rows' region, where reading starts: it draws nothing (D187) */
.bui-collection-body:focus {
	outline: none;
}
/* A collection's body hangs into the gutter as a list does (D159, P5): its rows' and its table's surfaces
   reach past their words while the words, dividers, skeletons and messages stay on the content edge, and
   scrolling clips none of it. */
.bui-collection-body {
	margin-inline: calc(-1 * var(--space-3));
	padding-inline: var(--space-3);
	overflow-x: auto;
}
.bui-collection-body[aria-busy='true'] .bui-table {
	opacity: 0.6;
}

/* A table hangs into the gutter as a list's rows do (0.21.1, D159, P5): its first and last cells keep their
   padding, so their words stay on the content edge while a hovered row's surface reaches past them. */
.bui-table {
	width: calc(100% + 2 * var(--space-3));
	margin-inline: calc(-1 * var(--space-3));
	border-collapse: collapse;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-table th,
.bui-table td {
	--bui-divider-start: 0px;
	--bui-divider-end: 0px;
	height: var(--bui-row);
	padding: var(--space-2) var(--space-3);
	background: linear-gradient(var(--color-border-strong), var(--color-border-strong)) no-repeat;
	background-size: 0 0;
	text-align: left;
	vertical-align: middle;
}
/* A list's dividers: under the header and between rows, in the list's color, on the content edge. */
.bui-table th:first-child,
.bui-table td:first-child {
	--bui-divider-start: var(--space-3);
}
/* The last shown cell, also when a column of lower priority is hidden (FAM-40) */
.bui-table th:nth-last-child(1 of :not([data-bui-hidden])),
.bui-table td:nth-last-child(1 of :not([data-bui-hidden])) {
	--bui-divider-end: var(--space-3);
}
.bui-table thead th,
.bui-table tbody tr:not(:first-child) > * {
	background-size: calc(100% - var(--bui-divider-start) - var(--bui-divider-end)) 1px;
	background-position: var(--bui-divider-start) top;
}
.bui-table thead th {
	background-position: var(--bui-divider-start) bottom;
}
.bui-table thead th {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	white-space: nowrap;
}
.bui-table tbody th {
	font-weight: var(--weight-medium);
}
.bui-table .bui-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.bui-table-links tbody tr {
	position: relative;
}
.bui-table-links tbody tr:not(.bui-data-group):hover {
	background-color: var(--overlay-lift);
}
.bui-table-links tbody tr:has(.bui-row-link:active) {
	background-color: var(--color-surface-sunken);
}
.bui-row-link {
	color: var(--color-link);
	text-decoration: none;
}
.bui-row-link:hover {
	text-decoration: underline;
}
/* The whole row opens the detail; the link itself stays the one focusable target. */
.bui-row-link::after {
	content: '';
	position: absolute;
	inset: 0;
}
.bui-table-links tbody tr:has(.bui-row-link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
.bui-row-link:focus-visible {
	outline: none;
}
.bui-table-links a:not(.bui-row-link),
.bui-table-links button {
	position: relative;
	z-index: 1;
}

.bui-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.bui-pager-summary {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}

/* A collection's table on a phone; a DataTable draws its own narrow rows (table.css). */
@media (max-width: 640px) {
	.bui-table:not(.bui-data) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.bui-table:not(.bui-data),
	.bui-table:not(.bui-data) tbody,
	.bui-table:not(.bui-data) tr,
	.bui-table:not(.bui-data) th,
	.bui-table:not(.bui-data) td {
		display: block;
		width: 100%;
	}
	/* The table keeps its hang into both gutters when its rows stack */
	.bui-table:not(.bui-data) {
		width: calc(100% + 2 * var(--space-3));
	}
	.bui-table:not(.bui-data) tbody tr {
		padding: var(--space-2) var(--space-3);
	}
	.bui-table:not(.bui-data) tbody tr:not(:first-child) {
		background-image: linear-gradient(var(--color-border-strong), var(--color-border-strong));
		background-repeat: no-repeat;
		background-position: center top;
		background-size: calc(100% - 2 * var(--space-3)) 1px;
	}
	.bui-table:not(.bui-data) tbody th,
	.bui-table:not(.bui-data) tbody td {
		height: auto;
		padding: var(--space-1) 0;
		background: none;
	}
	.bui-table:not(.bui-data) tbody td::before {
		content: attr(data-label);
		display: block;
		color: var(--color-text-muted);
		font-size: var(--text-label);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-label);
	}
	.bui-table:not(.bui-data) .bui-numeric {
		text-align: left;
	}
	.bui-pager {
		justify-content: center;
	}
	.bui-pager-summary {
		order: -1;
		flex-basis: 100%;
		text-align: center;
	}
}

/* Column priority (FAM-40): a hidden column leaves every row; measuring lays the table out at its
   content's width for a moment. */
.bui-table [data-bui-hidden] {
	display: none;
}
.bui-table.bui-table-measure {
	width: max-content;
}
.bui-collection-columns {
	justify-self: start;
}
.bui-collection-columns[hidden] {
	display: none;
}

/* One search/filter composition in a collection or beside the page's existing actions. */
.bui-list-tools,
.bui-list-search,
.bui-list-filter-tools,
.bui-list-restrictions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	min-width: 0;
	max-width: 100%;
}
.bui-list-tools[hidden],
.bui-list-tools [hidden] { display: none; }
.bui-list-search-editor {
	flex: 1 1 12rem;
	min-width: 0;
	max-width: 100%;
}
.bui-list-search-editor input {
	width: 100%;
	min-width: 0;
}
.bui-list-query,
.bui-list-restriction {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: start;
}
/* The tools are a row of controls, so their quiet ones keep their padding beside each other (D188) */
.bui-button-quiet:is(.bui-list-query, .bui-list-restriction) {
	margin-inline: 0;
}
.bui-list-restriction > span { min-width: 0; }
.bui-list-restriction > svg { flex: 0 0 auto; }
.bui-list-filters .bui-disclosure-panel,
.bui-list-filters .bui-disclosure-leaving {
	padding: var(--space-3);
}
.bui-list-filters .bui-disclosure-panel:not([hidden]) {
	display: grid;
	gap: var(--space-3);
}
.bui-list-filters .bui-select,
.bui-list-filters .bui-select-control { max-width: 100%; }

/* A table of rows the product holds (DataTable, 0.15.0, DQ-12): a compact search with its placeholder,
   headers that sort, group headings with their count, rows that open with the whole row, and on a narrow
   region a name followed by labeled inline values instead of a card per field. It reuses the collection's table. */
.bui-data-table {
	container: bui-data / inline-size;
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}
.bui-data-tools[hidden] {
	display: none;
}
.bui-data-tools {
	max-width: var(--layout-form);
}
.bui-data-body {
	min-width: 0;
	margin-inline: calc(-1 * var(--space-3));
	padding-inline: var(--space-3);
	overflow-x: auto;
}
.bui-data-sorter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.bui-data-sorter:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
.bui-data-sort {
	width: 14px;
	height: 14px;
	opacity: 0;
}
.bui-data-sorter:hover .bui-data-sort,
.bui-data-sort[data-order] {
	opacity: 1;
}
.bui-data-sort[data-order='ascending'] {
	transform: rotate(180deg);
}
.bui-data-group th {
	padding-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	text-align: start;
}
/* A row opened in place: its primary cell is a button drawn as the name, its target the whole row. */
.bui-data button.bui-row-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.bui-data .bui-row-link {
	position: static;
	z-index: auto;
	color: var(--color-text);
}
.bui-data .bui-mono {
	font-family: var(--font-mono);
}
/* A narrow table's sort (0.44.0): "Sort by" and its select in a line above the rows, drawn only on the narrow
   form, whose header with its sort buttons is hidden from sight */
.bui-data-order {
	display: none;
}
/* A row's menu (L6): a column of its own, as narrow as its button, which keeps the row's height; it shows where the
   pointer or the focus is (the list rules' reveal). The table draws it from `menu(row)` (0.44.0), or a product's own
   column marked `menu: true` (0.43.0) is drawn as it: one column, one geometry (`.bui-data-menu`, `data-menu`) */
.bui-data .bui-data-menu {
	width: 1%;
	padding-block: 0;
	text-align: end;
	white-space: nowrap;
}
.bui-data td.bui-data-menu .bui-menu-holder {
	vertical-align: middle;
}
/* A narrow region: the name, then labeled values wrapping together in one muted line. */
@container bui-data (max-width: 36rem) {
	.bui-data thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.bui-data,
	.bui-data tbody {
		display: block;
	}
	.bui-data tr {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-2);
		padding: var(--space-2) var(--space-3);
	}
	.bui-data tbody tr:not(:first-child) {
		background-image: linear-gradient(var(--color-border-strong), var(--color-border-strong));
		background-repeat: no-repeat;
		background-position: center top;
		background-size: calc(100% - 2 * var(--space-3)) 1px;
	}
	/* A group's heading keeps one line above it, its row's */
	.bui-data .bui-data-group th {
		background: none;
	}
	.bui-data th[scope='row'] {
		flex-basis: 100%;
		height: auto;
		padding: 0;
		background: none;
	}
	.bui-data td {
		height: auto;
		padding: 0;
		background: none;
		color: var(--color-text-muted);
		font-size: var(--text-small);
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		text-align: start;
	}
	/* Empty cells leave no label or separator. Self-describing summaries omit the repeated label. */
	.bui-data td[data-empty] {
		display: none;
	}
	.bui-data td::before {
		content: none;
	}
	.bui-data td[data-label]:not([data-label=''], [data-summary])::before {
		content: attr(data-label) ': ';
	}
	/* The menu cell, drawn first on the narrow line, starts no separator */
	.bui-data td:not([data-empty], .bui-data-menu) ~ td:not([data-empty])::before {
		content: '· ';
	}
	.bui-data td:not([data-empty], .bui-data-menu) ~ td[data-label]:not([data-empty], [data-label=''], [data-summary])::before {
		content: '· ' attr(data-label) ': ';
	}
	.bui-data-group {
		border-bottom: 0;
	}
	.bui-data-order:not([hidden]) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-2);
		min-width: 0;
	}
	/* A row's menu stays beside its name (L6): the name and the menu share the first line, centred on it, and the
	   values wrap below them (a break after the menu), wherever the menu's column stands; no label is drawn before it,
	   a product's column keeping its name in the header; a row with no actions leaves its name the whole line */
	.bui-data tr:has(> .bui-data-menu) > th[scope='row'] {
		flex: 1 1 0;
		order: -2;
		min-width: 0;
	}
	.bui-data tr:has(> .bui-data-menu)::after {
		content: '';
		flex-basis: 100%;
		order: -1;
	}
	/* The menu's lower half extends past its flex line. Reserve that room before the values. */
	.bui-data tr:has(> .bui-data-menu:not([data-empty]))::after {
		block-size: max(0px, min(calc((var(--bui-target) - 1lh) / 2), var(--space-2)));
	}
	.bui-data td.bui-data-menu {
		display: flex;
		flex: none;
		align-items: center;
		order: -1;
		width: auto;
		color: inherit;
		font-size: inherit;
	}
	.bui-data td.bui-data-menu[data-empty] {
		display: none;
	}
	.bui-data tbody > tr[data-menu] > td.bui-data-menu[data-menu]::before {
		content: none;
	}
	/* Its button stands in the row's padding, never past it: centred on the name's line */
	.bui-data td.bui-data-menu .bui-menu-holder {
		margin-block: max(calc((1lh - var(--bui-target)) / 2), calc(-1 * var(--space-2)));
	}
}

/* A table at the top of a framed box (0.41.0, D184: `framed`, `data-framed`): with no tools above it, its first
   line's capitals stand at the box's inset. A wide table rises by its header row's room above the capitals (the
   label's capitals, within half a pixel of the table's own), which its scroller clips with nothing drawn there; a
   narrow one, which never scrolls sideways, lifts its first row's padding and half-leading, so that row's fill
   hangs into the box's padding as its sides do; its first group's heading, when it is grouped, keeps no room above.
   Since 0.44.0 only while it leads its box: nothing shown stands before it, or before React's host of it (a hidden
   element, a line for screen readers, a script or a style does not count), so a line a product draws above it only
   at times (a "Last updated" over kept rows) leaves it in place and a product sets `framed` once; a narrow table's
   sort line above its rows leaves it in place too. */
@supports (padding-top: calc(1lh - 1cap)) {
	.bui-data-table[data-framed]:not(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *, .bui-host:is(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *) > *, :has(> .bui-data-tools:not([hidden]))) > .bui-data-body .bui-table {
		margin-block-start: calc((1cap - var(--bui-row)) / 2);
	}
	@container bui-data (max-width: 36rem) {
		.bui-data-table[data-framed] > .bui-data-body {
			overflow: visible;
		}
		.bui-data-table[data-framed]:not(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *, .bui-host:is(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *) > *, :has(> .bui-data-tools:not([hidden]))) > .bui-data-body .bui-table {
			margin-block-start: 0;
		}
		.bui-data-table[data-framed]:not(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *, .bui-host:is(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *) > *, :has(> .bui-data-tools:not([hidden])), :has(> .bui-data-order:not([hidden]))) > .bui-data-body .bui-data tbody > tr:first-child {
			margin-block-start: calc(-1 * var(--space-2) - (1lh - 1cap) / 2);
		}
		/* A grouped table starts with its first group's heading: none of a group's room above it there, and its
		   half-leading taken off in the heading's own size, as a label's */
		.bui-data-table[data-framed]:not(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *, .bui-host:is(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *) > *, :has(> .bui-data-tools:not([hidden])), :has(> .bui-data-order:not([hidden]))) > .bui-data-body .bui-data tbody > tr.bui-data-group:first-child {
			margin-block-start: calc(-1 * var(--space-2));
		}
		.bui-data-table[data-framed]:not(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *, .bui-host:is(:not([hidden], .bui-hidden, script, style, template, .bui-host:empty, .bui-host:has(> [hidden]:only-child)) ~ *) > *, :has(> .bui-data-tools:not([hidden])), :has(> .bui-data-order:not([hidden]))) > .bui-data-body .bui-data tbody > tr.bui-data-group:first-child > th {
			padding-top: 0;
			margin-block-start: calc((1cap - 1lh) / 2);
		}
	}
}

/* One object in a list (ListRow, 0.15.0, DQ-12): a dense row, its name in the text color with a muted
   line under it, its end's facts and quiet actions, the whole row opening the object. Narrow rows (under
   30rem, measured on the row) keep their facts below the name, wrapping as needed. A copyable value (CopyValue) is mono. */
/* A list's rows keep their words on the content edge (0.19.1, the alignment audit's P5): the list hangs
   its rows' inline padding into the gutter, so a hovered or current row's surface reaches past its words
   while each divider stays on the edge. */
.bui-rows {
	display: grid;
	margin: 0 calc(-1 * var(--space-3));
	padding: 0;
	list-style: none;
}
/* A list inside a row is indented by its row: it never hangs again, or it would reach past the page */
.bui-rows .bui-rows {
	margin-inline: 0;
}
.bui-rows .bui-row {
	border-radius: 0;
}
.bui-rows .bui-row::before {
	position: absolute;
	inset: 0 var(--space-3) auto;
	border-top: 1px solid var(--color-border-strong);
	content: '';
	pointer-events: none;
}
/* A React row is hosted in an element of its own (`display: contents`). */
.bui-rows > .bui-row:first-child::before,
.bui-rows > :first-child > .bui-row::before,
.bui-rows > :first-child > .bui-host:first-child > .bui-row::before {
	content: none;
}
/* Under a row's name (0.30.0): what a list item holds after its row (its quiet actions, a fold, its
   technical details) starts where the row's name does, past the row's padding, a lead mark and the gap.
   `--bui-row-axis` is that distance from the item's edge for a row led by a state's mark; an item whose
   row leads with an icon, or with nothing, sets it itself. */
:root {
	--bui-row-axis: calc(var(--space-3) + 9px + var(--space-3));
}
.bui-row-under {
	margin-inline: var(--bui-row-axis) var(--space-3);
}
.bui-row {
	container: bui-row / inline-size;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* A wrapped end sits close under the name: a small row gap, the usual column gap */
	gap: var(--space-1) var(--space-3);
	min-height: var(--bui-target);
	padding: var(--space-3);
	border-radius: var(--radius-control);
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
/* The row the arrow keys are on, the cursor, is lit as the pointer's row is, and ringed inside (0.34.0, D187) */
.bui-row[data-open]:not([data-current]):is(:hover, :has(.bui-row-title:focus-visible)) {
	background: var(--overlay-lift);
}
.bui-row[data-open]:has(.bui-row-title:active) {
	background: var(--color-surface-sunken);
}
.bui-row[data-current] {
	background: var(--color-surface-selected);
}
.bui-row-lead:empty {
	display: none;
}
.bui-row-lead {
	display: inline-flex;
	flex: none;
	color: var(--color-text-muted);
}
.bui-row-lead > .bui-icon {
	width: 16px;
	height: 16px;
}
/* The lead's state is its mark; its words stay for assistive technology. */
.bui-row-mark .bui-status-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.bui-row-main {
	display: grid;
	gap: var(--space-1);
	/* Name and end share a line while both fit; a narrow row puts the end under the name (0.16.2) */
	flex: 1 1 12rem;
	min-width: 0;
}
.bui-row-title {
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	text-align: start;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
span.bui-row-title {
	cursor: default;
}
/* The name's target covers the row, so the whole row opens the object. */
.bui-row[data-open] .bui-row-title::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.bui-row-title:focus-visible {
	outline: none;
	animation: none;
}
.bui-row[data-open]:has(.bui-row-title:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}
.bui-row-title:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bui-row-meta {
	min-width: 0;
	margin: 0;
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bui-row-meta[hidden],
.bui-row-end[hidden] {
	display: none;
}
.bui-row-end {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	min-width: 0;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
}
.bui-row-fact {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Everything that acts on its own stays above the name's target. */
.bui-row-check,
.bui-row-actions,
.bui-row-end .bui-menu-holder,
.bui-row :is(.bui-row-lead, .bui-row-meta, .bui-row-end) :is(a, button, input, select, textarea, summary, label, [tabindex], .bui-tooltip-anchor) {
	position: relative;
	z-index: 1;
}
.bui-row-check {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--color-action);
}
.bui-row-actions.bui-action-line-actions {
	margin-inline-start: 0;
}
.bui-row-end :is(.bui-button, .bui-icon-button):not(:disabled, [aria-disabled='true']):is(:hover, :focus-visible, [aria-expanded='true']) {
	background: var(--color-surface);
	border-color: var(--color-border-control);
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bui-row-end :is(.bui-button, .bui-icon-button):not(:disabled, [aria-disabled='true']):active {
	background: var(--color-surface-sunken);
}
/* Two recurring actions share content-sized columns across rows. The caller keeps absent actions as
   null in the same slot. Use only with lead/name/actions/menu rows, without end facts or a checkbox. */
.bui-rows-aligned {
	container: bui-list / inline-size;
	grid-template-columns: max-content minmax(0, 1fr) repeat(3, max-content);
	column-gap: var(--space-3);
}
.bui-rows-aligned > :not(.bui-row),
.bui-rows-aligned > .bui-row,
.bui-rows-aligned > * > .bui-row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}
.bui-rows-aligned .bui-row { container-type: normal; }
.bui-rows-aligned .bui-row-lead { grid-column: 1; }
.bui-rows-aligned .bui-row-main { grid-column: 2; }
.bui-rows-aligned .bui-row-end {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 3 / -1;
}
.bui-rows-aligned .bui-row-end > .bui-action-line,
.bui-rows-aligned .bui-row-actions { display: contents; }
.bui-rows-aligned .bui-row-actions .bui-button {
	grid-column: var(--bui-action-column);
	grid-row: 1;
	justify-content: flex-start;
}
.bui-rows-aligned .bui-row-end > .bui-menu-holder { grid-column: 3; grid-row: 1; }
.bui-rows-aligned > * > :not(.bui-row) { grid-column: 1 / -1; }
@container bui-list (max-width: 48rem) {
	.bui-rows-aligned .bui-row { display: flex; }
	.bui-rows-aligned .bui-row-end {
		display: flex;
		flex: 1 1 100%;
		justify-content: flex-start;
	}
	.bui-rows-aligned .bui-row-end > .bui-action-line { display: flex; flex: 1; }
	.bui-rows-aligned .bui-row-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		flex: 1;
	}
}
@container bui-list (max-width: 24rem) {
	.bui-rows-aligned .bui-row-actions { grid-template-columns: minmax(0, 1fr); }
	.bui-rows-aligned .bui-row-actions .bui-button { grid-column: 1; grid-row: auto; }
}
@container bui-row (max-width: 30rem) {
	.bui-row-end {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
	.bui-row-end:has(> .bui-menu-holder:only-child) {
		flex: none;
	}
	/* A narrow row's quiet line wraps rather than cutting its last facts (L10) */
	.bui-row-meta {
		white-space: normal;
	}
	.bui-row-fact {
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}
/* A copyable value: mono, cut at its end (or in its middle) and shown whole in a tooltip, then Copy. */
.bui-copy-value {
	display: inline-flex;
	align-items: center;
	gap: calc(2 * var(--bui-quiet-hang));
	max-width: 100%;
	min-width: 0;
}
.bui-copy-value-text {
	display: inline-flex;
	min-width: 0;
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	text-decoration: none;
}
a.bui-copy-value-text:hover {
	text-decoration: underline;
}
.bui-copy-value-start {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bui-copy-value-tail {
	flex: none;
	white-space: pre;
}
/* Copy keeps its word whole and its size (0.17.1): inside a box that breaks long words anywhere (a fact's
   value) it would otherwise shrink to one letter per line. The value is what gets cut. */
.bui-copy-value > .bui-copy-button {
	flex: none;
	white-space: nowrap;
}
.bui-copy-value > .bui-copy-button .bui-button {
	white-space: nowrap;
	overflow-wrap: normal;
}
/* React's host of a CopyValue is the row's flex item: it may shrink, so the value is cut instead of
   pushing the row past a phone's width. */
.bui-host:has(> .bui-copy-value) {
	min-width: 0;
	max-width: 100%;
}

/* Contained object collections (0.45.0). Opt in once on the list, not with product row CSS.
   The frame takes the page edge; its shared inset holds identity, metadata and actions together. */
.bui-rows[data-framed] {
	--bui-rows-inset: var(--space-4);
	--bui-row-axis: calc(var(--bui-rows-inset) + 9px + var(--space-3));
	margin-inline: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-base);
	background: var(--color-surface);
}
.bui-rows[data-framed] .bui-row {
	padding: var(--bui-rows-inset);
}
.bui-rows[data-framed] .bui-row::before {
	inset-inline: var(--bui-rows-inset);
}
.bui-rows[data-framed] .bui-row-title {
	font-weight: var(--weight-semibold);
}
.bui-rows[data-framed] > :first-child,
.bui-rows[data-framed] > :first-child > .bui-row,
.bui-rows[data-framed] > :first-child > .bui-host:first-child > .bui-row { border-start-start-radius: var(--radius-base); border-start-end-radius: var(--radius-base); }
.bui-rows[data-framed] > :last-child,
.bui-rows[data-framed] > :last-child > .bui-row,
.bui-rows[data-framed] > :last-child > .bui-host:first-child > .bui-row { border-end-start-radius: var(--radius-base); border-end-end-radius: var(--radius-base); }
.bui-row[data-inline] .bui-row-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}
.bui-row[data-inline] .bui-row-title { max-width: 100%; }
.bui-row[data-inline] .bui-row-meta { max-width: 100%; white-space: normal; }

.bui-rows[data-framed] .bui-row-lead .bui-organization-mark {
	width: var(--space-10);
	height: var(--space-10);
	font-size: var(--text-body);
}

/* The frame already closes the final row; the completeness text needs no second boundary. */
.bui-rows[data-framed] + .bui-rows-end,
.bui-rows-groups:has(> .bui-rows-group > .bui-rows[data-framed]) + .bui-rows-end {
	border-top: 0;
}

/* The family's list rules (0.21.1, D162). A row with a quiet line under its name puts its lead on the
   name's line, so marks read down one column at the names' height (L2); a row of one line keeps it
   centered with the name */
.bui-row:not([data-inline]):has(> .bui-row-main > .bui-row-meta:not([hidden])) > .bui-row-lead {
	align-self: flex-start;
	align-items: center;
	min-height: calc(var(--text-body) * var(--leading-body));
}
.bui-row:not([data-inline]):has(> .bui-row-main > .bui-row-meta:not([hidden])) > .bui-row-lead .bui-status-dot {
	margin-top: 0;
}
/* A row's menu shows on the row a pointer rests on, the row the focus is in and while it is open; a
   touch screen always shows it (L6). A `DataTable`'s menu column too, its own or a product's (0.44.0) */
@media (hover: hover) and (pointer: fine) {
	.bui-row:not(:hover, :focus-within) > .bui-row-end > .bui-menu-holder:not(:has([aria-expanded='true'])),
	.bui-data tbody > tr:not(:hover, :focus-within) > .bui-data-menu .bui-menu-holder:not(:has([aria-expanded='true'])) {
		opacity: 0;
	}
}
/* A row whose end is only its menu keeps it beside its name at every width (L6) */
.bui-row:has(> .bui-row-end > .bui-menu-holder:only-child) {
	flex-wrap: nowrap;
}
.bui-row-end:has(> .bui-menu-holder:only-child) {
	flex: none;
}
/* Groups of rows under their labels, each label opening its list (L4) */
.bui-rows-groups {
	display: grid;
}
.bui-rows-label {
	margin: 0;
	padding: var(--space-6) 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: var(--leading-label);
}
.bui-rows-group:first-child > .bui-rows-label {
	padding-top: var(--space-1);
}
/* A list's end line: the list is whole (L5). A line on the content edge closes the last row; the keys follow
   its words, never stranded at the far edge. */
.bui-rows-end {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	line-height: var(--leading-label);
}
/* A line of the list, not a paragraph of prose: it spans the list even where a product caps its pages'
   paragraphs at the reading measure (a selector of two classes outranks a product's class and element),
   under `Collection`'s list and under a product's own `ul.bui-rows` (`EndLine`, 0.39.0) */
.bui-collection-body > .bui-rows-end,
.bui-rows + .bui-rows-end {
	max-width: none;
}
/* The words a search matched, in the names (L8) */
.bui-match {
	border-radius: 2px;
	background: var(--color-info-surface);
	color: inherit;
}

/* Wrapped facts and controls continue the name's column, after its lead. A menu alone stays beside
   the name. Comparison tables and compact pickers retain their own density. */
@container bui-row (max-width: 30rem) {
	.bui-row:has(> .bui-row-lead:not(:empty)) > .bui-row-end:not(:has(> .bui-menu-holder:only-child)) {
		padding-inline-start: calc(9px + var(--space-3));
	}
	.bui-row:has(> .bui-row-lead > .bui-icon) > .bui-row-end:not(:has(> .bui-menu-holder:only-child)) {
		padding-inline-start: calc(16px + var(--space-3));
	}
}

/* A checklist of setup steps (Checklist, 0.15.0, DQ-17) and an empty state that tells its kind apart
   (EmptyState): the steps in order with their progress, done ones folded to their title with a check. */
.bui-checklist {
	display: grid;
	gap: var(--space-3);
	max-width: var(--layout-form);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface-raised, var(--color-surface));
}
.bui-checklist-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
}
.bui-checklist-title {
	margin: 0;
	font-size: var(--text-title-3);
	font-weight: var(--weight-semibold);
}
.bui-checklist-progress {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-variant-numeric: tabular-nums;
}
.bui-checklist-bar {
	position: relative;
	grid-column: 1 / -1;
	height: 4px;
	overflow: hidden;
	border-radius: var(--radius-round);
	background: var(--color-surface-sunken);
}
.bui-checklist-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--bui-checklist-done, 0) * 100%);
	background: var(--color-success);
	transition: width var(--motion-standard) var(--motion-ease);
}
.bui-checklist-steps {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-checklist-step {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--radius-control);
}
.bui-checklist-step[data-state='current'] {
	background: var(--color-surface-sunken);
}
.bui-checklist-marker {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-round);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-checklist-step[data-state='current'] .bui-checklist-marker {
	border-color: var(--color-focus);
	color: var(--color-text);
}
.bui-checklist-step[data-state='done'] .bui-checklist-marker {
	border-color: var(--color-success);
	background: var(--color-success);
	color: var(--color-surface);
}
.bui-checklist-step[data-state='blocked'] .bui-checklist-marker {
	border-style: dashed;
}
.bui-checklist-marker > .bui-icon {
	width: 14px;
	height: 14px;
}
.bui-checklist-body {
	display: grid;
	justify-items: start;
	gap: var(--space-1);
	min-width: 0;
	font-size: var(--text-small);
}
.bui-checklist-body > p {
	margin: 0;
}
.bui-checklist-name {
	font-weight: var(--weight-medium);
	line-height: 22px;
}
.bui-checklist-step[data-state='done'] .bui-checklist-name {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-checklist-detail,
.bui-checklist-reason {
	color: var(--color-text-muted);
}
.bui-checklist-action {
	margin-top: var(--space-1);
}

/* An empty state: its mark, a title, at most one sentence, one primary action, a first run's steps. */
.bui-empty-mark {
	display: inline-flex;
	color: var(--color-text-muted);
}
.bui-empty-mark > .bui-icon {
	width: 24px;
	height: 24px;
}
.bui-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.bui-empty > .bui-checklist {
	justify-self: stretch;
	margin-top: var(--space-2);
}

/* A request waiting for the person's answer (CommandCard, 0.15.0, DQ-13): a neutral raised surface with
   an attention edge, the command whole in a wrapping monospace block, the answers with their keys. */
.bui-command {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-inline-start: 3px solid var(--color-warning);
	border-radius: var(--radius-base);
	background: var(--color-surface-raised, var(--color-surface));
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-command[data-state='allowed'] {
	border-inline-start-color: var(--color-success);
}
.bui-command[data-state='denied'] {
	border-inline-start-color: var(--color-border-strong);
}
.bui-command-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
}
.bui-command-detail,
.bui-command-line {
	margin: 0;
	color: var(--color-text-muted);
}
.bui-command-line:empty {
	display: none;
}
.bui-command-code {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-control);
	background: var(--color-code);
	color: var(--color-on-code);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* A <code> inside a code box takes the box's face and size: the browser's own style gives <code> its default
   monospace (Courier in Chrome), whatever the box says (0.32.0) */
:is(.bui-command-code, .bui-copy-command, .bui-activity-code) > code {
	font: inherit;
}
.bui-command-code[data-folded] {
	max-height: calc(8lh + 2 * var(--space-2));
	overflow: hidden;
}
.bui-command-toggle {
	justify-self: start;
	font-size: var(--text-label);
}
.bui-command-choice {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.bui-command-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.bui-command-actions[hidden] {
	display: none;
}
.bui-command-actions .bui-keys {
	padding: 0 var(--space-1);
	border: 1px solid currentColor;
	border-radius: var(--radius-control);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	opacity: 0.75;
}
/* A command the person may correct before allowing, and a note sent with a decision (0.16.0, CNV-10). */
.bui-command-edit {
	box-sizing: border-box;
	width: 100%;
	min-height: 2lh;
	border: 1px solid var(--color-border-control);
	resize: vertical;
}
.bui-command-note {
	display: grid;
	gap: var(--space-2);
}
.bui-command-note[hidden] {
	display: none;
}
.bui-command-note-field {
	box-sizing: border-box;
	width: 100%;
	resize: vertical;
}
.bui-command-note-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* The shared family header and the family lockup. The notification entry and its panel are in notify.css. */
.bui-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	min-height: var(--layout-family);
	padding: var(--space-1) var(--space-4);
	background: var(--color-family-bar);
	color: var(--color-family-text);
}
.bui-header a {
	color: inherit;
	text-decoration: none;
}
.bui-header :focus-visible {
	outline-color: var(--color-family-marker);
}
.bui-header-start {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.bui-header-brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--bui-target);
	font-weight: var(--weight-medium);
}
.bui-header-brand img,
.bui-header-brand svg {
	display: block;
	height: 21px;
	width: auto;
}
.bui-header-toggle {
	display: none;
	place-items: center;
	width: var(--bui-target);
	height: var(--bui-target);
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bui-header-toggle:hover,
.bui-header .bui-disclosure-bell:hover {
	background: var(--overlay-lift);
}
.bui-header-external .bui-header-toggle {
	display: inline-grid;
}
.bui-header-context {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-family-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}
.bui-crumbs a,
.bui-crumbs span[aria-current] {
	overflow-wrap: anywhere;
}
.bui-crumbs [aria-current] {
	color: var(--color-family-text);
}
.bui-header-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-header-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bui-target);
	padding: 0 var(--space-2);
	border-radius: var(--radius-control);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-header-links a:hover {
	background: var(--overlay-lift);
}
.bui-header-links a[aria-current] {
	box-shadow: inset 0 -2px 0 var(--color-family-marker);
}
.bui-header-end {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}
@media (max-width: 767px) {
	.bui-header-has-nav .bui-header-toggle {
		display: inline-grid;
	}
	.bui-header-has-nav .bui-header-nav {
		order: 10;
		flex-basis: 100%;
	}
	.bui-header-has-nav:not([data-expanded]) .bui-header-nav {
		display: none;
	}
	.bui-header-links {
		flex-direction: column;
	}
	.bui-header-context {
		order: 5;
		flex-basis: 100%;
	}
}

/* The family lockup: the Beyond wordmark and the product name. The wordmark's letters fill only the
   upper part of its image (the drips of the O hang below them), so the name is sized to the letters'
   cap height and centred on them, not on the image box. */
.bui-lockup {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	line-height: 1;
}
.bui-lockup-mark {
	display: block;
	flex: none;
	width: auto;
	height: var(--bui-lockup-height, 21px);
}
.bui-header-brand .bui-lockup-mark {
	height: var(--bui-lockup-height, 21px);
}
.bui-lockup-name {
	padding-left: var(--space-2);
	font-family: var(--font-brand);
	border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	font-size: calc(var(--bui-lockup-height, 21px) * 0.714);
	font-weight: var(--weight-medium);
	white-space: nowrap;
	translate: 0 calc(var(--bui-lockup-height, 21px) * -0.02);
}
/* Where text-box trimming exists, the name's box is exactly its cap height (cap top to baseline), so
   its place no longer depends on the font's rounded ascent and descent: centred on the image and
   raised to the letters' centre (0.4445 of the wordmark's height, 0.0555 above its middle), cap top
   and baseline meet the letters' at every height. The padding keeps the divider as tall as before. */
@supports (text-box: trim-both cap alphabetic) {
	.bui-lockup-name {
		text-box: trim-both cap alphabetic;
		padding-block: calc(var(--bui-lockup-height, 21px) * 0.107);
		translate: 0 calc(var(--bui-lockup-height, 21px) * -0.0555);
	}
}
/* An archived project's mark beside its name (0.16.1): quiet words, never a color alone. */
.bui-family-archived {
	flex: none;
	margin-inline-start: var(--space-1);
	padding: 0 var(--space-1);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	color: var(--color-family-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

/* The notification entry on a header and its panel (NotificationEntry). The rows are in notices.css. */

/* Notification entry: the bell, with the unread count on its glyph (0.13.0). The count is anchored by
   its right edge just past the glyph's, inside the bell's target, so it grows over the bell, never
   toward the next control. */
.bui-disclosure-bell {
	position: relative;
	gap: 0;
	border: 0;
	background: transparent;
	color: inherit;
}
.bui-bell {
	position: relative;
	display: inline-grid;
	place-items: center;
}
.bui-bell > .bui-count {
	position: absolute;
	/* 6 px above the glyph's box: the count stays inside a host's low bar (the Desktop's 34 px). */
	top: calc(2px - var(--space-2));
	/* The glyph ends 7 px inside the bell's round target: the count ends 1 px inside it. */
	right: calc(2px - var(--space-2));
	min-width: 16px;
	height: 16px;
	padding: 0 var(--space-1);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
/* On a header the count is the family's marker on the bar, ringed in the bar's color so it stands
   apart from the glyph (D12: the coral on navy in both themes). */
.bui-header .bui-bell > .bui-count {
	background: var(--color-family-marker);
	color: var(--color-family-bar);
	outline: 2px solid var(--color-family-bar);
}
.bui-notify :is(.bui-disclosure-panel, .bui-disclosure-leaving) {
	width: min(24rem, calc(100vw - 2 * var(--space-4)));
	padding: var(--space-2);
	color: var(--color-text);
}
.bui-notify .bui-disclosure-panel:focus {
	outline: none;
}
/* The frame fills the panel, so its body is what scrolls when the panel meets its maximum height. */
.bui-notify :is(.bui-disclosure-panel:not([hidden]), .bui-disclosure-leaving) {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
}
@media (max-width: 480px) {
	.bui-notify {
		position: static;
	}
	/* Any bell's panel spans the viewport less a gutter on each side (a host's own header included,
	   as the Desktop's); the family bar's end places its panels itself (family.css, more specific). */
	.bui-notify :is(.bui-disclosure-panel, .bui-disclosure-leaving) {
		left: var(--space-4);
		right: var(--space-4);
		width: auto;
	}
}
/* The panel sets its own text roles, so a product's base stylesheet cannot make its title and its
   content alike. Its head, its rows and its last row share the family menus' inner edge: text starts
   one row padding (8 px) inside the panel's padding. The body scrolls between the head and the last
   row and fades at its lower edge while more is below. */
.bui-notify-frame {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	min-height: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-notify-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--bui-target);
	padding: 0 var(--space-2) var(--space-2);
}
.bui-notify-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-small);
}
.bui-notify-everything {
	font-size: var(--text-small);
}
.bui-notify-empty,
.bui-notify-caught {
	margin: 0;
	padding: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-notify-caught {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.bui-notify-caught > .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--color-success);
}
.bui-notify-status {
	margin: 0;
	padding: 0 var(--space-2);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-notify-status:empty {
	display: none;
}
.bui-notify-body {
	display: grid;
	gap: var(--space-1);
	min-height: 0;
	max-height: min(28rem, 100dvh - var(--layout-family) - 9rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bui-notify-body[data-more] {
	mask-image: linear-gradient(to bottom, black calc(100% - var(--space-8)), transparent);
}
.bui-notify-everything[hidden],
.bui-notify-foot[hidden],
.bui-notify-all[hidden] {
	display: none;
}
.bui-notify-foot {
	margin-top: var(--space-1);
	padding-top: var(--space-1);
	border-top: 1px solid var(--color-border);
}
/* "View all notifications" is the panel's last row, the width of the panel. */
.bui-notify-all,
.bui-header .bui-notify-all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bui-target);
	padding: 0 var(--space-2);
	border-radius: var(--radius-control);
	color: var(--color-link);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
}
.bui-notify-all:hover,
.bui-notify-all:focus-visible {
	background: var(--color-surface-sunken);
}
.bui-notify-all:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}

/* The family bar's navigation menus (their panels on the page's surface) and the product navigation row (ProductNav). */

.bui-navmenu-panel {
	display: grid;
	gap: var(--space-2);
	width: max-content;
	min-width: 16rem;
	max-width: min(28rem, calc(100vw - 2 * var(--space-4)));
	max-height: calc(100dvh - var(--layout-family) - var(--space-4));
	padding: var(--space-2);
	overflow-y: auto;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
/* Opened with a pointer, focus rests on the panel itself, which draws nothing. */
.bui-navmenu-panel:focus {
	outline: none;
}
/* Groups (the profile menu's, the project menu's end) are set apart by a line. */
.bui-navmenu-section + .bui-navmenu-section {
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
}
.bui-navmenu-heading {
	margin: 0;
	padding: var(--space-1) var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
}
/* The profile menu's head: the avatar beside the name and the address, so the person confirms at a
   glance which account is signed in (D78, 0.13.0). */
.bui-family-person {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-1) var(--space-2);
	letter-spacing: normal;
}
.bui-family-who {
	display: grid;
	min-width: 0;
}
.bui-family-name {
	color: var(--color-text);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-small);
	overflow-wrap: anywhere;
}
.bui-family-email {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}
/* The organization's group: its name, and the role quiet at the heading's end. */
.bui-family-organization-heading {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}
.bui-family-organization-name {
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-family-role {
	flex: none;
	margin-left: auto;
	font-weight: var(--weight-regular);
}
.bui-navmenu-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-navmenu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-3);
	width: 100%;
	min-height: var(--bui-target);
	padding: var(--space-1) var(--space-2);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.bui-family .bui-navmenu-item:focus-visible,
.bui-navmenu-item:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
/* Rows that go somewhere show the pointer and a hover surface; focus is painted only for the keyboard. */
a.bui-navmenu-item:hover,
button.bui-navmenu-item:hover,
.bui-navmenu-item:focus-visible {
	background: var(--color-surface-sunken);
}
/* The current row is marked as the sidebar marks its current section: a sunken surface, the accent
   at its leading edge and the link's color (0.13.0), so "here" reads the same in every list. */
.bui-navmenu-item[aria-current] {
	background: var(--color-surface-sunken);
	box-shadow: inset 2px 0 0 var(--color-accent);
	color: var(--color-link);
	font-weight: var(--weight-medium);
}
/* An unavailable row: reachable and named, muted (4.5:1 on the panel), no hover and no pointer. */
.bui-navmenu-item-off {
	color: var(--color-text-muted);
	cursor: default;
}
.bui-navmenu-item-off[aria-current] {
	color: var(--color-text);
}
.bui-navmenu-state {
	margin-left: auto;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	white-space: nowrap;
}
/* A reason a person can act on ("Not open to you yet") keeps the warning's color. */
.bui-navmenu-advisory .bui-navmenu-state {
	color: var(--color-warning);
}
.bui-navmenu-label {
	overflow-wrap: anywhere;
}
.bui-navmenu-action {
	color: var(--color-link);
}
/* The project menu's search field, its notice and the lines that stand for rows. */
.bui-navmenu-search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 var(--space-1) var(--space-1);
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-control);
	color: var(--color-text-muted);
}
.bui-navmenu-search > .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
}
.bui-navmenu-field {
	flex: 1;
	min-width: 0;
	min-height: var(--bui-control);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	outline: none;
}
.bui-navmenu-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	margin: 0 var(--space-1) var(--space-1);
	padding: var(--space-2);
	border-radius: var(--radius-control);
	background: var(--color-info-surface);
	color: var(--color-text);
}
.bui-navmenu-notice a {
	color: var(--color-link);
}
.bui-navmenu-none {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	color: var(--color-text-muted);
}
.bui-navmenu-text {
	display: grid;
	flex: 1;
	min-width: 0;
}
.bui-navmenu-meta {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
}
.bui-navmenu-list > li:has(> .bui-family-docs-item),
.bui-family-docs-group,
.bui-family-carried {
	display: none;
}

/* The product's own navigation under the family bar. */
.bui-productnav {
	--bui-nav-surface: var(--color-surface);
	position: relative;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
/* An end that holds more tabs than it shows (0.15.0, X-15): a fade over the row's surface with a chevron
   that scrolls it; pointer only, never focused (each tab is reached with Tab). */
.bui-scroll-edge {
	position: absolute;
	inset-block: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	width: var(--space-8);
	padding: 0;
	border: 0;
	color: var(--color-text-muted);
	cursor: pointer;
}
.bui-scroll-edge[hidden] {
	display: none;
}
.bui-scroll-edge-start {
	inset-inline-start: 0;
	justify-content: flex-start;
	background: linear-gradient(to right, var(--bui-nav-surface) 45%, transparent);
}
.bui-scroll-edge-end {
	inset-inline-end: 0;
	justify-content: flex-end;
	background: linear-gradient(to left, var(--bui-nav-surface) 45%, transparent);
}
.bui-scroll-edge > .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-scroll-edge:hover {
	color: var(--color-text);
}
.bui-productnav-sticky {
	position: sticky;
	top: var(--layout-family);
	z-index: calc(var(--bui-family-layer, 45) - 1);
}
.bui-productnav-list {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0 var(--space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	list-style: none;
}
.bui-productnav-list a {
	display: inline-flex;
	align-items: center;
	min-height: max(var(--bui-target), 40px);
	padding: 0 var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	text-decoration: none;
	white-space: nowrap;
}
.bui-productnav-list a:hover,
.bui-productnav-list a[aria-current] {
	color: var(--color-text);
}
.bui-productnav-list a[aria-current] {
	box-shadow: inset 0 -2px 0 var(--color-accent);
}
.bui-productnav-list a:focus-visible {
	outline-offset: -2px;
	animation: none;
}

/* The family bar (FamilyBar). Its menus' panels and the product navigation row are in navigation.css. */

/* One row at every width, and visible while the page scrolls: below dialogs (the top layer) and
   toasts, above the page's own floating lists. Its texts and icons share one optical axis, the
   wordmark letters' centre, which sits above the bar's middle because the drips of the O hang below
   the letters: each part keeps its box (and its target) and moves its ink by `--bui-family-axis`. */
.bui-family {
	--bui-family-axis: calc(var(--bui-lockup-height, 21px) * -0.0555);
	/* The bar's side padding, which the panels of its end keep from the viewport's edge (0.13.0). */
	--bui-family-gutter: var(--space-4);
	/* One width for the panels of the bar's end: notifications and the profile menu (0.13.0). */
	--bui-family-panel: 22.5rem;
	position: sticky;
	top: 0;
	z-index: var(--bui-family-layer, 45);
	flex-wrap: nowrap;
	column-gap: var(--space-3);
	height: var(--layout-family);
	padding-block: 0;
	padding-inline: var(--bui-family-gutter);
}
/* The edge: a line in the shared border token under the bar, so the bar never floats over a page or a
   sidebar of its own color (the dark sunken surface). A border, not a shadow, survives forced colors. */
.bui-family::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--color-border);
	pointer-events: none;
}
.bui-family .bui-family-divider,
.bui-family .bui-family-separator,
.bui-family .bui-family-placeholder,
.bui-family-static > .bui-family-place,
.bui-family-thread .bui-navmenu-button > *,
.bui-family-docs > *,
.bui-family-account .bui-navmenu-button > *,
.bui-family .bui-disclosure-bell > .bui-bell,
.bui-family .bui-header-toggle > .bui-icon {
	translate: 0 var(--bui-family-axis);
}
.bui-family .bui-header-start {
	flex: none;
	gap: var(--space-2);
	line-height: 1;
}
.bui-family .bui-header-brand {
	flex: none;
}
.bui-family .bui-header-context {
	order: 0;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-family-text);
}
.bui-family .bui-header-end {
	flex: none;
}
.bui-family :focus-visible {
	outline-color: var(--color-family-marker);
}

/* The React adapter's host takes no box, so the bar sticks to the page and not to its host. */
.bui-family-host {
	display: contents;
}

/* Menu buttons on the navy bar: no border, the bar's text, a lift on hover and while open. */
.bui-family .bui-navmenu {
	display: flex;
	min-width: 0;
}
.bui-family .bui-navmenu-button {
	min-width: 0;
	min-height: var(--bui-target);
	gap: var(--space-1);
	padding: 0 var(--space-2);
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: var(--weight-medium);
	line-height: 1;
}
.bui-family .bui-navmenu-button > .bui-icon {
	width: 14px;
	height: 14px;
	opacity: 0.8;
}
.bui-family .bui-navmenu-button:hover,
.bui-family .bui-navmenu-button[aria-expanded='true'],
.bui-family-docs:hover {
	background: var(--overlay-lift);
}

/* The product switcher is the lockup's name: the same size and place (see .bui-lockup-name). Its
   divider stands before the button, so the button's hover and open surface never covers it, and the
   name starts the same distance after it as the location's text after its own divider. */
.bui-family-product::before {
	content: '';
	flex: none;
	align-self: center;
	width: 1px;
	height: calc(var(--bui-lockup-height, 21px) * 0.714);
	background: color-mix(in srgb, currentColor 45%, transparent);
	translate: 0 var(--bui-family-axis);
}
.bui-family-product .bui-lockup-name {
	padding-left: 0;
	border-left: 0;
}
.bui-family-product .bui-navmenu-button > .bui-icon {
	translate: 0 var(--bui-family-axis);
}


.bui-family-thread,
.bui-family-location,
.bui-family-wide,
.bui-family-narrow {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}
/* The divider touches the location: its text starts one button padding after it, as the product
   name does after the lockup's divider. */
.bui-family-thread {
	gap: 0;
}
.bui-family-narrow {
	display: none;
}
/* The same line as the lockup's divider: one formula for every rule the bar draws (0.13.0). */
.bui-family-divider {
	flex: none;
	width: 1px;
	height: calc(var(--bui-lockup-height, 21px) * 0.714);
	background: color-mix(in srgb, currentColor 45%, transparent);
}
.bui-family-separator {
	flex: none;
	color: var(--color-family-muted);
	/* The names' line box, so "/" sits on their baseline (0.13.1). */
	line-height: 1;
}
/* Wide, the organization and the project share the location's width: each grows from nothing, in
   equal parts, up to its whole name, so a short name is shown whole and the longer one takes the
   rest, and two long names are cut to the same width instead of one collapsing to a letter or two.
   The organization is capped narrower than the project. */
.bui-family-wide > .bui-navmenu,
.bui-family-wide > .bui-family-static {
	flex: 1 1 0;
	max-width: max-content;
}
.bui-family-thread .bui-navmenu-button {
	max-width: 16rem;
	font-size: var(--text-small);
}
.bui-family-static > .bui-family-place {
	max-width: calc(16rem - 2 * var(--space-2));
}
.bui-family-organization .bui-navmenu-button {
	max-width: 12rem;
}
.bui-family-static.bui-family-organization > .bui-family-place {
	max-width: calc(12rem - 2 * var(--space-2));
}
.bui-family-place {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bui-family-static {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: var(--bui-target);
	/* The menu buttons' line box, so a name shown as text and one in a button share one baseline (0.13.0). */
	line-height: 1;
	padding: 0 var(--space-2);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
}
/* "Choose a project" is an invitation, not a project's name: quiet until it is pointed at or open (0.13.0). */
.bui-family-choose .bui-navmenu-button {
	color: var(--color-family-muted);
	font-weight: var(--weight-regular);
}
.bui-family-choose .bui-navmenu-button:hover,
.bui-family-choose .bui-navmenu-button[aria-expanded='true'] {
	color: var(--color-family-text);
}
.bui-family-placeholder {
	display: inline-block;
	width: 7rem;
	height: 0.75rem;
	margin: 0 var(--space-2);
	border-radius: var(--radius-control);
	background: var(--overlay-lift);
}

/* The bar's end: Docs, the notification entry and the avatar, every ink the same distance from the
   next (0.13.0, D78). The bell's glyph sits 7 px inside its round target and the avatar 2 px inside its
   own, so 4 px after Docs' padding and 10 px before the avatar leave 19 px between inks. The end holds
   the panels of its menus, so both end at the bar's padding with one width. */
.bui-family-end {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.bui-family-end .bui-disclosure {
	position: static;
}
.bui-family-docs {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--bui-target);
	padding: 0 var(--space-2);
	border-radius: var(--radius-control);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
}
.bui-family .bui-disclosure-bell,
.bui-family-account .bui-navmenu-button {
	justify-content: center;
	width: var(--bui-target);
	min-width: var(--bui-target);
	height: var(--bui-target);
	padding: 0;
	border-radius: var(--radius-round);
}
.bui-family-account {
	margin-left: calc(var(--space-2) - 2px);
}
.bui-family .bui-disclosure-bell[aria-expanded='true'] {
	background: var(--overlay-lift);
}
.bui-family-avatar {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	overflow: hidden;
	border-radius: var(--radius-round);
	/* A person, not an action: a neutral disc (token set 0.6.0, C2 keeps coral for action and selection) */
	background: var(--color-surface-sunken);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: 0.02em;
	line-height: 1;
}
.bui-family-avatar > .bui-icon {
	width: 16px;
	height: 16px;
}
/* The person's picture lies over the initials once it loads (D81); one that fails is removed. */
.bui-family-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bui-family-avatar-large {
	width: 40px;
	height: 40px;
	font-size: var(--text-body);
}
.bui-family-avatar-large > .bui-icon {
	width: 20px;
	height: 20px;
}

/* The panels of the bar: each opens one gap below the bar's edge, never over it (0.13.0). */
.bui-family :is(.bui-navmenu-panel, .bui-disclosure-panel, .bui-disclosure-leaving) {
	top: calc(100% + (var(--layout-family) - var(--bui-target)) / 2 + var(--space-1));
	max-height: calc(100dvh - var(--layout-family) - 2 * var(--space-4));
}
.bui-family .bui-family-end :is(.bui-navmenu-panel, .bui-disclosure-panel, .bui-disclosure-leaving) {
	left: auto;
	right: 0;
	width: min(var(--bui-family-panel), 100vw - 2 * var(--bui-family-gutter));
	min-width: 0;
	max-width: none;
	padding: var(--space-2);
	transform-origin: top right;
}

/* The family bar below 720 px: one location menu, Docs in the profile menu, phones and touch targets. */

/* Narrow: the organization and project become one location menu, and every panel spans the bar. */
@media (max-width: 719px) {
	.bui-family-wide {
		display: none;
	}
	.bui-family-narrow {
		display: flex;
	}
	.bui-family .bui-navmenu {
		position: static;
	}
	/* The start's panels are placed against the bar, one gap below its edge and from its padding (the
	   closing picture keeps these classes too); the end's stay with the end (family.css). */
	.bui-family .bui-family-brand .bui-navmenu-panel,
	.bui-family .bui-family-thread .bui-navmenu-panel {
		top: calc(100% + var(--space-1));
		left: var(--bui-family-gutter);
		right: auto;
		min-width: min(16rem, 100% - 2 * var(--bui-family-gutter));
		max-width: calc(100% - 2 * var(--bui-family-gutter));
	}
}
/* Docs always shows its label (D11: the book glyph never stands alone); below 600 px, where the label
   no longer fits beside a sidebar toggle and a localized name, it moves into the account menu. */
@media (max-width: 599px) {
	.bui-family-docs {
		display: none;
	}
	.bui-navmenu-list > li:has(> .bui-family-docs-item) {
		display: list-item;
	}
	.bui-family-docs-group {
		display: block;
	}
}
/* Phones: the location keeps the room the other parts can give up (see the dated record's widths). */
@media (max-width: 479px) {
	.bui-family {
		--bui-family-gutter: var(--space-2);
		column-gap: var(--space-1);
	}
	.bui-family .bui-navmenu-button {
		padding-right: var(--space-1);
	}
	/* At least an ellipsis and the chevron, never less. */
	.bui-family-narrow .bui-navmenu-button {
		min-width: 1.75rem;
		padding-left: var(--space-1);
	}
	/* A product's sidebar toggle takes a target's width: the switcher gives up its chevron (the name
	   stays a button) and the brand group its gap, so the location keeps its place. */
	.bui-header-external.bui-family .bui-header-start {
		gap: var(--space-1);
	}
	.bui-header-external .bui-family-product .bui-navmenu-button > .bui-icon {
		display: none;
	}
	/* The toggle keeps its target's height and gives up width, which touch screens make 44px. */
	.bui-family .bui-header-toggle {
		width: 32px;
	}
	.bui-family .bui-header-end,
	.bui-family-end {
		gap: 0;
	}
	/* The avatar's target is the avatar itself, and the count moves 2 px further over the bell, so the
	   end keeps the width it had and the count stays clear of the avatar. */
	.bui-family-account {
		margin-left: 2px;
	}
	.bui-family-account .bui-navmenu-button {
		width: auto;
		min-width: 0;
		padding: 0;
	}
	.bui-family .bui-bell > .bui-count {
		right: calc(-1 * var(--space-1));
	}
	.bui-family-divider {
		display: none;
	}
}
@media (max-width: 359px) {
	.bui-family {
		--bui-family-gutter: var(--space-1);
	}
}
/* Touch screens below 480 px: every control of the bar is a 44 × 44 target (the toggle, the location
   and the account included) and the wordmark keeps 21 px. The parts sit side by side without gaps,
   each target its own. Below 360 px the switcher gives up its chevron (the name stays a button). With
   a product's sidebar toggle below 380 px there is no room for a location target beside the others:
   the location folds into the product menu, whose sections then list the organizations and projects
   (see the dated record's widths). */
@media (max-width: 479px) and (pointer: coarse) {
	.bui-family,
	.bui-family .bui-header-start,
	.bui-header-external.bui-family .bui-header-start {
		column-gap: 0;
		gap: 0;
	}
	.bui-family .bui-header-toggle {
		width: var(--bui-target);
	}
	/* 44 px targets leave the count well clear of the avatar: the targets touch. */
	.bui-family-account {
		margin-left: 0;
	}
	.bui-family-account .bui-navmenu-button {
		min-width: var(--bui-target);
	}
	.bui-family-narrow .bui-navmenu-button {
		justify-content: center;
		min-width: var(--bui-target);
	}
	/* The parts touch, but the lockup's divider keeps a space after the wordmark's last letter. */
	.bui-family-product::before {
		margin-left: var(--space-1);
	}
}
@media (max-width: 359px) and (pointer: coarse) {
	.bui-family-product .bui-navmenu-button > .bui-icon {
		display: none;
	}
}
@media (max-width: 379px) and (pointer: coarse) {
	.bui-header-external.bui-family .bui-family-thread {
		display: none;
	}
	.bui-header-external.bui-family .bui-family-carried {
		display: block;
	}
}

/* Product choices keep context in the bar, with one aligned label and a current-choice mark. */
.bui-family-product .bui-navmenu-panel { box-sizing: border-box; }
/* Main menu titles match the notification title and profile identity; group labels stay quiet. */
.bui-family-product .bui-navmenu-section:first-child > .bui-navmenu-heading {
	padding: 0 var(--space-2) var(--space-2);
	color: var(--color-text);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-small);
	/* A title, not a label: no label tracking (D158) */
	letter-spacing: normal;
}
.bui-family-account .bui-navmenu-section:first-child > .bui-navmenu-heading {
	padding: 0 var(--space-2) var(--space-2);
}
.bui-family-person { padding-block: 0; }
.bui-family-account .bui-navmenu-section + .bui-navmenu-section { padding-top: var(--space-2); }
.bui-family-account .bui-navmenu-item { padding-block: var(--space-2); }
.bui-family-product .bui-navmenu-item { padding: var(--space-2); box-sizing: border-box; }
.bui-family-product .bui-navmenu-item[aria-current] { box-shadow: none; }
.bui-family-product .bui-navmenu-item > .bui-icon { width: 16px; height: 16px; margin-inline-start: auto; }
@media (min-width: 720px) {
	.bui-family { column-gap: var(--space-2); }
	.bui-family-product { gap: var(--space-2); }
	.bui-family .bui-family-thread { gap: var(--space-2); }
}
/* An organization's mark (D195, 0.40.0): its logo over the initial of its name, a rounded square so it
   never reads as a person's round avatar. Drawn on every row of a list of organizations, or on none. */
.bui-organization-mark {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	overflow: hidden;
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: 1;
}
.bui-organization-mark[data-picture] {
	box-shadow: none;
}

/* A product's sections (Sidebar): the permanent sidebar, the product row and its drawer. */

/* The page beside a sidebar: the sidebar as a column above the cut, the product row above the
   content below it. */
.bui-shell {
	display: flex;
	align-items: flex-start;
	min-height: calc(100dvh - var(--layout-family));
}
.bui-shell > :not(.bui-sidebar, .bui-sidebar-host) {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
}
.bui-shell:has(> .bui-sidebar[data-mode='drawer'], > .bui-sidebar-host > .bui-sidebar[data-mode='drawer']) {
	flex-direction: column;
	align-items: stretch;
}

/* The React adapter's host takes no box, so the sidebar is the shell's own column or row. */
.bui-sidebar-host {
	display: contents;
}

/* Permanent: flush under the family bar, full height, sticky, its inner edge a border. */
.bui-sidebar {
	flex: none;
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-sidebar[data-mode='permanent'] {
	position: sticky;
	top: var(--layout-family);
	width: var(--layout-sidebar);
	height: calc(100dvh - var(--layout-family));
}
.bui-sidebar-panel {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-right: 1px solid var(--color-border);
	background: var(--color-sidebar);
}
.bui-sidebar-panel[hidden],
.bui-sidebar-row[hidden] {
	display: none;
}
.bui-sidebar-nav {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-3);
}
.bui-sidebar-context {
	display: grid;
	gap: 2px;
	padding: 0 var(--space-2);
}
.bui-sidebar-context-label,
.bui-sidebar-heading {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
}
.bui-sidebar-heading {
	padding: 0 var(--space-2) var(--space-1);
}
/* A long name takes two lines, then is cut; the bar and the page title keep it whole. */
.bui-sidebar-context-name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow-wrap: anywhere;
}
.bui-sidebar-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-sidebar-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--bui-target);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-control);
	color: var(--color-text);
	text-decoration: none;
}
a.bui-sidebar-item:hover {
	background: var(--color-sidebar-hover);
}
.bui-sidebar-item:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
/* The current item is not a link (D98): the text color at weight 500, with the accent bar on the selection's
   surface (token set 0.6.0, C2: coral marks the selection). */
.bui-sidebar-item[aria-current='page'] {
	background: var(--color-surface-selected);
	box-shadow: inset 2px 0 0 var(--color-accent);
	color: var(--color-text);
	font-weight: var(--weight-medium);
}
.bui-sidebar-item[aria-disabled='true'] {
	color: var(--color-text-muted);
	cursor: default;
}
/* A section's label keeps its words on its line whatever its meta says (0.15.0, MCH-10): the meta gives
   way, cut at its end and shown whole in a tooltip. An entry's own label is cut instead (sidebar-entries.css). */
.bui-sidebar-label {
	flex: 1 0 auto;
	max-width: 100%;
	overflow-wrap: break-word;
}
.bui-sidebar-meta {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
}

/* Below the cut: the product row, sticky under the bar, naming the section in view. */
.bui-sidebar[data-mode='drawer'] {
	position: sticky;
	top: var(--layout-family);
	z-index: calc(var(--bui-family-layer, 45) - 1);
}
.bui-sidebar-row {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-2);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.bui-sidebar-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	max-width: 100%;
	min-height: max(var(--bui-target), 40px);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-weight: var(--weight-medium);
	cursor: pointer;
}
.bui-sidebar-button:hover {
	background: var(--color-surface-sunken);
}
.bui-sidebar-button > .bui-icon {
	flex: none;
	align-self: flex-start;
	margin-top: calc((max(var(--bui-target), 40px) - 18px) / 2);
	width: 18px;
	height: 18px;
}
/* The section's name is a fixed label: never cut (D44). A long one wraps and the row grows past
   its 44 px; the glyph stays on the first line. */
.bui-sidebar-section {
	min-width: 0;
	padding-block: var(--space-1);
	overflow-wrap: anywhere;
	text-align: left;
}

/* The drawer: the whole viewport, a scrim and the panel at the start edge with a strip of scrim
   left to press. The native dialog's own box and backdrop are cleared. */
.bui-drawer {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
	color: var(--color-text);
}
.bui-drawer::backdrop {
	background: transparent;
}
.bui-drawer-scrim {
	position: absolute;
	inset: 0;
	background: var(--overlay-scrim);
	animation: bui-fade var(--motion-standard) var(--motion-ease);
}
.bui-drawer-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(20rem, calc(100vw - 3.5rem));
	height: 100%;
	border-right: 1px solid var(--color-border);
	background: var(--color-sidebar);
	box-shadow: var(--elevation-menu);
	font-size: var(--text-small);
	line-height: var(--leading-small);
	animation: bui-slide var(--motion-standard) var(--motion-ease);
}
.bui-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: var(--layout-family);
	padding: 0 var(--space-2) 0 var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.bui-drawer-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
}
.bui-drawer-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
@keyframes bui-slide {
	from {
		transform: translateX(-100%);
	}
}
@keyframes bui-fade {
	from {
		opacity: 0;
	}
}
/* One bar on a phone (0.16.0, DQ-19): merged with the family bar, the sidebar draws no product row; the
   bar's menu button opens the drawer, shown only while the sidebar is one. */
.bui-sidebar[data-merged] .bui-sidebar-row {
	display: none;
}
.bui-family[data-merged]:not([data-drawer]) .bui-header-toggle {
	display: none;
}
.bui-shell:has(.bui-sidebar[data-mode='drawer'][data-merged]) .bui-page[data-template='thread'] {
	--bui-page-chrome: var(--layout-family);
}

/* A product's own entries in its sidebar (0.10.0): the top action, the search with its results in the
   groups' place, and entries on one line with at most one mark in words. */
.bui-sidebar-groups {
	display: contents;
}
/* The navigation's column never grows past the sidebar for a line that does not wrap (an entry). */
.bui-sidebar-nav,
.bui-sidebar-list {
	grid-template-columns: minmax(0, 1fr);
}
.bui-sidebar-action {
	color: var(--color-link);
	font-weight: var(--weight-medium);
}
.bui-sidebar-action .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
}
.bui-sidebar-search {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}
.bui-sidebar-search > .bui-icon {
	position: absolute;
	inset-inline-start: var(--space-2);
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
	pointer-events: none;
}
.bui-sidebar-query {
	padding-inline-start: calc(var(--space-2) * 2 + 16px);
	font-size: var(--text-small);
	-webkit-appearance: none;
	appearance: none;
}
.bui-sidebar-query::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.bui-sidebar-results {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-sidebar-line {
	margin: 0;
	padding: 0 var(--space-2);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.bui-sidebar-retry {
	justify-self: start;
	margin-inline-start: var(--space-2);
}
/* An entry's title stays on one line, cut only while a tooltip shows it whole (D44). */
.bui-sidebar-entry .bui-sidebar-label {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}
.bui-sidebar-mark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	flex: none;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	white-space: nowrap;
}
.bui-sidebar-mark[data-tone='warning'],
.bui-sidebar-mark[data-tone='danger'] {
	color: var(--color-text);
	font-weight: var(--weight-medium);
}
.bui-sidebar-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: var(--radius-round);
	background: var(--color-text-muted);
}
.bui-sidebar-mark[data-tone='success'] .bui-sidebar-dot {
	background: var(--color-success);
}
.bui-sidebar-mark[data-tone='warning'] .bui-sidebar-dot {
	background: var(--color-warning);
}
.bui-sidebar-mark[data-tone='danger'] .bui-sidebar-dot {
	background: var(--color-danger);
}
.bui-sidebar-mark[data-tone='info'] .bui-sidebar-dot,
.bui-sidebar-mark[data-tone='progress'] .bui-sidebar-dot {
	background: var(--color-info);
}
.bui-sidebar-mark[data-tone='progress'] .bui-sidebar-dot {
	/* A live dot pulses about five seconds, then holds (D95) */
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-sidebar-more {
	color: var(--color-link);
}
/* An entry's age at its end and a group's count beside its heading (0.11.0), both quiet. */
.bui-sidebar-age {
	flex: none;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bui-sidebar-count {
	margin-inline-start: var(--space-1);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
}

/* A group of entries under a disclosure heading (0.14.0, D97): the chevron turned toward the words while
   folded, the count kept; folded, only the current item stays listed, and a group that needs the person
   keeps its tone. */
.bui-sidebar-folding {
	padding: 0;
}
.bui-sidebar-fold {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	width: 100%;
	min-height: var(--bui-target);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-align: start;
	cursor: pointer;
}
.bui-sidebar-fold:hover {
	color: var(--color-text);
}
.bui-sidebar-fold:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
.bui-sidebar-fold .bui-icon {
	width: 14px;
	height: 14px;
	transition: rotate var(--motion-quick) var(--motion-ease);
}
.bui-sidebar-fold[aria-expanded='false'] .bui-icon {
	rotate: -90deg;
}
.bui-sidebar-fold-label {
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-sidebar-group[data-folded] .bui-sidebar-list > li:not([data-current]),
.bui-sidebar-group[data-folded] > .bui-sidebar-more {
	display: none;
}
.bui-sidebar-group[data-folded][data-attention] .bui-sidebar-fold {
	color: var(--color-warning);
}

/* The product's own objects (0.14.0, D97): after the sections and a divider, their heading line with the
   primary action and the search's icon, which expands into the field over the line. */
.bui-sidebar-object {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	min-width: 0;
}
.bui-sidebar-nav > .bui-sidebar-object:not(:first-child),
.bui-sidebar-groups > .bui-sidebar-object:not(:first-child) {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}
.bui-sidebar-object-head {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	min-height: var(--bui-target);
}
.bui-sidebar-object-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0 var(--space-2);
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	overflow-wrap: anywhere;
}
.bui-sidebar-object-action {
	flex: none;
	color: var(--color-link);
	font-weight: var(--weight-medium);
}
.bui-sidebar-object-action .bui-icon,
.bui-sidebar-start .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
}
.bui-sidebar-seek {
	flex: none;
	width: var(--bui-target);
	height: var(--bui-target);
	color: var(--color-text-muted);
}
.bui-sidebar-seek .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-sidebar-object-head[data-searching] > :not(.bui-sidebar-search) {
	display: none;
}
.bui-sidebar-object-head > .bui-sidebar-search {
	flex: 1 1 auto;
}
.bui-sidebar-object-groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	min-width: 0;
}
/* Objects whose first read runs wait in the groups' place (0.44.0, LOAD-01), the "Loading…" line and the
   placeholder lines on the entries' text edge; a typed query's results take its place as they take the groups'. */
.bui-sidebar-object > .bui-waiting {
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-small);
}
.bui-sidebar-object:has(> .bui-sidebar-object-groups[hidden]) > .bui-waiting {
	display: none;
}
/* Below the cut the objects' action may end the product row (SB-07). */
.bui-sidebar-start {
	flex: none;
	margin-inline-start: auto;
	color: var(--color-link);
	font-weight: var(--weight-medium);
}

/* Opt-in desktop rail: the same sections, one contextual object panel, and the existing mobile drawer. */
.bui-sidebar-rail { display: none; }
.bui-sidebar[data-mode='permanent'][data-rail] {
	display: flex;
	width: var(--space-16);
}
.bui-sidebar[data-mode='permanent'][data-rail][data-panel] {
	width: calc(var(--space-16) + var(--layout-sidebar));
}
.bui-sidebar[data-mode='permanent'][data-rail] > .bui-sidebar-rail {
	display: flex;
	flex: 0 0 var(--space-16);
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-4) var(--space-2);
	border-right: 1px solid var(--color-border);
	background: var(--color-sidebar);
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bui-sidebar-rail-item {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--space-10);
	height: var(--space-10);
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	box-sizing: border-box;
}
.bui-sidebar-rail-item > .bui-icon { width: 20px; height: 20px; }
.bui-sidebar-rail-item:hover { background: var(--color-sidebar-hover); }
.bui-sidebar-rail-item[aria-current='page'] {
	background: var(--color-surface-sunken);
	border-color: var(--color-border-strong);
}
/* The product's one object in use at the rail's end (0.19.1, D161): its glyph, with its state's mark on
   the glyph's corner, told by shape as well as hue (`Status`). */
.bui-sidebar-rail-foot {
	margin-top: auto;
}
.bui-sidebar-rail-state {
	position: absolute;
	right: 3px;
	bottom: 3px;
	display: inline-flex;
	padding: 2px;
	border-radius: var(--radius-round);
	background: var(--color-sidebar);
}
.bui-sidebar-rail-state .bui-status-dot {
	margin-top: 0;
}
.bui-sidebar-rail-meta {
	position: absolute;
	top: 0;
	right: 0;
	padding-inline: var(--space-1);
	border-radius: var(--radius-round);
	background: var(--color-sidebar);
	color: var(--color-text);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-sidebar[data-mode='permanent'][data-rail] > .bui-sidebar-panel {
	flex: 1 1 auto;
	min-width: 0;
}
.bui-sidebar[data-rail] .bui-sidebar-item[aria-current='page'] {
	background: var(--color-surface-sunken);
	box-shadow: none;
}
.bui-sidebar[data-rail] .bui-sidebar-object-title {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-sidebar-collapse { flex: none; }
@media (pointer: coarse) {
	.bui-sidebar-rail-item { width: var(--bui-target); height: var(--bui-target); }
}
/* The contextual panel has room for its name, without competing with three controls. */
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-object-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-2);
	row-gap: var(--space-1);
}
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-object-title {
	grid-column: 1;
	grid-row: 1;
	overflow-wrap: normal;
}
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-collapse { grid-column: 2; grid-row: 1; }
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-object-action { grid-column: 1; grid-row: 2; }
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-seek { grid-column: 2; grid-row: 2; }
.bui-sidebar[data-mode='permanent'][data-rail] .bui-sidebar-object-head > .bui-sidebar-search { grid-column: 1 / -1; }

/* Context enters from the navigation edge and leaves there before the layout releases its space.
   Motion owns cancellation, inertness and the exit bound; the shared reduced-motion rule disables it. */
.bui-sidebar[data-mode='permanent'][data-rail] > .bui-sidebar-panel[data-motion='in'] {
	animation: bui-sidebar-context-in var(--motion-standard) var(--motion-ease);
}
.bui-sidebar[data-mode='permanent'][data-rail] > .bui-sidebar-panel[data-motion='out'] {
	animation: bui-sidebar-context-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
@keyframes bui-sidebar-context-in {
	from { opacity: 0; transform: translateX(calc(-1 * var(--space-6))); }
}
@keyframes bui-sidebar-context-out {
	to { opacity: 0; transform: translateX(calc(-1 * var(--space-6))); }
}

/* Global presentation is independent from the contextual panel's data-panel state. */
.bui-sidebar[data-navigation] { --bui-sidebar-global: var(--layout-sidebar); }
.bui-sidebar[data-navigation][data-collapsed] { --bui-sidebar-global: var(--space-16); }
.bui-sidebar[data-mode='permanent'][data-navigation] { width: var(--bui-sidebar-global); }
.bui-sidebar[data-mode='permanent'][data-navigation][data-panel] { width: calc(var(--bui-sidebar-global) + var(--layout-sidebar)); }
.bui-sidebar[data-mode='permanent'][data-navigation] > .bui-sidebar-rail {
	flex-basis: var(--bui-sidebar-global);
	align-items: stretch;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-2);
}
.bui-sidebar-global-head { display: grid; gap: var(--space-2); min-width: 0; }
.bui-sidebar-global-head > .bui-sidebar-nav { padding: 0; gap: var(--space-3); }
.bui-sidebar-global-head .bui-sidebar-groups:empty { display: none; }
.bui-sidebar-global-toggle,
.bui-sidebar-global-search {
	display: inline-grid;
	place-items: center;
	width: max(var(--bui-target), var(--space-10));
	height: max(var(--bui-target), var(--space-10));
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
}
.bui-sidebar-global-toggle:hover,
.bui-sidebar-global-search:hover { background: var(--color-sidebar-hover); }
.bui-sidebar-global-search,
.bui-sidebar-global-search[hidden] { display: none; }
.bui-sidebar-global-toggle > .bui-icon,
.bui-sidebar-global-search > .bui-icon { width: 20px; height: 20px; }
.bui-sidebar-rail[data-global] > .bui-sidebar-rail-item {
	display: flex;
	gap: var(--space-2);
	width: 100%;
	height: auto;
	min-height: max(var(--bui-target), var(--space-10));
	padding: var(--space-2);
	text-decoration: none;
	font: inherit;
	text-align: start;
}
.bui-sidebar-rail[data-global] .bui-sidebar-rail-item > .bui-icon { flex: none; }
.bui-sidebar-global-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bui-sidebar-rail[data-global] > .bui-sidebar-rail-item[aria-current='page'] {
	background: var(--color-surface-selected);
	border-color: transparent;
	box-shadow: inset 2px 0 0 var(--color-accent);
	font-weight: var(--weight-medium);
}
.bui-sidebar-rail[data-global] > .bui-sidebar-rail-item[aria-disabled='true'] { color: var(--color-text-muted); cursor: default; }
.bui-sidebar-rail[data-global] .bui-sidebar-rail-meta { position: static; flex: none; }
.bui-sidebar-global-heading { padding-top: var(--space-3); }
.bui-sidebar-rail[data-global][data-collapsed] { align-items: center; }
.bui-sidebar-rail[data-global][data-collapsed] > .bui-sidebar-rail-item { width: 100%; justify-content: center; padding-inline: 0; }
.bui-sidebar-rail[data-global][data-collapsed] .bui-sidebar-global-label,
.bui-sidebar-rail[data-global][data-collapsed] .bui-sidebar-rail-meta,
.bui-sidebar-global-head[data-collapsed] .bui-sidebar-context,
.bui-sidebar-global-head[data-collapsed] .bui-sidebar-action .bui-sidebar-label,
.bui-sidebar-global-head[data-collapsed] .bui-sidebar-search { display: none; }
/* Group boundaries remain visible in the rail; their accessible headings remain available. */
.bui-sidebar-rail[data-global][data-collapsed] .bui-sidebar-global-heading {
	font-size: 0;
	padding: 0;
	margin: var(--space-2) var(--space-1);
	border-top: 1px solid var(--color-border);
}
.bui-sidebar-global-head[data-collapsed] .bui-sidebar-global-search:not([hidden]) { display: inline-grid; }
.bui-sidebar-global-head[data-collapsed] .bui-sidebar-action { justify-content: center; }
.bui-sidebar-item > .bui-icon { flex: none; width: 20px; height: 20px; }
.bui-sidebar-item:has(> .bui-icon) > .bui-sidebar-label { flex: 1 1 auto; min-width: 0; }
/* Without an explicit contextual rail the expanded pane is the original complete navigation.
   Object groups, their search, folds and more remain here, never in a second column. */
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline] { display: flex; flex-direction: column; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline] > .bui-sidebar-rail { flex: none; height: auto; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline] > .bui-sidebar-panel { height: auto; flex: 1 1 auto; min-height: 0; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline]:not([data-collapsed]) > .bui-sidebar-rail > :not(.bui-sidebar-global-head),
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline]:not([data-collapsed]) .bui-sidebar-global-head > :not(.bui-sidebar-global-toggle) { display: none; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline][data-collapsed] > .bui-sidebar-rail { height: 100%; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline][data-collapsed] > .bui-sidebar-panel { display: none; }
.bui-sidebar[data-mode='permanent'][data-navigation][data-inline] > .bui-sidebar-rail {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-right: 1px solid var(--color-border);
	background: var(--color-sidebar);
}
.bui-sidebar[data-navigation][data-inline] .bui-sidebar-panel .bui-sidebar-item[aria-current='page'] {
	background: var(--color-surface-selected);
	box-shadow: inset 2px 0 0 var(--color-accent);
}

.bui-sidebar-global-head[data-collapsed] > .bui-sidebar-global-toggle,
.bui-sidebar-global-head[data-collapsed] > .bui-sidebar-global-search { justify-self: center; }
.bui-sidebar[data-navigation][data-inline] .bui-sidebar-panel .bui-sidebar-item:not(.bui-sidebar-entry) { min-height: max(var(--bui-target), var(--space-10)); }
.bui-sidebar-rail[data-global]:not([data-collapsed]) .bui-sidebar-rail-foot .bui-sidebar-rail-state { right: auto; left: var(--space-5); }

/* The family page system (D52): a region edge to edge, content one gutter after the navigation, blocks at their width tier. */

.bui-page {
	container: bui-page / inline-size;
	flex: 1 1 auto;
	min-width: 0;
}
.bui-page-frame {
	display: grid;
	align-content: start;
	gap: var(--space-6);
	padding: var(--space-6) var(--layout-gutter) var(--space-12);
}
/* The gutter follows the region's own width, never the window's: 16, 24 or 32 px (LR-01, LR-09). */
@container bui-page (min-width: 640px) {
	.bui-page-frame {
		--layout-gutter: var(--layout-gutter-medium);
	}
}
@container bui-page (min-width: 1024px) {
	.bui-page-frame {
		--layout-gutter: var(--layout-gutter-wide);
	}
}
/* The tool template (Workspace's editor, Conduict's terminal) has full-bleed panes and no gutter (LR-04). */
.bui-page[data-template='tool'] .bui-page-frame {
	padding: 0;
	gap: 0;
}

/* Width tiers, left-anchored: unused width falls only on the far side (LR-02). */
.bui-page-frame > * {
	min-width: 0;
	max-width: var(--layout-standard);
}
.bui-page[data-width='fluid'] .bui-page-frame > * {
	max-width: var(--layout-fluid-max);
}
.bui-page[data-width='form'] .bui-page-body {
	max-width: var(--layout-form);
}
.bui-page[data-width='reading'] .bui-page-body {
	max-width: var(--layout-measure);
}
/* The thread tier (0.11.0, the family proposal D67 adopted by Conduict): a conversation's thread. */
.bui-page[data-width='thread'] .bui-page-body {
	max-width: var(--layout-thread);
}
.bui-page[data-template='tool'] .bui-page-frame > * {
	max-width: none;
}
.bui-page-main {
	display: grid;
	align-content: start;
	gap: var(--space-8);
	min-width: 0;
}
.bui-page-body {
	display: grid;
	align-items: start;
	gap: var(--space-8);
}
.bui-page-aside {
	display: grid;
	align-content: start;
	gap: var(--space-6);
	min-width: 0;
}
/* A resource page's side panel moves beside the main column once a form column and the panel fit (LR-03). */
@container bui-page (min-width: 68rem) {
	.bui-page-body:has(> .bui-page-aside:not(.bui-page-panel)) {
		grid-template-columns: minmax(var(--layout-form), 1fr) var(--layout-aside);
	}
	.bui-page[data-width='form'] .bui-page-body:has(> .bui-page-aside:not(.bui-page-panel)) {
		max-width: calc(var(--layout-form) + var(--layout-aside) + var(--space-8));
	}
}

.bui-form-width {
	max-width: var(--layout-form);
}

/* One page header (LR-05): crumbs, the H1 with its one status and the line's actions, facts, tabs. */
.bui-page-header {
	display: grid;
	/* One column that may shrink below its widest row, so the tabs scroll inside themselves at 320 px */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	min-width: 0;
}
/* A header separates context from work; tabs already draw that boundary. Tool/thread layouts
   retain their continuous work surface and their own compact header behavior. */
.bui-page:not([data-template='tool']):not([data-template='thread']) .bui-page-header:not(:has(> .bui-page-tabs:not([hidden]))) {
	padding-block-end: var(--space-4);
	border-block-end: 1px solid var(--color-border);
}
.bui-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}
.bui-crumbs li + li::before {
	content: '/';
	margin-inline-end: var(--space-1);
	color: var(--color-text-muted);
}
.bui-crumbs a {
	color: var(--color-link);
	text-decoration: none;
}
.bui-page-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	min-width: 0;
}
.bui-page-heading {
	margin: 0;
	min-width: 0;
	font-size: var(--text-title-1);
	/* A heading told from body text by weight as well as size (token set 0.6.0, C2) */
	font-weight: var(--weight-semibold);
	line-height: var(--leading-title-1);
	overflow-wrap: anywhere;
}
.bui-page-heading:focus {
	outline: none;
}
.bui-page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-inline-start: auto;
}
.bui-page-facts {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
/* A page's lead (0.41.0, D191): one sentence or a short paragraph under the facts line, in the body's role and
   muted as the package's secondary prose, held at the reading measure (prose.css) whatever the header spans. */
.bui-page-lead {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
}
.bui-page-tabs {
	min-width: 0;
	margin-top: var(--space-2);
}
.bui-tabs .bui-productnav-list {
	padding: 0;
}
.bui-tabs {
	--bui-nav-surface: var(--color-canvas);
	background: transparent;
}
/* Under a 640 px region the status and the actions follow the title (LR-05, LR-09). */
@container bui-page (max-width: 639px) {
	.bui-page-title {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
	.bui-page-actions {
		margin-inline-start: 0;
	}
}

/* Flat sections, set apart by space and one divider, never a box in a box (LR-06, D10). */
.bui-section {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}
.bui-section + .bui-section {
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}
.bui-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}
/* A heading outranks what it names (D158): semibold, and its size follows its level, so a section
   inside a panel or a side sheet (level 3) is one step below the title it sits under. */
.bui-section-title {
	margin: 0;
	font-size: var(--text-title-2);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-title-2);
}
h3.bui-section-title {
	font-size: var(--text-title-3);
	line-height: var(--leading-title-3);
}
.bui-section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-inline-start: auto;
}
.bui-section-description {
	margin: 0;
	color: var(--color-text-muted);
}
.bui-section-body {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
}
/* Every block of a page's grids may shrink below its content, so a wide table scrolls in its own box
   instead of widening the page (0.6.2) */
.bui-page-main > *,
.bui-page-aside > *,
.bui-section-body > * {
	min-width: 0;
}

/* The preferences dialog's note under its two fields. */
.bui-preferences-note {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}

/* List and detail (LR-03, FAM-40): the detail beside the list on a wide region, its own page on a
   narrow one, decided by the region's own width (ListDetail.cut). */
.bui-listdetail {
	container: bui-listdetail / inline-size;
	min-width: 0;
}
.bui-listdetail-frame {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	min-width: 0;
}
.bui-listdetail[data-open] .bui-listdetail-list {
	display: none;
}
.bui-listdetail-detail {
	display: grid;
	align-content: start;
	gap: var(--space-3);
	min-width: 0;
}
.bui-listdetail-detail:focus {
	outline: none;
}
.bui-listdetail-detail[hidden],
.bui-listdetail-back:empty {
	display: none;
}
.bui-listdetail-back {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-listdetail-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--bui-target);
	color: var(--color-link);
}
.bui-listdetail-link .bui-icon {
	width: 16px;
	height: 16px;
}
@container bui-listdetail (min-width: 72rem) {
	.bui-listdetail[data-open] > .bui-listdetail-frame {
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
	}
	.bui-listdetail[data-open] .bui-listdetail-list {
		display: block;
	}
	.bui-listdetail-back {
		display: none;
	}
	.bui-listdetail-detail {
		padding-inline-start: var(--space-6);
		border-inline-start: 1px solid var(--color-border);
	}
}

/* A resource page's raised panel (0.30.0, the family's resource page): the object's conditions on a
   surface of their own with no shadow (C2), its regions divided by a line, their headings one step
   above the rows they name (D158) */
.bui-page-aside[data-raised] {
	align-self: start;
	gap: 0;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface-raised);
}
.bui-page-aside[data-raised] > * + * {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.bui-page-aside[data-raised] .bui-section-title {
	font-size: var(--text-body);
}
/* A raised panel pinned beside the main column (Page's `pinned`, 0.38.0, D189): it holds the page's action, so
   from the region's width where it sits beside that column (68rem, page.css) it stays in view while the column
   scrolls, at the page's sticky edge under the family bar, and below a compact header's line, as a panel kept
   in view does. Its whole box, border and padding included whatever a product's own box-sizing, keeps within
   the window with a scroll of its own. It never holds the wheel: in Chrome a scroll container that contains its
   overscroll keeps the page still under the pointer even with nothing to scroll, and a pinned panel usually
   fits, so the wheel over it goes on to the page once it has nothing left to scroll. Sticky positioning keeps
   its place in the flow, so nothing moves when it starts to stay; below 68rem it flows below the main column,
   as every raised panel does, and nothing else of the raised panel changes. */
@container bui-page (min-width: 68rem) {
	.bui-page-aside[data-raised][data-pinned] {
		position: sticky;
		top: var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6)));
		box-sizing: border-box;
		max-height: calc(100dvh - var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) - var(--space-6));
		overflow-y: auto;
	}
	.bui-page:has(> .bui-page-frame > .bui-page-compact) .bui-page-aside[data-raised][data-pinned] {
		top: calc(var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) + var(--bui-page-compact));
		max-height: calc(100dvh - var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) - var(--bui-page-compact) - var(--space-6));
	}
}

/* A screen's anatomy (0.19.1; the family's D159, D160): the object's kind beside its H1, a resource page's
   actions within reach of its title, and a page's tabs starting on the content edge. Tokens only. */

/* The object's kind or variant beside the H1 (0.19.1, D160): its words as a quiet tag, or one control
   that chooses among its siblings. It names what the H1 is, so it never reads above it (D158). */
.bui-page-kind {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.bui-page-tag {
	padding: 1px var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-round);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: var(--leading-label);
	white-space: nowrap;
}
/* Headers use the Page region. Structured facts wrap there; prose opts into bui-reading.
   Object actions stay beside their title group without imposing a width cap on the header. */
.bui-page .bui-page-frame > .bui-page-header {
	max-width: none;
}
.bui-page[data-template='detail'] .bui-page-actions {
	margin-inline-start: 0;
}
.bui-page-facts {
	overflow-wrap: anywhere;
}

/* A page's tabs start on the content edge (0.19.1, the alignment audit's P5): the first label lines up
   with the H1 and the current tab is marked under its words only, while the row's line keeps the edge. */
.bui-tabs .bui-productnav-list > li:first-child > a {
	padding-inline-start: 0;
}
.bui-tabs .bui-productnav-list a[aria-current] {
	box-shadow: none;
	background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left bottom / 100% 2px;
	background-origin: content-box;
}

/* A title that waits for its object's read (0.44.0, LOAD-01): one placeholder line at the title's own line
   height, so the title's line, the facts and the tabs are where they will be. A shared wait: its grace is
   feedback.css's, and it is drawn in the divider role, as every placeholder is. */
.bui-page-heading > .bui-page-pending {
	display: flex;
	align-items: center;
	width: 16rem;
	max-width: 100%;
	/* The heading's own line, the token's where `lh` is not known */
	height: calc(var(--text-title-1) * var(--leading-title-1));
	height: 1lh;
	padding: 0;
}
.bui-page-pending > .bui-skeleton-line {
	width: 100%;
	height: 0.6em;
}

/* An action whose place is held until the read says whether it is offered (0.44.0, LOAD-01): laid out as it
   will be, unseen, inert and hidden from assistive technology. */
.bui-reserved {
	display: contents;
	visibility: hidden;
}

/* A page's panel kept in view (PagePanel, 0.10.0): beside the main column from the region's cut,
   sticky under the family bar with a scroll of its own; below the cut it opens as a side sheet.
   Since 0.11.0 its width is fluid from --layout-aside to --layout-aside-max: it takes what a capped main
   column (the thread tier) leaves, so no empty band opens between them. Since 0.11.2 (token set 0.4.1)
   --layout-aside-max is 40rem, so a wide region keeps less empty width past the panel, and the wide form
   (a diff beside a conversation) takes every width the main column leaves, to the region's far edge: the
   main column keeps its tier when the region holds it and gives down to --layout-aside first, never
   centered and still one gutter from the navigation (D52). */
.bui-page {
	--bui-page-main: 100%;
	--bui-page-panel: var(--layout-aside-max);
}
.bui-page[data-width='thread'] {
	--bui-page-main: var(--layout-thread);
}
.bui-page[data-panel='beside'] .bui-page-body:has(> .bui-page-panel:not([hidden])) {
	grid-template-columns: minmax(0, 1fr) clamp(var(--layout-aside), calc(100% - var(--bui-page-main) - var(--space-8)), var(--bui-page-panel));
}
.bui-page[data-width='thread'][data-panel='beside'] .bui-page-body:has(> .bui-page-panel:not([hidden])) {
	max-width: calc(var(--layout-thread) + var(--space-8) + var(--bui-page-panel));
}
.bui-page[data-panel-wide][data-panel='beside'] .bui-page-body:has(> .bui-page-panel:not([hidden])) {
	grid-template-columns: clamp(var(--layout-aside), calc(100% - var(--space-8) - var(--layout-aside-wide)), var(--bui-page-main)) minmax(0, 1fr);
	max-width: none;
}
.bui-page-panel {
	position: sticky;
	top: var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6)));
	max-height: calc(100dvh - var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) - var(--space-6));
	/* It never holds the wheel (0.44.0): in Chrome a scroll container that contains its overscroll keeps the page
	   still under the pointer even with nothing to scroll, and a panel kept in view usually fits. A panel that
	   scrolls still takes the wheel first; once it has nothing left, the next wheel goes on to the page. */
	overflow-y: auto;
}
/* A header that turns compact on scroll keeps its line above the panel. */
.bui-page:has(> .bui-page-frame > .bui-page-compact) .bui-page-panel {
	top: calc(var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) + var(--bui-page-compact));
	max-height: calc(100dvh - var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) - var(--bui-page-compact) - var(--space-6));
}
.bui-page-slot {
	display: grid;
	align-content: start;
	gap: var(--space-6);
	min-width: 0;
}
.bui-page-slot > * {
	min-width: 0;
}
/* The panel's own head beside the main column (0.11.0): its title and the hide control. */
.bui-page-panel-head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	margin-block-end: var(--space-4);
}
.bui-page-panel-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--text-title-2);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-title-2);
	overflow-wrap: anywhere;
}
.bui-page-panel-hide {
	flex: none;
}

/* A page header's compact line (PageHeader `compact`, 0.11.0): once the title's line has scrolled out
   under the family bar, one sticky line with the title and the one status. Its holder has no height and
   sits in the page's frame, so showing it shifts nothing; the line is drawn over the page, with the
   frame's divider under it and no shadow. Without motion under reduced motion (base.css). */
:root,
.bui-page {
	--bui-page-compact: 3rem;
	/* Its height with a part in view said on two lines (0.29.0) */
	--bui-page-compact-tall: 3.5rem;
}
/* What a page scrolls to (an address's `#target` or `?turn=`, a heading focused by code, scrollIntoView)
   lands below every sticky line (0.11.2): the family bar, the sidebar's row below its cut, and the
   compact line, with a little room. */
html:has(.bui-page-compact) {
	scroll-padding-top: calc(var(--layout-family) + var(--bui-page-compact) + var(--space-2));
}
html:has(.bui-sidebar[data-mode='drawer']):has(.bui-page-compact) {
	scroll-padding-top: calc(var(--layout-family) + var(--bui-sidebar-row, 44px) + var(--bui-page-compact) + var(--space-2));
}
/* While the line may say a part in view (0.29.0, D181), on a thread or once it does, it may take two lines:
   targets land below its taller form, the same on every turn, so a page's sticky edge never moves. */
html:has(.bui-page[data-template='thread'] .bui-page-compact),
html:has(.bui-page-compact[data-subject]) {
	scroll-padding-top: calc(var(--layout-family) + var(--bui-page-compact-tall) + var(--space-2));
}
html:has(.bui-sidebar[data-mode='drawer']):has(.bui-page[data-template='thread'] .bui-page-compact),
html:has(.bui-sidebar[data-mode='drawer']):has(.bui-page-compact[data-subject]) {
	scroll-padding-top: calc(var(--layout-family) + var(--bui-sidebar-row, 44px) + var(--bui-page-compact-tall) + var(--space-2));
}
.bui-page .bui-page-frame > .bui-page-compact {
	position: sticky;
	top: calc(var(--bui-page-sticky, calc(var(--layout-family) + var(--space-6))) - var(--space-6));
	z-index: 2;
	height: 0;
	max-width: none;
	margin-inline: calc(-1 * var(--layout-gutter));
	/* No room of its own between the frame's rows */
	margin-block-end: calc(-1 * var(--space-6));
}
/* Below the sidebar's cut its product row is sticky under the bar too: the line goes under the row. */
.bui-shell:has(.bui-sidebar[data-mode='drawer']) .bui-page .bui-page-frame > .bui-page-compact {
	top: calc(var(--layout-family) + var(--bui-sidebar-row, 44px));
}
.bui-page[data-template='tool'] .bui-page-frame > .bui-page-compact {
	margin-block-end: 0;
}
.bui-page-compact-line {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	box-sizing: border-box;
	min-height: var(--bui-page-compact);
	padding: var(--space-1) var(--layout-gutter);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-canvas);
	visibility: hidden;
	opacity: 0;
	translate: 0 calc(-1 * var(--space-2));
	transition: opacity var(--motion-quick) var(--motion-ease), translate var(--motion-quick) var(--motion-ease), visibility 0s linear var(--motion-quick);
}
.bui-page-compact[data-shown] .bui-page-compact-line {
	visibility: visible;
	opacity: 1;
	translate: 0 0;
	transition: opacity var(--motion-quick) var(--motion-ease), translate var(--motion-quick) var(--motion-ease);
}
.bui-page-compact-text {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 1 1 auto;
	min-width: 0;
}
/* The title on one line, cut only while a tooltip shows it whole on hover (D44); the H1 says it whole. */
.bui-page-compact-title {
	min-width: 0;
	overflow: hidden;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body);
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* The part in view (0.29.0, D181): what the product names in place of the title, such as the message of the
   turn being read, quoted as written on up to two lines; pressing it goes there. */
.bui-page-compact-subject {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-width: 0;
	overflow: hidden;
	padding-inline-start: var(--space-3);
	border-inline-start: 2px solid var(--color-border-strong);
	color: var(--color-text);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	text-decoration: none;
	white-space: pre-line;
	overflow-wrap: anywhere;
	cursor: pointer;
}
.bui-page-compact-subject:hover {
	border-inline-start-color: var(--color-text);
}
.bui-page-compact-status {
	flex: none;
}
.bui-page-compact-status:empty,
.bui-page-compact-actions[hidden] {
	display: none;
}
.bui-page-compact-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--space-2);
}

/* Every page with the family bar lands what it scrolls to below the bar (0.36.0): an address's target, a
   heading focused by code, scrollIntoView; below the sidebar's cut, below its product row too, unless the
   sidebar is merged with the bar and draws none. Weightless (:where), so the rules above, which add the
   compact line's height where one is drawn, always win over these. */
html:where(:has(.bui-family)) {
	scroll-padding-top: calc(var(--layout-family) + var(--space-2));
}
html:where(:has(.bui-family):has(.bui-sidebar[data-mode='drawer']:not([data-merged]))) {
	scroll-padding-top: calc(var(--layout-family) + var(--bui-sidebar-row, 44px) + var(--space-2));
}
/* A control on those sticky lines never moves the page when it takes focus (by Tab, or back from its menu):
   Chrome and WebKit read a sticky control under the document's scroll padding as out of view and scroll the
   page, though the control never moves. Its scroll area is set down past the tallest padding (the bar, the
   row, the compact line's taller form and the room), where it is always in view. A menu's or a dialog's
   entries keep their own: they scroll inside their panel. */
:where(.bui-family, .bui-sidebar-row, .bui-page-compact-line) :where(a, button, input, select, textarea, summary, [tabindex]):not(:where(.bui-disclosure-panel, [data-bui-floating], dialog), :where(.bui-disclosure-panel, [data-bui-floating], dialog) *) {
	scroll-margin-top: calc(-1 * (var(--layout-family) + var(--bui-sidebar-row, 44px) + var(--bui-page-compact-tall) + var(--space-2)));
	scroll-margin-bottom: calc(var(--layout-family) + var(--bui-sidebar-row, 44px) + var(--bui-page-compact-tall) + var(--space-2));
}

/* A conversation's page (the `thread` template, 0.14.0): an anchored dock (D94), read by turns (D180,
   0.29.0, amending D96's one lane). The frame fills the window under the chrome and keeps no padding under
   its content; the main column is a column whose last block is the dock, pushed to its end and sticky at
   the window's bottom with one gutter and the safe area under it, so its distance to the bottom never
   changes. The turns take the thread's width (`--layout-thread`), the dock's composer its lane
   (`--layout-lane`). Tokens only. */
.bui-page[data-template='thread'] {
	--bui-page-gap: var(--space-8);
}
/* The chrome above the page: the family bar, and below the sidebar's cut its product row too. A host
   with other chrome (a Desktop window) sets --bui-page-chrome itself. */
.bui-shell:has(.bui-sidebar[data-mode='drawer']) .bui-page[data-template='thread'] {
	--bui-page-chrome: calc(var(--layout-family) + var(--bui-sidebar-row, 44px));
}
.bui-page[data-template='thread'] .bui-page-frame {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: calc(100dvh - var(--bui-page-chrome, var(--layout-family)));
	padding-bottom: 0;
}
.bui-page[data-template='thread'] .bui-page-frame > .bui-page-body {
	flex: 1 0 auto;
	align-items: stretch;
}
.bui-page[data-template='thread'] .bui-page-main {
	display: flex;
	flex-direction: column;
	gap: var(--bui-page-gap);
}
/* From a 1024 px region a thread's gutter is 48 px (0.29.0, D182): it holds the index of its turns, beside
   them, whether or not the thread has turns yet, so nothing moves when the second turn arrives. */
@container bui-page (min-width: 1024px) {
	.bui-page[data-template='thread'] .bui-page-frame {
		--layout-gutter: var(--space-12);
	}
}
.bui-page[data-template='thread'] .bui-page-panel {
	align-self: start;
}
/* The header and its compact line end at the thread's edge: a toggle in them never moves when the panel
   shows or hides (D95). */
.bui-page[data-template='thread'] .bui-page-frame > .bui-page-header {
	max-width: var(--layout-thread);
}
.bui-page[data-template='thread'] .bui-page-compact-line {
	padding-inline-end: max(var(--layout-gutter), calc(100% - var(--layout-gutter) - var(--layout-thread)));
}
/* A centred thread's compact line keeps its words over the centred column (0.26.0). */
.bui-page[data-template='thread'][data-lane='center'] .bui-page-compact-line {
	padding-inline: max(var(--layout-gutter), calc((100% - var(--layout-thread)) / 2));
}

/* A centred thread (0.15.0, decision C2 amending D52 for this template; DQ-14): the thread's column and its
   header sit in the middle of the region, or of what a panel kept in view leaves of it. */
.bui-page[data-lane='center'] .bui-page-frame > .bui-page-header {
	width: 100%;
	margin-inline: auto;
}
.bui-page[data-lane='center'] .bui-page-frame > .bui-page-body:not(:has(> .bui-page-panel:not([hidden]))) {
	width: 100%;
	margin-inline: auto;
}
.bui-page[data-lane='center'] .bui-page-body:has(> .bui-page-panel:not([hidden])) > .bui-page-main {
	width: 100%;
	max-width: var(--layout-thread);
	margin-inline: auto;
}

/* The dock: at the column's end, sticky at the window's bottom, over the canvas so what passes beneath is
   hidden; while content passes beneath (`data-stuck`, from its end mark) it fades into the canvas above the
   dock (since 0.26.0, D165; a hairline before), so nothing is cut by a line. */
.bui-page-dock {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: var(--space-2);
	min-width: 0;
	margin-top: auto;
	/* One gutter under it, never the wider gutter that holds a thread's index (0.29.0): the dock keeps its place */
	padding: var(--space-2) 0 calc(min(var(--layout-gutter), var(--layout-gutter-wide)) + env(safe-area-inset-bottom, 0px));
	background: var(--color-canvas);
}
.bui-page-dock::before {
	content: '';
	position: absolute;
	inset-block-end: 100%;
	inset-inline: 0;
	height: var(--space-6);
	background: linear-gradient(to bottom, transparent, var(--color-canvas));
	opacity: 0;
	transition: opacity var(--motion-quick) var(--motion-ease);
	pointer-events: none;
}
.bui-page-dock[data-stuck]::before {
	opacity: 1;
}
/* What the keyboard reaches or the page scrolls to lands above the dock and its fade, never under them (0.34.0,
   D187; WCAG 2.4.11): `PageDock` measures the dock's height, which grows with its composer. While the focus is in
   the dock the room is not kept: the dock's own field sits in it, and Chrome and WebKit scrolled the thread to
   bring it out (330 px in Chrome) whenever the composer took the focus. */
html:has(.bui-page-dock:not(:empty)):not(:has(.bui-page-dock :focus)) {
	scroll-padding-bottom: calc(var(--bui-page-dock, 0px) + var(--space-6));
}
.bui-page-dock:empty {
	padding-block: 0;
}
.bui-page-dock > * {
	min-width: 0;
	max-width: var(--layout-lane);
}
/* A centred thread's composer stands under the middle of its turns, on their axis (D180) */
.bui-page[data-lane='center'] .bui-page-dock {
	justify-items: center;
}
.bui-page[data-lane='center'] .bui-page-dock > * {
	width: 100%;
}
/* The end mark takes no room: it sits on the dock's lower edge, inside the column's last gap. */
.bui-page-dock-end {
	flex: none;
	height: 1px;
	margin-block-start: calc(-1px - var(--bui-page-gap, 0px));
	pointer-events: none;
}

/* A thread reads by turns (D180, 0.29.0, amending D96): the person's message, prose, the rail's items and
   the work take the turn's width, the thread's (`--layout-thread`, 80rem); only the composer keeps the
   lane (`--layout-lane`, 48rem), centred on the same axis. `.bui-lane` and `.bui-lane-wide` keep giving a
   product's own blocks those two widths. */
.bui-lane {
	min-width: 0;
	max-width: var(--layout-lane);
}
.bui-lane-wide {
	min-width: 0;
	max-width: var(--layout-thread);
}
/* A panel kept in view comes next to the turns and grows up to its maximum; what is left falls on the far
   side, never inside the thread (D96, with the turns' width since D180). */
.bui-page[data-width='thread'][data-panel='beside']:not([data-panel-wide]) .bui-page-body:has(> .bui-page-panel:not([hidden])) {
	grid-template-columns: minmax(0, var(--layout-thread)) clamp(var(--layout-aside), calc(100% - var(--layout-thread) - var(--space-8)), var(--layout-aside-max));
	max-width: calc(var(--layout-thread) + var(--space-8) + var(--layout-aside-max));
}

/* Label and value rows (Facts, 0.11.0) and a use against a limit (Meter, 0.11.0): flat, no card and no
   elevation (D10, D52, D53); values in a column after their label (D99), identifiers monospaced, a stale value muted with
   its note. Tokens only. */
.bui-facts {
	container: bui-facts / inline-size;
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-facts-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	min-width: 0;
}
.bui-facts-head[hidden],
.bui-facts-list[hidden] {
	display: none;
}
.bui-facts-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body);
}
.bui-facts-summary {
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.bui-facts-state {
	font-size: var(--text-label);
	margin-inline-start: auto;
}
.bui-facts-list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	min-width: 0;
}
/* A row (0.14.0, D99): the label in a column of its own, the value in a fixed column right after it, so
   label and value read together; only a number aligns to the end. A long value wraps inside its column. */
.bui-facts {
	--bui-facts-label: 9.5rem;
}
.bui-facts-row {
	display: grid;
	grid-template-columns: minmax(0, var(--bui-facts-label)) minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	min-width: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-facts-label {
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.bui-facts-data {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
	margin: 0;
	/* A value that wraps reads from its start, never ragged at its left (0.11.2) */
	text-align: start;
}
.bui-facts-value {
	min-width: 0;
	color: var(--color-text);
	overflow-wrap: anywhere;
}
.bui-facts-value[data-mono] {
	font-family: var(--font-mono);
}
/* A number aligns to the end, in tabular figures (D99). */
.bui-facts-row[data-numeric] .bui-facts-data {
	justify-content: flex-end;
}
.bui-facts-row[data-numeric] .bui-facts-value {
	font-variant-numeric: tabular-nums;
}
/* A row's own action keeps the row's end, whatever the value's length. */
.bui-facts-data > .bui-facts-action {
	margin-inline-start: auto;
}
.bui-facts-row[data-stale] .bui-facts-value {
	color: var(--color-text-muted);
}
.bui-facts-note {
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
/* A row's own action (Copy) reads on the value's first line, at its end: its words share the value's
   baseline, whether the value is beside its label or under it, its target grows around them, and a long
   value wraps beside it rather than pushing it to a line of its own (0.11.1). */
.bui-facts-action {
	display: inline-flex;
	flex: none;
	align-self: baseline;
}
.bui-facts-data:has(> .bui-facts-action) {
	flex-wrap: nowrap;
}
.bui-facts-action .bui-button {
	min-height: var(--bui-target);
	padding-block: 0;
	font-size: var(--text-small);
}
/* A long value in words stays in the value column, wrapping inside it (D99; 0.15.0, PKG-19); in a narrow
   container (a side panel under 30rem) it goes under its label, left-aligned, as a sentence is read (0.11.2). */
.bui-facts-row[data-long] .bui-facts-data {
	justify-content: flex-start;
}
@container bui-facts (max-width: 30rem) {
	.bui-facts-row[data-long] {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* A narrow container puts each value under its label (never decided by the window). */
@container bui-facts (max-width: 16rem) {
	.bui-facts-row {
		grid-template-columns: minmax(0, 1fr);
	}
	.bui-facts-data,
	.bui-facts-row[data-numeric] .bui-facts-data {
		justify-content: flex-start;
		text-align: start;
	}
}

/* A use against a limit: label, percent and the level in words on one line, the track, then its note. */
.bui-meter {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-meter-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-2);
}
.bui-meter-label {
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.bui-meter-value {
	margin-inline-start: auto;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.bui-meter-word {
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-meter[data-level='danger'] .bui-meter-word,
.bui-meter[data-level='full'] .bui-meter-word {
	color: var(--color-danger);
}
.bui-meter-track {
	position: relative;
	height: var(--space-2);
	overflow: hidden;
	border-radius: var(--radius-round);
	background: var(--color-surface-sunken);
	box-shadow: inset 0 0 0 1px var(--color-border);
}
.bui-meter-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--bui-meter, 0) * 100%);
	border-radius: inherit;
	/* A use is a fact, not an action: the info hue, so coral stays the region's primary action (C2, D158) */
	background: var(--color-info);
	transition: width var(--motion-standard) var(--motion-ease);
}
.bui-meter[data-level='warning'] .bui-meter-fill {
	background: var(--color-warning);
}
.bui-meter[data-level='danger'] .bui-meter-fill,
.bui-meter[data-level='full'] .bui-meter-fill {
	background: var(--color-danger);
}
/* Not current: the track and the value muted, the note said. */
.bui-meter[data-stale] .bui-meter-fill {
	background: var(--color-text-muted);
	opacity: 0.45;
}
.bui-meter[data-stale] .bui-meter-value,
.bui-meter[data-stale] .bui-meter-word {
	color: var(--color-text-muted);
}
.bui-meter-note {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
.bui-meter-note[hidden],
.bui-meter-word[hidden] {
	display: none;
}

/* @beyond-js/ui: the arrival line and the 24 px targets of a small line's standalone links (D54, WCAG 2.5.8). */
/* The arrival line: first in the region, small, at its start (D54). */
.bui-arrival {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-arrival-back {
	color: var(--color-link);
}
.bui-arrival-dismiss {
	margin-inline-start: var(--space-1);
}
/*
 * A standalone link on a small line (a crumb, the arrival line's way back) is a 24 px target (WCAG 2.5.8)
 * without changing the line: the block padding grows the hit area to about 26 px, a pixel of slack on each
 * side so a fractional layout never rounds it under 24 (0.7.9), and the equal negative margin gives the
 * space back (0.7.7). The fixed values are the fallback where `lh` is not known.
 */
.bui-crumbs a,
.bui-arrival-back {
	display: inline-block;
	padding-block: 4px;
	padding-block: max(1px, calc((26px - 1lh) / 2));
	margin-block: -4px;
	margin-block: min(-1px, calc((1lh - 26px) / 2));
}
/* A line whose way back is not known yet holds its place, unseen and inert (0.44.0, D185). */
.bui-arrival[data-held] {
	visibility: hidden;
}

/* Notification items (panel and inbox) and the inbox tools. */
/* A notification row (D79, 0.13.0): the whole row opens the item. The title's button is stretched over
   the row; what else the row holds (the mark, the earlier updates) sits above that layer. */
.bui-notices {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-notice {
	position: relative;
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr);
	column-gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius-control);
}
.bui-notice:hover,
.bui-notice:has(> .bui-notice-text > .bui-notice-open:focus-visible) {
	background: var(--color-surface-sunken);
}
/* The dot is centred on the title's first line. */
.bui-notice-dot {
	width: 8px;
	height: 8px;
	margin-top: calc((1lh - 8px) / 2);
	border-radius: var(--radius-round);
}
.bui-notice[data-read='false'] > .bui-notice-dot {
	background: var(--color-accent);
}
.bui-notice-text {
	display: grid;
	justify-items: start;
	gap: 2px;
	min-width: 0;
}
.bui-notice-open {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font: inherit;
	font-weight: var(--weight-regular);
	text-align: left;
	overflow-wrap: anywhere;
	cursor: pointer;
}
.bui-notice-open::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.bui-notice-open:focus-visible {
	outline: none;
}
.bui-notice:has(> .bui-notice-text > .bui-notice-open:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}
.bui-notice[data-read='false'] .bui-notice-open {
	font-weight: var(--weight-medium);
}
.bui-notice-summary,
.bui-notice-meta {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}
.bui-notice-summary {
	color: var(--color-text-muted);
}
.bui-notice-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	width: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
/* Mark as read: quiet, at the details' end, shown while the row is pointed at or holds focus, and
   always where nothing hovers (touch). It stays in the tab order, so it shows when it takes focus. */
.bui-notice-mark,
.bui-notice-toggle,
.bui-notice-earlier {
	position: relative;
	z-index: 1;
}
/* On a pointer they are 24 px targets that keep the details' line, as crumbs are (arrival.css); on
   touch the family target. */
.bui-notice-mark,
.bui-notice-toggle {
	min-height: 0;
	padding-block: 4px;
	padding-block: max(1px, calc((26px - 1lh) / 2));
	margin-block: -4px;
	margin-block: min(-1px, calc((1lh - 26px) / 2));
}
/* On a touch screen (D192, 0.41.0) a control's 44 px target stays in the row's padding box and off the row's
   words, so a press on the row's words always opens the matter (D79): it takes its own line and grows below its
   words by what a target needs, never over the summary above or the line below. A row whose last line is a
   control's gives that target its end padding, so it grows only by the rest. The row keeps its inset at its
   top and sides; below a control's words the target's room stands, about 31 px instead of 8. */
@media (pointer: coarse) {
	.bui-notice-mark,
	.bui-notice-toggle {
		min-height: 0;
		padding-block: 0 calc(var(--bui-target) - 1lh);
		margin-block: 0;
	}
	/* Over the toggle's own spacing above it, which its base rule below gives */
	.bui-notice .bui-notice-toggle {
		margin-block-start: var(--space-1);
	}
	.bui-notice:not(:has(> .bui-notice-text > :is(.bui-notice-earlier:not([hidden]), .bui-notice-count))) {
		padding-block-end: 0;
	}
}
.bui-notice-mark {
	margin-left: auto;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	text-decoration: none;
	opacity: 0;
}
.bui-notice:hover > .bui-notice-text > .bui-notice-meta > .bui-notice-mark,
.bui-notice:focus-within > .bui-notice-text > .bui-notice-meta > .bui-notice-mark {
	opacity: 1;
}
.bui-notice-mark:hover,
.bui-notice-mark:focus-visible {
	color: var(--color-link);
	text-decoration: underline;
}
@media (hover: none) {
	.bui-notice-mark {
		opacity: 1;
	}
}
.bui-notice-toggle {
	margin-top: var(--space-1);
	font-size: var(--text-label);
}
/* A matter whose earlier updates no page loaded says how many it holds (0.15.0, X-07); a resolved one says when. */
.bui-notice-resolved {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
.bui-notice-count {
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-label);
}
.bui-notice-earlier {
	width: 100%;
	margin-top: var(--space-1);
	padding-left: var(--space-2);
	border-left: 2px solid var(--color-border);
}
.bui-notice-earlier[hidden] {
	display: none;
}
.bui-notice-day {
	margin: var(--space-2) 0 var(--space-1);
	padding: 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
}
.bui-notice-day:first-child {
	margin-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.bui-notice-mark {
		transition: opacity var(--motion-quick) var(--motion-ease);
	}
}

.bui-inbox {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}
.bui-inbox-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
}
.bui-inbox-product {
	display: grid;
	gap: var(--space-1);
}
.bui-inbox-tools .bui-button {
	min-height: var(--bui-control);
	margin-left: auto;
}
.bui-inbox-body[aria-busy='true'] .bui-notices {
	opacity: 0.6;
}

/* A full inbox gives each matter room to be read. The bell keeps its compact preview. Opening is
   one target per row, named by its title and a visible View cue; reading and earlier updates remain
   independent controls above that target. The list hangs its hover surface into the content gutter. */
.bui-inbox .bui-notices:not(.bui-notice-earlier) {
	gap: 0;
	margin-inline: calc(-1 * var(--space-4));
}
.bui-notice.bui-notice-page {
	--bui-notice-inset: var(--space-4);
	padding: var(--space-4);
	border-radius: 0;
}
.bui-notice-page + .bui-notice-page::before {
	position: absolute;
	inset: 0 var(--space-4) auto;
	border-top: 1px solid var(--color-border-strong);
	content: '';
	pointer-events: none;
}
.bui-notice-page > .bui-notice-text {
	gap: var(--space-2);
	max-width: none;
}
.bui-notice-page > .bui-notice-text > .bui-notice-open {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	width: 100%;
	font-weight: var(--weight-medium);
}
.bui-notice-page .bui-notice-title {
	min-width: 0;
	flex: 1;
}
.bui-notice-view {
	flex: none;
	color: var(--color-link);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.bui-notice-page > .bui-notice-text > .bui-notice-summary {
	max-width: var(--layout-measure);
}
.bui-notice-page .bui-notice-earlier {
	margin-top: var(--space-2);
}
.bui-notice-page .bui-notice-earlier > .bui-notice-page {
	padding-inline: var(--space-2);
}
.bui-inbox .bui-notice-day {
	margin-block: var(--space-5) 0;
	padding-inline: 0;
}
.bui-inbox .bui-notice-day:first-child {
	margin-block-start: 0;
}
@media (pointer: coarse) {
	/* The quiet control owns the remaining bottom inset, as in the preview (D192). */
	.bui-notice-page:not(:has(> .bui-notice-text > :is(.bui-notice-earlier:not([hidden]), .bui-notice-count))) {
		padding-block-end: 0;
	}
}
/* Compact filter faces keep the two filters together on a 390 px phone, with whole labels. */
.bui-inbox-tools .bui-toggle {
	padding-inline: var(--space-3);
}

/* Long operations (D50): timed steps, the awaited card, a state with its freshness and technical
   details. Every state is in words; color only repeats it. Nothing moves under reduced motion. */
.bui-steps-list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-step {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--space-2);
	align-items: start;
}
.bui-step-mark {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-round);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
}
.bui-step-mark .bui-icon {
	width: 14px;
	height: 14px;
}
.bui-step-done .bui-step-mark {
	border-color: var(--color-success);
	color: var(--color-success);
}
.bui-step-progress .bui-step-mark {
	border-color: var(--color-info);
}
.bui-step-stalled .bui-step-mark {
	border-color: var(--color-warning);
	color: var(--color-warning);
}
.bui-step-failed .bui-step-mark {
	border-color: var(--color-danger);
	color: var(--color-danger);
}
.bui-step-ring {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-round);
	background: var(--color-info);
	/* A live dot pulses about five seconds, then holds (D95) */
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-step-body {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding-top: 2px;
}
/* A step's first line centred on its 24 px mark at any line height, so a last step ends on its mark (D184) */
@supports (padding-top: calc(1lh)) {
	.bui-step-body {
		padding-top: max(0px, calc((24px - 1lh) / 2));
	}
}
.bui-step-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
}
.bui-step-label {
	font-weight: var(--weight-medium);
	overflow-wrap: anywhere;
}
/* The state in words beside the name: the mark on the left already gives it its shape (0.18.4) */
.bui-step-state {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-step-stalled .bui-step-state {
	color: var(--color-warning);
}
.bui-step-failed .bui-step-state {
	color: var(--color-danger);
}
.bui-step-waiting .bui-step-label {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}
.bui-step-time,
.bui-step-phase {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
}
.bui-step-slow .bui-step-time {
	color: var(--color-text);
}
.bui-step-reason {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}

/* The awaited card: one card that moves, in the page's flow (no elevation). */
.bui-awaited {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
	color: var(--color-text);
}
.bui-awaited[data-state='stalled'] {
	border-left: 3px solid var(--color-warning);
}
.bui-awaited[data-state='failed'] {
	border-left: 3px solid var(--color-danger);
}
.bui-awaited-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2) var(--space-3);
}
.bui-awaited-mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 1lh;
	color: var(--color-info);
}
.bui-awaited[data-state='stalled'] .bui-awaited-mark {
	color: var(--color-warning);
}
.bui-awaited[data-state='failed'] .bui-awaited-mark {
	color: var(--color-danger);
}
.bui-awaited[data-state='done'] .bui-awaited-mark {
	color: var(--color-success);
}
.bui-awaited-heading {
	flex: 1 1 12rem;
	min-width: 0;
}
.bui-awaited-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body);
	overflow-wrap: anywhere;
}
.bui-awaited-since,
.bui-awaited-note {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-awaited-time {
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
}
.bui-awaited-bar {
	display: block;
	width: 100%;
	height: 4px;
	border: 0;
	border-radius: var(--radius-round);
	background: var(--color-surface-sunken);
	color: var(--color-info);
	appearance: none;
	overflow: hidden;
}
.bui-awaited-bar::-webkit-progress-bar {
	background: var(--color-surface-sunken);
}
.bui-awaited-bar::-webkit-progress-value {
	background: var(--color-info);
	transition: width var(--motion-standard) var(--motion-ease);
}
.bui-awaited-bar::-moz-progress-bar {
	background: var(--color-info);
}
/* Indeterminate: a band that travels, or a still band under reduced motion. */
.bui-awaited-bar:indeterminate {
	background: linear-gradient(90deg, var(--color-surface-sunken) 0 30%, var(--color-info) 30% 60%, var(--color-surface-sunken) 60% 100%) var(--color-surface-sunken);
	background-size: 200% 100%;
	animation: bui-travel 1.6s linear infinite;
}
/* Still, an unknown share is a dashed track along the whole bar (0.19.1): a band held in one place
   would read as a share already done. */
@media (prefers-reduced-motion: reduce) {
	.bui-awaited-bar:indeterminate {
		background: repeating-linear-gradient(to right, var(--color-info) 0 var(--space-2), var(--color-surface-sunken) var(--space-2) var(--space-4));
	}
}
.bui-awaited-bar:indeterminate::-webkit-progress-bar {
	background: transparent;
}
.bui-awaited-bar:indeterminate::-moz-progress-bar {
	background: transparent;
}
.bui-awaited-bar[hidden],
.bui-awaited-reason[hidden],
.bui-awaited-actions[hidden],
.bui-awaited-since[hidden] {
	display: none;
}
@keyframes bui-travel {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}
.bui-awaited-reason {
	display: grid;
	gap: var(--space-2);
	justify-items: start;
}
.bui-awaited-why {
	margin: 0;
	overflow-wrap: anywhere;
}
.bui-awaited-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

/* A state with its freshness and technical details (D50, D43): words first, color only repeats them. */
/* A state with its freshness. */
.bui-freshness {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--space-2);
}
.bui-freshness-age {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-freshness-age[hidden] {
	display: none;
}
.bui-freshness-stale .bui-status {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}

/* Technical details: the source's words, the request and the time, copyable. */
.bui-details {
	min-width: 0;
	width: 100%;
	max-width: var(--layout-form);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
/* Evidence inside a notice belongs to its text column, not a second form-width region. */
.bui-callout-body > .bui-details,
.bui-callout-body > .bui-host > .bui-details {
	max-width: none;
}
/* The family's one disclosure affordance (0.11.2): a `<summary class="bui-summary">` with the chevron
   glyph before its words, turned toward the words while closed and down while open, in the text color,
   so it never reads as a link. A product's own `<details>` uses the same class and glyph. */
.bui-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--bui-target);
	color: var(--color-text);
	font-weight: var(--weight-medium);
	list-style: none;
	cursor: pointer;
}
.bui-summary::-webkit-details-marker {
	display: none;
}
.bui-summary > .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
	rotate: -90deg;
	transition: rotate var(--motion-quick) var(--motion-ease);
}
details[open] > .bui-summary > .bui-icon {
	rotate: 0deg;
}
.bui-summary:hover > .bui-icon {
	color: var(--color-text);
}
.bui-summary:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--radius-control);
}
.bui-details-body {
	min-width: 0;
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-1);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
}
.bui-details-content {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-details-text {
	min-width: 0;
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	margin: 0;
	max-height: 16rem;
	overflow: auto;
	font-family: var(--font-mono);
	font-size: var(--text-small);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.bui-details-facts {
	display: grid;
	gap: 2px;
	margin: 0;
}
.bui-details-facts > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.bui-details-facts dt {
	color: var(--color-text-muted);
}
.bui-details-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.bui-details-facts code {
	font-family: var(--font-mono);
}
/* The reads one incident affected (0.24.0, D163): a row each, its request and time; long identifiers wrap. */
.bui-details-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-small);
	line-height: var(--leading-body);
}
.bui-details-table th,
.bui-details-table td {
	padding: 2px var(--space-3) 2px 0;
	font-weight: var(--weight-regular);
	text-align: start;
	vertical-align: baseline;
	overflow-wrap: anywhere;
}
.bui-details-table th:last-child,
.bui-details-table td:last-child {
	padding-inline-end: 0;
}
.bui-details-table thead th {
	color: var(--color-text-muted);
}
.bui-details-table code {
	font-family: var(--font-mono);
}
.bui-details-table time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bui-details-said td {
	padding-bottom: var(--space-2);
}
.bui-details-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.bui-details-result {
	margin: 0;
	color: var(--color-text-muted);
}
.bui-details-refused {
	color: var(--color-text);
}

/* One thing with one state (StatusRow), a text to copy (CopyMessage) and a provider's window
   (ProviderWindow). Flat, in the page's flow: no surface of their own beyond one border. */

.bui-statusrow {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	min-width: 0;
}
.bui-statusrow-main {
	display: grid;
	gap: var(--space-1);
	flex: 1 1 18rem;
	min-width: 0;
}
.bui-statusrow-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
}
.bui-statusrow-mark {
	display: inline-grid;
	color: var(--color-text-muted);
}
.bui-statusrow-mark .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-statusrow-success {
	color: var(--color-success);
}
.bui-statusrow-warning {
	color: var(--color-warning);
}
.bui-statusrow-danger {
	color: var(--color-danger);
}
.bui-statusrow-title {
	margin: 0;
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	overflow-wrap: anywhere;
}
.bui-statusrow-kind,
.bui-statusrow-reason,
.bui-statusrow-owner,
.bui-statusrow-facts {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-statusrow-reason {
	max-width: var(--layout-measure);
	color: var(--color-text);
}
.bui-statusrow-label {
	font-weight: var(--weight-medium);
}
.bui-statusrow-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	padding: 0;
	list-style: none;
}
.bui-statusrow-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.bui-statusrow [hidden] {
	display: none;
}

.bui-copy {
	display: grid;
	gap: var(--space-2);
	max-width: var(--layout-measure);
	min-width: 0;
}
.bui-copy-label {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
}
.bui-copy-text {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
	user-select: all;
}
/* A command's code box keeps its lines and scrolls in its own box. Its holder carries `bui-copy-command`
   too (its kind), so the rule names the box: the holder's label, Copy and result keep the interface's face,
   and its measure is counted in it (0.35.0). */
.bui-copy-text.bui-copy-command {
	overflow-x: auto;
	white-space: pre;
	overflow-wrap: normal;
	font-family: var(--font-mono);
}
.bui-copy-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.bui-copy-result {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-copy-refused {
	color: var(--color-text);
}
/* A copy confirmed in place (CopyButton, 0.11.2): the button says the result, with the check glyph,
   and goes back to its words; nothing floats over the page. */
.bui-copy-button {
	display: inline-flex;
	min-width: 0;
}
.bui-copy-button-said {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
.bui-copy-button-said .bui-icon {
	width: 14px;
	height: 14px;
}
.bui-copy-button[data-result='copied'] .bui-button {
	color: var(--color-success);
}
/* A copyable value's Copy (0.37.0, D188): its words stand twice its hang after the value (list.css), and its
   surface hangs toward the value, never past the end of the piece it belongs to. */
.bui-copy-value > .bui-copy-button .bui-button-quiet {
	margin-inline-end: 0;
}

.bui-provider {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	min-width: 0;
}
.bui-provider:empty {
	display: none;
}
.bui-provider-steps,
.bui-provider-said {
	margin: 0;
	max-width: var(--layout-measure);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-provider-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Awaited in one line (AwaitedLine, 0.7.1): a row's wait, wrapping at narrow widths, never cut. */
.bui-line {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-1);
	max-width: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-line-mark {
	display: inline-grid;
	place-items: center;
	width: 16px;
	color: var(--color-info);
}
.bui-line-mark .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-line[data-state='slow'] .bui-line-mark,
.bui-line[data-state='stalled'] .bui-line-mark {
	color: var(--color-warning);
}
.bui-line[data-state='failed'] .bui-line-mark {
	color: var(--color-danger);
}
.bui-line[data-state='done'] .bui-line-mark {
	color: var(--color-success);
}
.bui-line-title {
	color: var(--color-text);
	font-weight: var(--weight-medium);
}
.bui-line-time {
	overflow-wrap: anywhere;
}
.bui-line [hidden],
.bui-line-note:empty {
	display: none;
}

/* The message box (Composer, 0.10.0): an optional state line, a field of one line that grows to twelve,
   and a toolbar with the product's tools at its start and the actions at its end. Since 0.11.0 the
   toolbar's start holds Attach, the turn's settings and the tools. Since 0.26.0 (D165) the box is one
   rounded surface: the state line is its first band, and every control of its toolbar is one target tall,
   round when it is a glyph alone (+, Dictate, Interrupt, Send) and a pill when it has words (a chip, a
   step), each with a quiet edge of its own; only Send is filled. Since 0.29.0 (D184) its parts keep one
   inset, `--bui-composer-inset`, on every side: the first line's capitals stand one inset under the box's
   edge, the controls one inset above it and the + on the text's edge. Tokens only. */
.bui-composer {
	--bui-composer-radius: calc(var(--radius-base) * 2.5);
	--bui-composer-inset: var(--space-3);
	container: bui-composer / inline-size;
	position: relative;
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	color: var(--color-text);
}
.bui-composer-box {
	position: relative;
	display: grid;
	min-width: 0;
	border: 1px solid var(--color-border-control);
	border-radius: var(--bui-composer-radius);
	background: var(--color-surface);
}
/* The field draws no ring of its own: the box lights its own edge while the field has the focus (focus.css, D187). */
.bui-composer-field:focus-visible {
	outline: none;
}
/* The state line, the box's first band (0.26.0), with its action at its end; it is not the field's content.
   It shares the box's edges: its words start where the field's do. Since 0.29.0 it is also where a send
   that failed says why, on a row of its own above the sentence (D183). */
.bui-composer-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 calc(2 * var(--bui-quiet-hang));
	min-width: 0;
	padding: var(--space-1) var(--bui-composer-inset);
	border-bottom: 1px solid var(--color-border);
	border-start-start-radius: calc(var(--bui-composer-radius) - 1px);
	border-start-end-radius: calc(var(--bui-composer-radius) - 1px);
	background: var(--overlay-lift);
}
.bui-composer-line[hidden] {
	display: none;
}
.bui-composer-status-action {
	display: inline-flex;
	margin-inline-start: auto;
}
.bui-composer-status-action .bui-button {
	min-height: var(--bui-target);
	padding-block: 0;
}
.bui-composer-status {
	flex: 1 1 16rem;
	min-width: 0;
	margin: 0;
	padding-block: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	overflow-wrap: anywhere;
}
.bui-composer-status a {
	color: var(--color-link);
}
/* One line when empty, growing with the text to `max` lines, then scrolling; never animated. */
.bui-composer-field {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: calc(var(--bui-composer-min, 1) * 1lh + var(--space-2) + var(--space-1));
	max-height: min(calc(var(--bui-composer-max, 12) * 1lh + var(--space-2) + var(--space-1)), var(--bui-composer-cap, 33dvh));
	margin: 0;
	padding: var(--space-2) var(--bui-composer-inset) var(--space-1);
	border: 0;
	border-radius: var(--bui-composer-radius) var(--bui-composer-radius) 0 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	resize: none;
	overflow-y: auto;
}
/* The placeholder is the textarea's for assistive technology and drawn by the line laid over it: one line,
   ending with an ellipsis when it is long, whatever the engine; an empty field never scrolls. */
.bui-composer-input {
	position: relative;
	min-width: 0;
}
.bui-composer-field::placeholder {
	color: transparent;
}
.bui-composer-field:placeholder-shown {
	overflow: hidden;
}
.bui-composer-placeholder {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline: var(--bui-composer-inset);
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
}
.bui-composer-field:not(:placeholder-shown) + .bui-composer-placeholder,
.bui-composer-placeholder:empty {
	display: none;
}
.bui-composer-problem {
	display: flex;
	flex: 1 1 100%;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding-block: var(--space-1);
	color: var(--color-danger);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	overflow-wrap: anywhere;
}
.bui-composer-problem .bui-icon {
	width: 16px;
	height: 16px;
	margin-top: calc((1lh - 16px) / 2);
}
.bui-composer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-1) var(--bui-composer-inset) var(--bui-composer-inset);
}
.bui-composer-start,
.bui-composer-settings,
.bui-composer-tools,
.bui-composer-extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}
.bui-composer-start {
	flex: 1 1 auto;
}
.bui-composer-start:not(:has(> :not(:empty))),
.bui-composer-settings:empty,
.bui-composer-tools:empty,
.bui-composer-extras:empty {
	display: none;
}
/* The + holds one control (the button or the menu's button) and is one target wide. */
.bui-composer-add {
	display: inline-flex;
	flex: none;
}
.bui-composer-add[hidden] {
	display: none;
}
.bui-composer-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
}
.bui-composer-keys {
	padding: 0 var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-label);
}
/* A product's React content keeps the toolbar's flow */
.bui-composer-slot {
	display: contents;
}
.bui-composer-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	min-width: 0;
	margin-inline-start: auto;
}
/* Why sending is unavailable, said beside the action (D44). */
.bui-composer-reason {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}
/* Options (0.11.1): shown only when the toolbar folds, one round target like the +, so it lines up with
   the others; since 0.11.2 it may say what sending uses beside its glyph, as a pill. */
.bui-composer .bui-composer-more {
	display: none;
	color: var(--color-text-muted);
}
.bui-composer .bui-composer-more:hover,
.bui-composer .bui-composer-more[aria-expanded='true'] {
	color: var(--color-text);
}
.bui-composer .bui-composer-more[data-summary] {
	width: auto;
	max-width: 12rem;
	gap: var(--space-1);
	padding-inline: var(--space-2) var(--space-3);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-composer-summary {
	min-width: 0;
	overflow: hidden;
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bui-composer-summary:empty {
	display: none;
}
/* Open, Options shows the chips themselves: its summary would say them twice (0.26.0), so it is one target
   again; and so it is when even the folded row does not fit (`data-bare`), its name still saying the value */
.bui-composer:is([data-options], [data-bare]) .bui-composer-summary {
	display: none;
}
.bui-composer:is([data-options], [data-bare]) .bui-composer-more[data-summary] {
	width: var(--bui-target);
	padding-inline: 0;
}
/* The width the fit watches: a line across the composer, with no height of its own. */
.bui-composer-gauge {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 0;
	visibility: hidden;
	pointer-events: none;
}
/* One toolbar row (0.11.2, ComposerFit): a chip never wraps inside itself, so a toolbar that does not fit
   is measured as such; then the chips say their value only (`short`), and last the settings and Attach
   fold behind Options (`fold`). The label and a calm state stay in the chip's name and its tooltip; a
   state that asks for attention keeps its word; a long value ends in an ellipsis while the tooltip and
   the open menu say it whole (D44). */
.bui-composer[data-compact] .bui-composer-settings .bui-choice-button {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.bui-composer[data-fit] .bui-composer-settings .bui-choice-label,
.bui-composer[data-fit] .bui-composer-settings .bui-chip-state:not([data-tone='warning'], [data-tone='danger']) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bui-composer[data-fit] .bui-composer-settings .bui-choice-value {
	display: inline-block;
	max-width: 9rem;
	overflow: hidden;
	vertical-align: bottom;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}
.bui-composer[data-fit='fold'] .bui-composer-more {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
}
.bui-composer[data-fit='fold'][data-options] .bui-composer-more {
	align-self: flex-start;
}
.bui-composer[data-fit='fold'][data-options] .bui-composer-start {
	flex-basis: calc(100% - var(--bui-target) - var(--space-2));
}
.bui-composer[data-fit='fold']:not([data-options]) .bui-composer-settings {
	display: none;
}
/* `compact: false` keeps 0.11.0's toolbar: a narrow composer gives the toolbar's start a row of its own. */
@container bui-composer (max-width: 30rem) {
	.bui-composer:not([data-compact]) .bui-composer-start {
		flex-basis: 100%;
	}
}

/* The composer's edges (0.14.0, D100): the context tray on its lower edge, the growth cap near a third of the
   window with Expand, and the taller editor over the content. Since 0.34.0 (D187) the box lights its own edge
   while its field has the focus, as every box that takes typing does (focus.css); until then a coral border
   with a glow inside it, which read as the box's error. */

/* The context tray: one line of compact chips attached to the box's lower edge, inside its frame, wrapping
   on a narrow screen. */
.bui-composer-tray {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
	padding: var(--space-2) var(--bui-composer-inset) var(--bui-composer-inset);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-composer-tray > * {
	min-width: 0;
}

/* Expand: offered once the field reached its cap, at the box's top end, over the field's scrollbar's side. */
.bui-composer-grow {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-end: var(--space-1);
	z-index: 1;
	display: none;
}
.bui-composer[data-capped] .bui-composer-grow {
	display: inline-flex;
}
.bui-composer[data-capped] .bui-composer-field {
	padding-inline-end: calc(var(--bui-target) + var(--space-2));
}
.bui-composer-expand {
	width: var(--bui-target);
	height: var(--bui-target);
	color: var(--color-text-muted);
	background: var(--color-surface);
}
.bui-composer-expand .bui-icon {
	width: 16px;
	height: 16px;
}

/* The taller editor: the same box in a modal dialog over the content, as tall as the window allows, at the
   composer's own lane (0.29.0: the turns' 80rem would make its lines longer than the dock's). */
.bui-composer-editor {
	box-sizing: border-box;
	width: min(var(--layout-lane), calc(100vw - 2 * var(--space-4)));
	max-width: none;
	height: min(48rem, calc(100dvh - 2 * var(--space-6)));
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	overflow: visible;
}
.bui-composer-editor[open] {
	display: flex;
}
.bui-composer-editor::backdrop {
	background: var(--overlay-scrim);
}
.bui-composer-editor > .bui-composer-box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	box-shadow: var(--elevation-dialog);
}
.bui-composer-editor .bui-composer-input {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}
.bui-composer-editor .bui-composer-field {
	height: auto !important;
	max-height: none;
	flex: 1 1 auto;
}

/* A composer's dictation (0.14.0): Dictate in the toolbar's end, with its glyph beside its word, and the
   line inside the box between the field and the toolbar: a mark, the state in words, the time against the
   cap, a note, the decorative level meter and the ways on. The row is hidden while idle; the announcer
   beside it is visually hidden. Tokens only; nothing moves under reduced motion (the base rule). */
.bui-dictation-button .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-dictation-button[aria-disabled='true'] {
	color: var(--color-text-muted);
	cursor: default;
}
.bui-dictation-button[aria-disabled='true']:hover {
	background: transparent;
}
.bui-dictation {
	min-width: 0;
}
.bui-dictation-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
	padding: var(--space-1) var(--space-3) 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-dictation-row[hidden] {
	display: none;
}
.bui-dictation-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 16px;
}
.bui-dictation-mark:empty {
	display: none;
}
.bui-dictation-mark .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-dictation-mark .bui-spinner {
	width: 12px;
	height: 12px;
}
.bui-dictation[data-state='failed'] .bui-dictation-mark {
	color: var(--color-danger);
}
/* The recording dot: the meaning is in the word beside it, never in the color alone. */
.bui-dictation-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-round);
	background: var(--color-danger);
	/* Pulses about five seconds, then holds (D95) */
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-dictation-text {
	min-width: 0;
	color: var(--color-text);
	overflow-wrap: anywhere;
}
.bui-dictation[data-state='failed'] .bui-dictation-text {
	flex: 1 1 16rem;
	max-width: var(--layout-measure);
}
.bui-dictation-time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bui-dictation-note {
	color: var(--color-warning);
	white-space: nowrap;
}
.bui-dictation-time[hidden],
.bui-dictation-note[hidden],
.bui-dictation-text[hidden] {
	display: none;
}
/* The level meter: a few bars, decorative, raised by the loudness the script writes as a number. */
.bui-dictation-level {
	display: none;
	align-items: center;
	gap: 2px;
	height: 16px;
}
.bui-dictation[data-state='recording'] .bui-dictation-level {
	display: inline-flex;
}
.bui-dictation-bar {
	width: 3px;
	height: 16px;
	border-radius: var(--radius-round);
	background: var(--color-text-muted);
	transform: scaleY(calc(0.2 + 0.8 * var(--bui-dictation-level, 0) * var(--bui-dictation-weight, 1)));
	transition: transform var(--motion-quick) var(--motion-ease);
}
.bui-dictation-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-inline-start: auto;
}
.bui-dictation-actions:empty {
	display: none;
}
.bui-dictation-actions .bui-button .bui-icon {
	width: 14px;
	height: 14px;
}

/* A composer's attachments and suggestions (0.11.0): removable chips at the box's top, a drop target
   over the box while files are dragged over it, and the suggestions' list opened against the box.
   Tokens only; the list is a menu, the one part that overlaps (D10). */
.bui-composer-files {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: var(--bui-composer-inset) var(--bui-composer-inset) 0;
	list-style: none;
}
.bui-composer-files[hidden] {
	display: none;
}
.bui-composer-file {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: min(100%, 20rem);
	min-width: 0;
	padding: var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
}
.bui-composer-file[data-state='failed'] {
	border-color: var(--color-danger);
}
.bui-composer-thumb {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--bui-target);
	height: var(--bui-target);
	overflow: hidden;
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text-muted);
}
.bui-composer-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bui-composer-thumb .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-composer-file-text {
	display: grid;
	min-width: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
/* The name on one line, cut only while a tooltip shows it whole (D44). */
.bui-composer-file-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bui-composer-file-meta {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	overflow-wrap: anywhere;
}
.bui-composer-file[data-state='failed'] .bui-composer-file-meta {
	color: var(--color-danger);
}
/* A file the product would not take (0.11.2): said in words, quiet, never an error of sending. */
.bui-composer-file[data-state='refused'] {
	border-style: dashed;
	border-color: var(--color-border-strong);
	background: transparent;
}
.bui-composer-file[data-state='refused'] .bui-composer-file-name {
	color: var(--color-text-muted);
}
.bui-composer-file-bar {
	position: relative;
	height: 2px;
	margin-top: 2px;
	overflow: hidden;
	background: var(--color-border);
}
.bui-composer-file-bar[hidden],
.bui-composer-file-retry[hidden] {
	display: none;
}
.bui-composer-file-bar > span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--bui-file, 0) * 100%);
	background: var(--color-action);
	transition: width var(--motion-standard) var(--motion-ease);
}
.bui-composer-file-retry {
	flex: none;
	min-height: var(--bui-target);
	padding-block: 0;
	font-size: var(--text-small);
}
/* Retry is one of its chip's controls: it keeps its padding, its words clear of the file's name (D188) */
.bui-button-quiet.bui-composer-file-retry {
	margin-inline: 0;
}
.bui-composer-file-remove {
	flex: none;
}
/* While files are dragged over the composer: the box says where they go. */
.bui-composer-drop {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
	place-items: center;
	border: 2px dashed var(--color-action);
	border-radius: var(--radius-base);
	background: var(--color-surface-selected);
	color: var(--color-text);
	font-weight: var(--weight-medium);
	pointer-events: none;
}
.bui-composer[data-drop] .bui-composer-drop {
	display: grid;
}
/* While files are dragged over a product's work surface (ComposerZone, 0.11.2): one target over its
   visible part, which never takes the pointer. */
.bui-composer-zone {
	position: fixed;
	z-index: 30;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border: 2px dashed var(--color-action);
	border-radius: var(--radius-base);
	background: var(--color-surface-selected);
	color: var(--color-text);
	font-weight: var(--weight-medium);
	pointer-events: none;
}
.bui-composer-zone[hidden] {
	display: none;
}
/* The suggestions after a trigger: a menu against the box, above it where there is no room below. */
.bui-composer-suggest {
	min-width: min(100%, 18rem);
	max-height: 16rem;
}
.bui-composer-options {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bui-composer-options[hidden],
.bui-composer-suggest-line[hidden] {
	display: none;
}
/* One line an option (0.11.2): its label, then its detail, cut at the line's end. */
.bui-composer-option {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
	min-height: var(--bui-target);
	box-sizing: border-box;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-control);
	cursor: pointer;
}
.bui-composer-option[aria-selected='true'] {
	background: var(--color-surface-selected);
	box-shadow: inset 2px 0 0 var(--color-accent);
}
.bui-composer-option-label[data-mono] {
	font-family: var(--font-mono);
}
.bui-composer-option-label {
	flex: 0 1 auto;
	min-width: 0;
	font-size: var(--text-small);
	overflow-wrap: anywhere;
}
.bui-composer-option-detail {
	flex: 1 1 0;
	min-width: 4rem;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bui-composer-suggest-line {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
/* A list the source cut ends with the line that says so (0.11.1), kept in view under the options: the
   options scroll above it, so an active option is never under it. */
.bui-composer-suggest[data-cut]:not([hidden]) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bui-composer-suggest[data-cut] .bui-composer-options {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.bui-composer-suggest[data-cut] .bui-composer-suggest-line {
	flex: none;
	border-top: 1px solid var(--color-border);
}

/* The composer's controls (0.26.0, D165): one geometry for the toolbar of every composer. A glyph alone
   (+, Dictate, Interrupt, Options) is a round target with a quiet edge; a chip (a setting, the tray's
   context) is a pill of the same height and edge showing its value; Send is the one filled control. The
   box's live edge says the product's work runs. Tokens only. */
/* One geometry for every control of the box (0.26.0, D165): a glyph alone is a round target with a quiet
   edge, the same height as the chips beside it, its hover a lift inside that same circle. */
.bui-composer :is(.bui-button-bare, .bui-composer-plus, .bui-composer-more) {
	flex: none;
	box-sizing: border-box;
	width: var(--bui-target);
	min-width: var(--bui-target);
	height: var(--bui-target);
	min-height: var(--bui-target);
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-round);
	background: transparent;
	color: var(--color-text);
}
.bui-composer :is(.bui-button-bare, .bui-composer-plus, .bui-composer-more):not(:disabled, [aria-disabled='true']):hover,
.bui-composer :is(.bui-composer-plus, .bui-composer-more)[aria-expanded='true'] {
	border-color: var(--color-border-strong);
	background: var(--overlay-lift);
}
.bui-composer :is(.bui-button-bare, .bui-composer-plus, .bui-composer-more) .bui-icon {
	width: 18px;
	height: 18px;
}
/* Every chip of the box (the settings and the tray): a pill one target tall with the same quiet edge, its
   value alone, its label and a ready state in its name and its tooltip; any other state keeps its word
   ("Asleep", "Not connected"), and the measured fit shortens it further (`short`). */
.bui-composer .bui-chip .bui-choice-button {
	gap: var(--space-1);
	min-height: var(--bui-target);
	padding: 0 var(--space-2) 0 var(--space-3);
	border-radius: var(--radius-round);
	background: transparent;
	font-size: var(--text-small);
}
.bui-composer .bui-chip .bui-choice-button:not([data-tone='danger'], [data-tone='warning']) {
	border-color: var(--color-border);
}
.bui-composer .bui-chip .bui-choice-button:not(:disabled, [aria-disabled='true']):hover,
.bui-composer .bui-chip .bui-choice-button[aria-expanded='true'] {
	border-color: var(--color-border-strong);
	background: var(--overlay-lift);
}
.bui-composer .bui-chip .bui-choice-label,
.bui-composer .bui-chip .bui-chip-state[data-tone='success'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bui-composer .bui-chip .bui-choice-value {
	font-weight: var(--weight-regular);
}
.bui-composer .bui-chip .bui-choice-button > .bui-icon {
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}
.bui-composer .bui-chip .bui-choice-button > .bui-icon:last-child {
	width: 14px;
	height: 14px;
}
.bui-composer .bui-chip.bui-choice-statement .bui-statement {
	min-height: var(--bui-target);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-round);
}
/* A chip that acts (ComposerChip, 0.35.0): what goes with a message, such as "Line comments 2", in the chips'
   geometry: a pill one target tall with the same quiet edge, its muted label and its value, no chevron since
   it opens no menu. It wraps rather than cuts; a toolbar that shortens its chips sets its label aside, its
   whole face then its tooltip, and never cuts its value, since an action is named whole (D179). */
.bui-composer-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-1);
	box-sizing: border-box;
	max-width: 100%;
	min-height: var(--bui-target);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-round);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-align: start;
	cursor: pointer;
}
/* The chip's holder keeps the button and its description, taking no box of its own */
.bui-composer-chip-holder {
	display: contents;
}
.bui-composer-chip:hover,
.bui-composer-chip[aria-expanded='true'] {
	border-color: var(--color-border-strong);
	background: var(--overlay-lift);
}
.bui-composer-chip:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
.bui-composer-chip > .bui-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}
.bui-composer-chip-label {
	color: var(--color-text-muted);
}
.bui-composer-chip-value {
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-composer[data-compact] .bui-composer-settings .bui-composer-chip {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.bui-composer[data-fit] .bui-composer-settings .bui-composer-chip-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Send (0.26.0): one filled round target with its glyph, the box's one primary; its words show only when
   they must be read first (a step, an action that is not a send), as a pill ending with the glyph. With
   nothing to send it reads quiet (the family's disabled surface) unless a step acts without a message,
   and since 0.29.0 a press says nothing (D183). The other ways to send are its chevron, joined to it by a
   hairline. */
.bui-composer-send {
	display: inline-flex;
	align-items: stretch;
	gap: 1px;
}
.bui-composer .bui-composer-go {
	border: 0;
	background: var(--color-action);
	color: var(--color-on-action);
}
.bui-composer .bui-composer-go:not(:disabled, [aria-disabled='true']):hover {
	border-color: transparent;
	background: var(--color-action-hover);
}
.bui-composer .bui-composer-go[data-words] {
	flex-direction: row-reverse;
	gap: var(--space-2);
	min-height: var(--bui-target);
	padding: 0 var(--space-3) 0 var(--space-4);
	border-radius: var(--radius-round);
}
.bui-composer .bui-composer-go[data-words] .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-composer[data-empty] .bui-composer-go:not([data-step], [data-busy]),
.bui-composer[data-empty] .bui-composer-send:has(> .bui-composer-go:not([data-step], [data-busy])) .bui-menu-button {
	background: var(--color-disabled);
	color: var(--color-on-disabled);
}
.bui-composer-send > .bui-button:not(:last-child) {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}
.bui-composer-send .bui-menu-holder {
	display: inline-flex;
}
.bui-composer-send .bui-menu-button {
	width: var(--bui-target);
	min-width: 0;
	min-height: var(--bui-target);
	padding: 0;
	border: 0;
	border-radius: 0 var(--radius-round) var(--radius-round) 0;
	background: var(--color-action);
	color: var(--color-on-action);
}
.bui-composer-send .bui-menu-button:hover {
	background: var(--color-action-hover);
}
.bui-composer-send .bui-menu-button .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-composer .bui-composer-stop .bui-icon {
	width: 14px;
	height: 14px;
}
/* Under the state band the field needs less room above it, the band already parting it from the box's
   edge; on a phone the band's sentence sits closer to its edges, so a dock with a two-line band stays
   within a quarter of a 320 × 640 screen (0.26.0). */
.bui-composer-line:not([hidden]) ~ .bui-composer-input > .bui-composer-field {
	min-height: calc(var(--bui-composer-min, 1) * 1lh + var(--space-2) + var(--space-1));
	padding-block-start: var(--space-2);
}
@container bui-composer (max-width: 30rem) {
	.bui-composer-status {
		padding-block: 2px;
	}
}
/* The product's work runs (0.26.0, `live`): a still line along the box's top edge, inside its corners, in
   the hue of work in progress (never the coral of the primary, C2), with a light that runs along it twice
   and then holds, as a live status dot pulses about five seconds (D95). A state, never content that
   moves; nothing runs under reduced motion. Since 0.34.0 (D187) it runs 1 px inside the edge, so the edge
   a focused box lights, in the text's tone, never hides it. */
.bui-composer[data-live] .bui-composer-box::before {
	content: '';
	position: absolute;
	z-index: 1;
	inset-block-start: 1px;
	inset-inline: var(--bui-composer-radius);
	height: 2px;
	border-radius: var(--radius-round);
	background:
		linear-gradient(90deg, transparent, var(--color-info), transparent) no-repeat -70% 0 / 40% 100%,
		color-mix(in srgb, var(--color-info) 45%, transparent);
	animation: bui-composer-live 2400ms ease-in-out 2;
	pointer-events: none;
}
@keyframes bui-composer-live {
	from {
		background-position: -70% 0, 0 0;
	}
	to {
		background-position: 170% 0, 0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bui-composer[data-live] .bui-composer-box::before {
		animation: none;
	}
}

/* A narrow composer (a phone) keeps one inset too, a smaller one, so its chips keep their room (0.29.0) */
@container bui-composer (max-width: 30rem) {
	.bui-composer-box {
		--bui-composer-inset: var(--space-2);
	}
}

/* One inset (0.29.0, D184): the first line's capitals stand one inset under the box's edge, measured from
   the font itself (the half-leading above the capitals taken off), so the space above the words and the
   space under the controls read the same. Without the `lh` and `cap` units it keeps 8 px. */
@supports (padding-top: calc(1lh - 1cap)) {
	.bui-composer-field {
		min-height: calc(var(--bui-composer-min, 1) * 1lh + var(--bui-composer-inset) - (1lh - 1cap) / 2 + var(--space-1));
		max-height: min(calc(var(--bui-composer-max, 12) * 1lh + var(--bui-composer-inset) - (1lh - 1cap) / 2 + var(--space-1)), var(--bui-composer-cap, 33dvh));
		padding-block-start: calc(var(--bui-composer-inset) - (1lh - 1cap) / 2);
	}
	.bui-composer-placeholder {
		inset-block-start: calc(var(--bui-composer-inset) - (1lh - 1cap) / 2);
	}
}
/* A quiet control in the box (0.37.0, D188): its surface stays one step inside the box's border at either
   inset. The state band gives its action's words twice that hang from its sentence and ends them on the
   inset (composer.css). */
.bui-composer-box {
	--bui-quiet-hang: calc(var(--bui-composer-inset) - var(--space-1));
}

/* Activity (ActivityRow, ActivityGroup, 0.10.0): rows of work, each with its state in words and a body
   opened in place; groups that fold consecutive rows. Nothing moves under reduced motion. */
.bui-activity {
	display: grid;
	min-width: 0;
	color: var(--color-text);
}
.bui-activity-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: var(--bui-target);
	margin: 0;
	padding: var(--space-1) var(--space-2);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	text-align: start;
}
button.bui-activity-head {
	cursor: pointer;
}
button.bui-activity-head:hover {
	background: var(--color-surface-sunken);
}
.bui-activity-head:focus-visible {
	outline-offset: -2px;
	animation: none;
}
.bui-activity-mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 1lh;
	color: var(--color-text-muted);
}
.bui-activity-mark .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-activity-mark .bui-spinner {
	width: 11px;
	height: 11px;
}
.bui-activity[data-state='failed'] > .bui-activity-head .bui-activity-mark {
	color: var(--color-danger);
}
/* A row's mark follows its state beside its words (0.12.0): what runs, what waits for the person, what was denied. */
.bui-activity[data-state='running'] > .bui-activity-head .bui-activity-mark {
	color: var(--color-info);
}
.bui-activity[data-state='waiting'] > .bui-activity-head .bui-activity-mark,
.bui-activity[data-state='denied'] > .bui-activity-head .bui-activity-mark {
	color: var(--color-warning);
}
.bui-activity-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-2);
	flex: 1 1 auto;
	min-width: 0;
}
/* The title takes two lines, then is cut; a tooltip and the opened body show it whole (D44). */
.bui-activity-title {
	display: -webkit-box;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow-wrap: anywhere;
}
.bui-activity-meta,
.bui-activity-time {
	flex: none;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.bui-activity-word {
	flex: none;
}
.bui-activity-word .bui-status {
	font-weight: var(--weight-regular);
}
.bui-activity-chevron {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: calc((1lh - 16px) / 2);
	color: var(--color-text-muted);
	transition: transform var(--motion-quick) var(--motion-ease);
}
.bui-activity-head[aria-expanded='true'] > .bui-activity-chevron {
	transform: rotate(180deg);
}
/* An opened row says its output in its body: the lines kept under its title are not said twice (0.12.0). */
.bui-activity-head[aria-expanded='true'] ~ .bui-activity-tail {
	display: none;
}
/* The last lines of a running step's output, muted, under its title. */
.bui-activity-tail,
.bui-activity-body {
	margin: 0 0 0 calc(18px + 2 * var(--space-2));
}
.bui-activity-tail {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.bui-activity-body,
.bui-activity-content {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}
.bui-activity-body {
	padding: var(--space-1) 0 var(--space-2);
}
.bui-activity-whole,
.bui-activity-note {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	overflow-wrap: anywhere;
}
.bui-activity-section {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}
.bui-activity-label {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
}
/* Input, output and diffs use the column's width and scroll sideways only inside their own box. */
.bui-activity-code {
	max-width: 100%;
	margin: 0;
	padding: var(--space-2) var(--space-3);
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	white-space: pre;
}
.bui-activity-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-3);
}
.bui-activity-result {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}
.bui-activity-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0 0 0 calc(18px + var(--space-2));
	list-style: none;
}
.bui-activity-item {
	min-width: 0;
}

/* Text arriving in pieces (LiveText): paragraphs at the reading measure, a live mark at the end, still
   under reduced motion; an unfinished draft muted with its note. */
.bui-live {
	min-width: 0;
}
.bui-live-body {
	min-width: 0;
	overflow-wrap: anywhere;
}
.bui-live-body[data-plain] {
	white-space: pre-wrap;
}
.bui-live-body > :where(p, ul, ol, blockquote, dl, h1, h2, h3, h4, h5, h6) {
	max-width: var(--layout-measure);
}
.bui-live-mark::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-start: var(--space-1);
	border-radius: var(--radius-round);
	background: var(--color-accent);
	vertical-align: middle;
	/* A live dot pulses about five seconds, then holds (D95) */
	animation: bui-pulse 1.2s ease-in-out 4;
}
.bui-live[data-state='abandoned'] .bui-live-body {
	color: var(--color-text-muted);
}
.bui-live-note {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
}

/* A rail of work (Rail, RailItem, RailMoment, 0.12.0): one thin line down the column of marks, each
   activity row's own mark or a RailItem's sitting on it, colored by its state beside its words; a time
   of day at the far end where the clock moved. The surface under the marks is the rail's background
   (`--bui-rail-surface`, the canvas unless a product's container says otherwise), so the line passes
   behind them. Nothing moves under reduced motion (the spinner's own rule). */
.bui-rail {
	--bui-rail-surface: var(--color-canvas);
	position: relative;
	min-width: 0;
}
.bui-rail::before {
	content: '';
	position: absolute;
	inset-block: calc(var(--space-1) + 0.5lh);
	inset-inline-start: calc(var(--space-2) + 8px);
	width: 1px;
	background: var(--color-border-strong);
	pointer-events: none;
}
.bui-rail:empty::before {
	content: none;
}
.bui-rail .bui-activity-mark,
.bui-rail-mark {
	position: relative;
	border-radius: var(--radius-round);
	background: var(--bui-rail-surface);
}
.bui-rail button.bui-activity-head:hover .bui-activity-mark {
	background: var(--color-surface-sunken);
}
.bui-rail-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
	padding-inline-start: var(--space-2);
}
.bui-rail-mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 1lh;
	color: var(--color-text-muted);
}
.bui-rail-mark .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-rail-mark .bui-spinner {
	width: 11px;
	height: 11px;
}
.bui-rail-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--radius-round);
	background: currentColor;
}
.bui-rail-content {
	flex: 1 1 auto;
	min-width: 0;
}
.bui-rail-item[data-tone='success'] > .bui-rail-mark {
	color: var(--color-success);
}
.bui-rail-item[data-tone='info'] > .bui-rail-mark,
.bui-rail-item[data-tone='progress'] > .bui-rail-mark {
	color: var(--color-info);
}
.bui-rail-item[data-tone='warning'] > .bui-rail-mark {
	color: var(--color-warning);
}
.bui-rail-item[data-tone='danger'] > .bui-rail-mark {
	color: var(--color-danger);
}
.bui-rail-moment {
	margin: 0;
	padding-inline-start: calc(18px + 2 * var(--space-2));
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--weight-regular);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* What a step was given and gave back in one box (ActivityExchange): each part a row, its label beside
   its text and its own Show all and Copy at the row's end, the text scrolling sideways inside the box only. */
.bui-activity-exchange {
	display: grid;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	background: var(--color-surface-sunken);
}
.bui-activity-exchange > .bui-activity-section {
	grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr) auto;
	column-gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
}
.bui-activity-exchange > .bui-activity-section + .bui-activity-section {
	border-top: 1px solid var(--color-border);
}
.bui-activity-exchange .bui-activity-label {
	grid-column: 1;
	line-height: var(--leading-small);
}
.bui-activity-exchange .bui-activity-code {
	grid-column: 2;
}
.bui-activity-exchange .bui-activity-actions {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	justify-content: flex-end;
	font-size: var(--text-small);
}
.bui-activity-exchange .bui-activity-code {
	padding: 0;
	border: 0;
	background: transparent;
}

/* Lanes (0.27.0): concurrent work as lanes on one time axis. The list is one grid and every lane a
   subgrid row of it, so the columns align across lanes by their content with nothing measured in script:
   the mark and the title (indented by depth under a tree connector), the kind, the live line, the time and
   the facts in tabular figures, and the trace. Its kind, facts and trace columns exist only when a lane
   has them (`data-kind`, `data-facts`, `data-trace` on the block). A lane is one line from 40rem of the
   block's width and two below it, by a container query; no change of words or times changes its height.
   The marks are `Status`'s shapes and hues and never pulse (LOAD-01); bars move only with the data, at
   each tick, so nothing animates, reduced motion or not. Tokens only. */
.bui-lanes {
	container: bui-lanes / inline-size;
	--bui-lanes-gap: var(--space-3);
	--bui-lanes-pad: var(--space-3);
	--bui-lanes-indent: 1.25rem;
	--bui-lanes-mark: 18px;
	--bui-lanes-span: 60000;
	--bui-lanes-guide: linear-gradient(var(--color-border-strong), var(--color-border-strong));
	min-width: 0;
}
.bui-lanes[data-kind] {
	--bui-lanes-kind: [kind] fit-content(8rem);
}
.bui-lanes[data-facts] {
	--bui-lanes-facts: [facts] minmax(3rem, max-content);
}
.bui-lanes[data-trace] {
	--bui-lanes-trace: [trace] minmax(5rem, 4fr);
}
/* The rows hang their padding into the gutter, so the marks keep the content's edge (P5) */
.bui-lanes-list {
	display: grid;
	grid-template-columns: [head] minmax(0, var(--bui-lanes-head-share, 6fr)) var(--bui-lanes-kind,) [now] minmax(0, var(--bui-lanes-now-share, 6fr)) [time] minmax(5rem, max-content) var(--bui-lanes-facts,) var(--bui-lanes-trace,);
	column-gap: var(--bui-lanes-gap);
	margin-inline: calc(-1 * var(--bui-lanes-pad));
}
.bui-lanes-lane {
	--bui-lanes-line: 50%;
	--bui-lanes-reach: calc(50% + 0.5px);
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: minmax(1lh, auto);
	align-items: center;
	justify-self: stretch;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--bui-target);
	margin: 0;
	padding: var(--space-1) var(--bui-lanes-pad);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	text-align: start;
	cursor: pointer;
}
.bui-lanes-lane:not([aria-current='true']):hover {
	background: var(--overlay-lift);
}
.bui-lanes-lane:active {
	background: var(--color-surface-sunken);
}
/* The lane whose detail is open: the selection's surface and its coral edge (C2) */
.bui-lanes-lane[aria-current='true'] {
	background: var(--color-surface-selected);
	box-shadow: inset 2px 0 0 var(--color-accent);
}
.bui-lanes-lane[aria-current='true']:dir(rtl) {
	box-shadow: inset -2px 0 0 var(--color-accent);
}
.bui-lanes-lane:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
.bui-lanes-head,
.bui-lanes-kind,
.bui-lanes-now,
.bui-lanes-time,
.bui-lanes-facts {
	grid-row: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bui-lanes-head {
	grid-column: head;
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding-inline-start: calc(var(--bui-lanes-depth, 0) * var(--bui-lanes-indent));
}
.bui-lanes-mark {
	flex: none;
	justify-content: center;
	width: var(--bui-lanes-mark);
}
/* Still: the shape says the state, the time says it lives (LOAD-01, D95) */
.bui-lanes-lane .bui-lanes-mark .bui-status-dot {
	animation: none;
}
.bui-lanes-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-weight: var(--weight-medium);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bui-lanes-kind {
	grid-column: kind;
	color: var(--color-text-muted);
}
.bui-lanes-now {
	grid-column: now;
	color: var(--color-text-muted);
}
.bui-lanes-time {
	grid-column: time;
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.bui-lanes-facts {
	grid-column: facts;
	display: flex;
	justify-content: flex-end;
	gap: var(--space-3);
	font-variant-numeric: tabular-nums;
}
/* The trace: a track the width of the axis and the lane's bar on it, placed by custom properties in
   milliseconds (`--bui-lanes-from`, `--bui-lanes-to` against the block's `--bui-lanes-span`) */
.bui-lanes-trace {
	grid-row: 1;
	grid-column: trace;
	position: relative;
	height: 1lh;
}
.bui-lanes-trace::before,
.bui-lanes-bar {
	position: absolute;
	top: calc(50% - 2px);
	height: 4px;
	border-radius: 2px;
}
.bui-lanes-trace::before {
	content: '';
	inset-inline: 0;
	background: var(--color-border);
}
/* No trace column: no trace cell, which would otherwise take a column of its own */
.bui-lanes:not([data-trace]) .bui-lanes-trace {
	display: none;
}
.bui-lanes-bar {
	inset-inline-start: min(calc(100% - 4px), calc(var(--bui-lanes-from, 0) / var(--bui-lanes-span) * 100%));
	width: max(4px, calc((var(--bui-lanes-to, 0) - var(--bui-lanes-from, 0)) / var(--bui-lanes-span) * 100%));
	max-width: 100%;
	background: var(--color-text-muted);
}
.bui-lanes-lane[data-tone='progress'] .bui-lanes-bar {
	background: var(--color-info);
}
.bui-lanes-lane[data-tone='attention'] .bui-lanes-bar {
	background: var(--color-warning);
}
.bui-lanes-lane[data-tone='success'] .bui-lanes-bar {
	background: var(--color-success);
}
.bui-lanes-lane[data-tone='failure'] .bui-lanes-bar {
	background: var(--color-danger);
}
.bui-lanes-lane[data-tone='unknown'] .bui-lanes-bar {
	background: var(--color-border-strong);
}
/* The tree connector: ├ or └ from the parent's mark to the lane's own, and │ where a shallower level
   continues past the lane to a later sibling. Decoration only, under the lane's words. */
.bui-lanes-lane[data-branch]::before,
.bui-lanes-lane[data-through]::after {
	content: '';
	position: absolute;
	inset-block: 0;
	pointer-events: none;
}
.bui-lanes-lane[data-branch]::before {
	inset-inline-start: calc(var(--bui-lanes-pad) + (var(--bui-lanes-depth, 1) - 1) * var(--bui-lanes-indent) + var(--bui-lanes-mark) / 2);
	width: calc(var(--bui-lanes-indent) - var(--bui-lanes-mark) / 2 - 2px);
	background:
		var(--bui-lanes-guide) no-repeat left 0 top 0 / 1px var(--bui-lanes-reach),
		var(--bui-lanes-guide) no-repeat left 0 top var(--bui-lanes-line) / 100% 1px;
}
.bui-lanes-lane[data-branch='middle']::before {
	--bui-lanes-reach: 100%;
}
.bui-lanes-lane[data-through]::after {
	inset-inline-start: calc(var(--bui-lanes-pad) + var(--bui-lanes-mark) / 2);
	width: calc(var(--bui-lanes-indent) + 1px);
}
.bui-lanes-lane[data-through='1']::after {
	background: var(--bui-lanes-guide) no-repeat left 0 top 0 / 1px 100%;
}
.bui-lanes-lane[data-through='2']::after {
	background: var(--bui-lanes-guide) no-repeat right 0 top 0 / 1px 100%;
}
.bui-lanes-lane[data-through='1 2']::after {
	background:
		var(--bui-lanes-guide) no-repeat left 0 top 0 / 1px 100%,
		var(--bui-lanes-guide) no-repeat right 0 top 0 / 1px 100%;
}
.bui-lanes-lane[data-branch]:dir(rtl)::before {
	background:
		var(--bui-lanes-guide) no-repeat right 0 top 0 / 1px var(--bui-lanes-reach),
		var(--bui-lanes-guide) no-repeat right 0 top var(--bui-lanes-line) / 100% 1px;
}
.bui-lanes-lane[data-through='1']:dir(rtl)::after {
	background: var(--bui-lanes-guide) no-repeat right 0 top 0 / 1px 100%;
}
.bui-lanes-lane[data-through='2']:dir(rtl)::after {
	background: var(--bui-lanes-guide) no-repeat left 0 top 0 / 1px 100%;
}
/* A title's room first (0.41.0): before a title is cut, the block folds its trace, then its kind (`LaneRoom`
   sets `data-fold`). A folded column takes no track; a folded kind stays in the lane's name, hidden from sight
   only, and its tooltip says it. */
.bui-lanes[data-fold~='trace'] {
	--bui-lanes-trace: initial;
}
.bui-lanes[data-fold~='trace'] .bui-lanes-trace {
	display: none;
}
.bui-lanes[data-fold~='kind'] {
	--bui-lanes-kind: initial;
}
.bui-lanes[data-fold~='kind'] .bui-lanes-kind {
	position: absolute;
	grid-column: auto;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* The last fold (0.44.0): with the trace and the kind folded and a title still cut, the live line gives the
   title three quarters of the room they share; the live line is cut first, and says itself whole in the
   lane's sheet. */
.bui-lanes[data-fold~='now'] {
	--bui-lanes-head-share: 9fr;
	--bui-lanes-now-share: 3fr;
}
/* Narrow: two lines a lane, the title and the time, then the live line under the title and the facts */
@container bui-lanes (width < 40rem) {
	.bui-lanes-list {
		grid-template-columns: [head now] minmax(0, 1fr) [time facts] minmax(5rem, max-content);
	}
	.bui-lanes-lane {
		--bui-lanes-line: calc(var(--space-1) + 0.5lh - 0.5px);
		--bui-lanes-reach: calc(var(--space-1) + 0.5lh + 0.5px);
		grid-template-rows: repeat(2, minmax(1lh, auto));
	}
	.bui-lanes-kind,
	.bui-lanes-trace {
		display: none;
	}
	.bui-lanes-now,
	.bui-lanes-facts {
		grid-row: 2;
	}
	.bui-lanes-now {
		padding-inline-start: calc(var(--bui-lanes-depth, 0) * var(--bui-lanes-indent) + var(--bui-lanes-mark) + var(--space-2));
	}
}

/* A thread's index of its turns (TurnIndex, 0.29.0, D182): one mark per turn in the thread's gutter, beside
   the turns, halfway down the window while the thread scrolls; shown from two turns and from a 1024 px
   region. The holder takes no room in the thread's column; the list hangs in the gutter before it.
   Tokens only. */
.bui-turns {
	--bui-turns-pitch: 12px;
	--bui-turns-width: 1.875rem;
	position: sticky;
	inset-block-start: 50%;
	z-index: 1;
	height: 0;
	/* No room of its own between the thread's blocks */
	margin-block-end: calc(-1 * var(--bui-page-gap, 0px));
}
/* In React the index's host is no box of its own: the index stays sticky in the thread's column */
.bui-host:has(> .bui-turns) {
	display: contents;
}
.bui-turns-list {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(-1 * (var(--bui-turns-width) + var(--space-2) + var(--space-1)));
	display: grid;
	grid-auto-rows: var(--bui-turns-pitch);
	width: var(--bui-turns-width);
	max-height: 60dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	translate: 0 -50%;
}
.bui-turns-row {
	display: flex;
	min-height: 0;
}
/* A mark is the whole row, so the pointer never falls between two turns. Its dash stands at the row's end,
   beside the turns it indexes, and grows away from them into the gutter; a state's shape comes before it. */
.bui-turns-mark {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--space-1);
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.bui-turns-mark:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -1px;
	animation: none;
}
/* The dash: 8 px at rest, 14 px for the turn being read, longer under the pointer and its neighbours */
.bui-turns-dash {
	flex: none;
	width: 0.5rem;
	height: 2px;
	border-radius: 1px;
	background: var(--color-border-strong);
	transition: width var(--motion-quick) var(--motion-ease), background-color var(--motion-quick) var(--motion-ease);
}
.bui-turns-mark[aria-current='true'] .bui-turns-dash {
	width: 0.875rem;
	background: var(--color-text);
}
.bui-turns-mark[data-near='2'] .bui-turns-dash {
	width: 0.625rem;
}
.bui-turns-mark[data-near='1'] .bui-turns-dash {
	width: 0.75rem;
	background: var(--color-text-muted);
}
.bui-turns-mark[data-near='0'] .bui-turns-dash,
.bui-turns-mark:focus-visible .bui-turns-dash {
	width: 1.125rem;
	background: var(--color-text);
}
/* A turn that runs, needs the person or failed: its state's Status shape after the dash, still */
.bui-turns-state {
	flex: none;
	gap: 0;
}
.bui-turns-state .bui-status-dot {
	animation: none;
}
/* Below a 1024 px region the index leaves the page; the keys still move between turns */
@container bui-page (max-width: 1023px) {
	.bui-turns {
		display: none;
	}
}

/* The preview: what the turn holds, beside the index at the mark's height, read-only (the pointer stays on
   the index), raised over the page as a menu is. */
.bui-turns-preview {
	box-sizing: border-box;
	display: grid;
	gap: var(--space-1);
	width: max-content;
	max-width: min(22rem, calc(100vw - 2 * var(--space-4)));
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface-raised);
	box-shadow: var(--elevation-menu);
	color: var(--color-text);
	font-size: var(--text-small);
	line-height: var(--leading-small);
	pointer-events: none;
	animation: bui-enter var(--motion-quick) var(--motion-ease);
}
.bui-turns-preview[hidden] {
	display: none;
}
.bui-turns-preview > p {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}
.bui-turns-preview-title,
.bui-turns-preview-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.bui-turns-preview-title {
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body);
}
.bui-turns-preview-summary,
.bui-turns-preview-facts,
.bui-turns-preview-keys {
	color: var(--color-text-muted);
}
.bui-turns-preview-facts {
	font-variant-numeric: tabular-nums;
}
.bui-turns-preview-facts .bui-status {
	display: inline-flex;
	color: var(--color-text);
}
.bui-turns-preview-keys {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-1);
	padding-block-start: var(--space-2);
	border-block-start: 1px solid var(--color-border);
	font-size: var(--text-label);
}
.bui-turns-preview-keys kbd {
	padding: 0 var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	font-family: var(--font-mono);
	font-size: var(--text-label);
}
/* Key hints are not offered where there is no keyboard to press them on */
@media (hover: none) and (pointer: coarse) {
	.bui-turns-preview-keys {
		display: none;
	}
}

/* A change (Diff, 0.11.2): the summary line, the files to jump to, and files as flat bordered regions
   (no elevation, D10), each with its header and its body; the lines are in diff-lines.css. Tokens only;
   nothing moves under reduced motion. */
.bui-diff {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
	color: var(--color-text);
}
.bui-diff-top {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}
.bui-diff-top:empty {
	display: none;
}
.bui-diff-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
	min-width: 0;
}
.bui-diff-total {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-diff-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-inline-start: auto;
}
.bui-diff-count {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bui-diff-plus {
	color: var(--color-success);
}
.bui-diff-minus {
	color: var(--color-danger);
}
.bui-diff-note,
.bui-diff-large {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-diff-top > .bui-diff-note {
	padding: 0;
}
.bui-diff-large {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Show stands twice its hang after the line it opens (D188) */
	gap: var(--space-1) calc(2 * var(--bui-quiet-hang));
}

/* The files to jump to: one row per file, its path whole. */
.bui-diff-jump-list {
	display: grid;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	list-style: none;
}
.bui-diff-jump-list > li + li {
	border-top: 1px solid var(--color-border);
}
.bui-diff-jump-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: var(--bui-target);
	padding: var(--space-1) var(--space-3);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	text-align: start;
	cursor: pointer;
}
.bui-diff-jump-item:hover {
	background: var(--color-surface-sunken);
}
.bui-diff-jump-item:focus-visible {
	outline-offset: -2px;
	animation: none;
}

/* One file: its header (a heading holding the disclosure button, and Copy path) and its body. */
.bui-diff-files {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}
.bui-diff-file {
	min-width: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface);
}
.bui-diff-body > :last-child {
	border-radius: 0 0 var(--radius-base) var(--radius-base);
}
.bui-diff-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-1) var(--space-2);
}
.bui-diff-file[data-open] > .bui-diff-head {
	border-bottom: 1px solid var(--color-border);
}
.bui-diff-heading {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: inherit;
}
.bui-diff-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: var(--bui-target);
	padding: var(--space-1);
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
	text-align: start;
	cursor: pointer;
}
.bui-diff-toggle:hover {
	background: var(--color-surface-sunken);
}
.bui-diff-toggle:focus-visible {
	outline-offset: -2px;
	animation: none;
}
.bui-diff-chevron {
	display: inline-grid;
	place-items: center;
	flex: none;
	align-self: flex-start;
	width: 16px;
	height: 1lh;
	color: var(--color-text-muted);
}
.bui-diff-chevron .bui-icon {
	width: 16px;
	height: 16px;
	transform: rotate(-90deg);
	transition: transform var(--motion-quick) var(--motion-ease);
}
.bui-diff-toggle[aria-expanded='true'] .bui-diff-chevron .bui-icon {
	transform: none;
}
/* A path is never cut: it wraps anywhere, the directory muted and the name in medium weight. */
.bui-diff-path {
	flex: 1 1 12rem;
	min-width: 0;
	font-family: var(--font-mono);
	overflow-wrap: anywhere;
}
.bui-diff-dir,
.bui-diff-arrow {
	color: var(--color-text-muted);
}
.bui-diff-name {
	font-weight: var(--weight-medium);
}
.bui-diff-status {
	color: var(--color-text-muted);
	white-space: nowrap;
}
.bui-diff-head > .bui-copy-button {
	flex: none;
	align-self: center;
}
/* A control of the head's own row keeps its padding: the head's 8 px padding leaves its surface no room (D188) */
.bui-diff-head > .bui-copy-button .bui-button-quiet {
	margin-inline: 0;
}
.bui-diff-body {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bui-diff-chevron .bui-icon {
		transition: none;
	}
}

/* A change's lines (Diff, 0.11.2), in a unified view: additions and deletions differ by their sign and
   their row's background; numbers and signs are generated and never selected, so a selection of the code
   copies only code. Long lines scroll inside their file's box, never the page, with the numbers and signs
   kept in view. Tokens only. */
.bui-diff-lines {
	overflow-x: auto;
	min-width: 0;
	background: var(--color-surface);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
.bui-diff-rows {
	display: grid;
	width: max-content;
	min-width: 100%;
}
.bui-diff-line,
.bui-diff-hunk,
.bui-diff-gap,
.bui-diff-more {
	--bui-diff-row: var(--color-surface);
	display: flex;
	background: var(--bui-diff-row);
}
.bui-diff-line[data-kind='add'] {
	--bui-diff-row: var(--color-success-surface);
}
.bui-diff-line[data-kind='delete'] {
	--bui-diff-row: var(--color-danger-surface);
}
.bui-diff-hunk,
.bui-diff-gap,
.bui-diff-more {
	--bui-diff-row: var(--color-surface-sunken);
	color: var(--color-text-muted);
}
/* The hunk `]` and `[` reach is the cursor (D187): ringed inside, at once, though it is no Tab stop */
.bui-diff-lines .bui-diff-hunk:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	animation: none;
}
.bui-diff-gutter {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	flex: none;
	border-inline-end: 1px solid var(--color-border);
	background: var(--bui-diff-row);
	user-select: none;
	-webkit-user-select: none;
}
.bui-diff-num {
	box-sizing: content-box;
	width: calc(var(--bui-diff-digits, 3) * 1ch);
	padding: 0 var(--space-2);
	color: var(--color-text-muted);
	text-align: end;
}
.bui-diff-num::before {
	content: attr(data-number);
}
.bui-diff-sign {
	width: 1ch;
	padding: 0 var(--space-1);
	text-align: center;
}
.bui-diff-sign::before {
	content: attr(data-sign);
}
.bui-diff-line[data-kind='add'] .bui-diff-sign {
	color: var(--color-success);
}
.bui-diff-line[data-kind='delete'] .bui-diff-sign {
	color: var(--color-danger);
}
.bui-diff-code {
	flex: 1 0 auto;
	padding: 0 var(--space-3) 0 var(--space-2);
	white-space: pre;
	tab-size: 4;
}
.bui-diff-said {
	user-select: none;
	-webkit-user-select: none;
}
.bui-diff-line[data-kind='note'] .bui-diff-code {
	color: var(--color-text-muted);
	font-family: var(--font-sans);
}
/* Hunk headers, gaps and folded runs keep their words in view while the lines scroll sideways. */
.bui-diff-aside {
	position: sticky;
	inset-inline-start: 0;
	padding: var(--space-1) var(--space-3);
	white-space: pre;
}
.bui-diff-gap .bui-diff-aside,
.bui-diff-more .bui-diff-aside {
	font-family: var(--font-sans);
	white-space: normal;
}
.bui-diff-reveal {
	min-height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-link);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Highlighted code (Highlighter, 0.14.0): the six kinds of token a highlighter draws as spans inside a
   code block, a Diff line or an activity section, each in its --color-code-* role. Every role holds 4.5:1
   on canvas, surface, surface-sunken, success-surface and danger-surface in both themes, so a colored
   token reads on an added or a removed line too. Only the color changes: weight, style and size are the
   code's own. Under forced colors the system's text color replaces them. Tokens only. */
.bui-code-comment {
	color: var(--color-code-comment);
}
.bui-code-keyword {
	color: var(--color-code-keyword);
}
.bui-code-string {
	color: var(--color-code-string);
}
.bui-code-number {
	color: var(--color-code-number);
}
.bui-code-name {
	color: var(--color-code-name);
}
.bui-code-tag {
	color: var(--color-code-tag);
}

/* A quiet line of secondary actions (ActionLine, 0.14.0, D102): one control style, muted until hover or
   focus; the facts a muted group of their own in tabular figures; a path as code, underlined only on
   hover. Tokens only. */
.bui-action-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-4);
	min-width: 0;
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-small);
}
/* The line hangs its actions' padding on every row it wraps to, so each row's first words sit on the edge
   (D188); its actions keep their padding between them, so they never hang a second time. */
.bui-action-line-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	margin-inline-start: calc(-1 * var(--bui-quiet-hang));
}
.bui-action-line-actions :is(.bui-button, a, .bui-link-button, .bui-disclosure-button) {
	min-height: var(--bui-target);
	margin-inline: 0;
	padding: 0 var(--bui-quiet-hang);
	border-color: transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	text-decoration: none;
}
/* A bordered action's words keep the line's edge: its 1px border is part of the hang */
.bui-action-line-actions :is(.bui-button, .bui-disclosure-button):not(.bui-button-bare) {
	padding-inline: calc(var(--bui-quiet-hang) - 1px);
}
.bui-action-line-actions :is(.bui-button, a, .bui-link-button, .bui-disclosure-button):not(:disabled, [aria-disabled='true']):is(:hover, :focus-visible, [aria-expanded='true']) {
	background: var(--overlay-lift);
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bui-action-line-actions :is(.bui-button, a, .bui-link-button, .bui-disclosure-button):not(:disabled, [aria-disabled='true']):active {
	background: var(--color-surface-sunken);
}
.bui-action-line-actions :is(:disabled, [aria-disabled='true']) {
	background: transparent;
	color: var(--color-text-muted);
	text-decoration: none;
}
.bui-action-line-actions a {
	display: inline-flex;
	align-items: center;
}
/* A glyph alone in the line (0.26.0, D165): one round target, its glyph where the line's words start. */
.bui-action-line-actions .bui-button-bare {
	width: var(--bui-target);
	padding: 0;
	border-radius: var(--radius-round);
}
.bui-action-line-actions .bui-button-bare .bui-icon {
	width: 16px;
	height: 16px;
}
.bui-action-line-facts {
	margin: 0;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.bui-action-line-facts[hidden],
.bui-action-line-actions[hidden] {
	display: none;
}
/* A path is code: monospaced, in the text's color, underlined only on hover. */
.bui-path {
	font-family: var(--font-mono);
	font-size: 0.95em;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.bui-path:hover,
a:hover > .bui-path {
	text-decoration: underline;
}

/*
 * Text keeps a readable measure wherever it sits (LR-02): no line past about 80 characters. Every part
 * that holds a product's sentences takes it, a hint, a reason, a description or a note alike, so a
 * product's own words stop there in a fluid page, a form or a list (0.7.8), a checklist's step included (0.42.0);
 * `.bui-reading` gives a product's own paragraph the same measure. Last in the cascade: a cap never widens anything.
 */
.bui-reading,
.bui-page-lead,
.bui-callout-text,
.bui-empty-body,
.bui-checklist-detail,
.bui-checklist-reason,
.bui-section-description,
.bui-field-hint,
.bui-option-description,
.bui-option-reason,
.bui-choice-note,
.bui-choice-detail,
.bui-unavailable-reason,
.bui-unavailable-body,
.bui-picker-status,
.bui-notice-text,
.bui-notice-summary,
.bui-copy-text,
.bui-awaited-why,
.bui-awaited-reason,
.bui-awaited-note,
.bui-step-reason,
.bui-line-note,
.bui-consequence,
.bui-question-message,
.bui-dialog-description,
.bui-preferences-note,
.bui-secret-summary,
.bui-disclosure-help,
.bui-toast-text,
.bui-toast-detail,
.bui-chip-reason,
.bui-menu-reason,
.bui-composer-status,
.bui-composer-reason,
.bui-composer-problem,
.bui-live-body[data-plain],
.bui-live-note,
.bui-activity-whole,
.bui-activity-note,
.bui-facts-summary,
.bui-facts-note,
.bui-meter-note,
.bui-composer-suggest-line {
	max-width: var(--layout-measure);
}

/* A statement keeps its hint on a line of its own (`flex-basis: 100%`), so the measure caps the statement whole */
.bui-statement {
	max-width: min(100%, var(--layout-measure));
}

/* Motion follows the person's action and never moves what they read (0.14.0, D95). Only what the person
   opens or closes, and what overlaps, animates, with a symmetric entry and exit: surfaces with transform
   and opacity only, an inline disclosure's height as a progressive enhancement (no script measures it).
   Live content never moves. Under reduced motion nothing here moves (base.css): state changes still say
   themselves in words. Tokens only. */

/* A page's panel kept in view: it enters from its edge and leaves toward it, the columns changing once. */
.bui-page-panel[data-motion='in'] {
	animation: bui-panel-in var(--motion-standard) var(--motion-ease);
}
.bui-page-panel[data-motion='out'] {
	animation: bui-panel-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
@keyframes bui-panel-in {
	from {
		opacity: 0;
		transform: translateX(var(--space-6));
	}
}
@keyframes bui-panel-out {
	to {
		opacity: 0;
		transform: translateX(var(--space-6));
	}
}

/* The picture of what just closed (`Leaving`): inert, hidden from assistive technology, it eases out where
   it was and is removed. Menus fade and settle toward their button; a side sheet slides back to its edge
   over a scrim that fades. */
.bui-leaving {
	pointer-events: none;
}
.bui-menu.bui-leaving {
	animation: bui-leave var(--motion-exit) var(--motion-ease-exit) forwards;
}
.bui-sheet.bui-leaving {
	position: fixed;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	animation: bui-sheet-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
.bui-sheet.bui-leaving:dir(rtl) {
	inset-inline: 0 auto;
	animation-name: bui-sheet-out-rtl;
}
.bui-sheet-veil {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--overlay-scrim);
	animation: bui-veil-out var(--motion-exit) var(--motion-ease-exit) forwards;
}
@keyframes bui-sheet-out {
	to {
		transform: translateX(100%);
	}
}
@keyframes bui-sheet-out-rtl {
	to {
		transform: translateX(-100%);
	}
}
@keyframes bui-veil-out {
	to {
		opacity: 0;
	}
}

/* Inline disclosures ease their height where the engine interpolates to an automatic size; elsewhere they
   only fade. Their content keeps its place: nothing is scrolled for the person. */
.bui-activity-body,
.bui-activity-list {
	interpolate-size: allow-keywords;
	overflow: clip;
	transition:
		height var(--motion-standard) var(--motion-ease),
		opacity var(--motion-standard) var(--motion-ease),
		display var(--motion-standard) allow-discrete;
}
.bui-activity-body[hidden],
.bui-activity-list[hidden] {
	height: 0;
	opacity: 0;
	transition:
		height var(--motion-exit) var(--motion-ease-exit),
		opacity var(--motion-exit) var(--motion-ease-exit),
		display var(--motion-exit) allow-discrete;
}
@starting-style {
	.bui-activity-body:not([hidden]),
	.bui-activity-list:not([hidden]) {
		height: 0;
		opacity: 0;
	}
}
/* The family's disclosure (`bui-summary`) eases its content's height where `::details-content` exists. */
@supports selector(::details-content) {
	details:has(> .bui-summary) {
		interpolate-size: allow-keywords;
	}
	details:has(> .bui-summary)::details-content {
		height: 0;
		overflow: clip;
		overflow-clip-margin: var(--space-1);
		opacity: 0;
		transition:
			height var(--motion-exit) var(--motion-ease-exit),
			opacity var(--motion-exit) var(--motion-ease-exit),
			content-visibility var(--motion-exit) allow-discrete;
	}
	details[open]:has(> .bui-summary)::details-content {
		height: auto;
		opacity: 1;
		transition:
			height var(--motion-standard) var(--motion-ease),
			opacity var(--motion-standard) var(--motion-ease),
			content-visibility var(--motion-standard) allow-discrete;
	}
}
@media (prefers-reduced-motion: reduce) {
	details:has(> .bui-summary)::details-content {
		transition: none !important;
	}
}

/* Links, identifiers and raised surfaces (token set 0.6.0, decision C2). Late in the cascade, so a
   component's own decoration shorthand does not undo them.

   Links take the text's color (`--color-link` is the text's since 0.6.0): coral is kept for the primary
   action, the selection and focus. A standalone link (a crumb, a way back, a list's object, a row's
   name) is underlined on hover; a link inside a sentence, and a link-styled button, keeps a quiet
   underline at rest so it is told from its sentence without color (WCAG 1.4.1), full on hover. */
:is(.bui-crumbs a, .bui-arrival-back, .bui-listdetail-link, .bui-sidebar-more, .bui-row-link, .bui-navmenu-action) {
	text-decoration: none;
}
:is(.bui-crumbs a, .bui-arrival-back, .bui-listdetail-link, .bui-sidebar-more, .bui-row-link, .bui-navmenu-action):hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* A link among the package's words takes the text's colour on any page, with or without a base link rule, visited
   or not (0.41.0). A product's links passed into these parts keep their own class's colour: the rule weighs no
   more than a base `a` rule. The Preferences dialog's own link, which no product styles, holds over a base rule. */
:where(.bui-reading, .bui-callout-text, .bui-unavailable-reason, .bui-page-lead) a,
.bui-preferences-note a {
	color: var(--color-link);
}
:is(.bui-link-button, .bui-composer-status a, .bui-navmenu-notice a, .bui-reading a, .bui-callout-text a, .bui-unavailable-reason a, .bui-preferences-note a, .bui-page-lead a) {
	text-decoration-line: underline;
	text-decoration-color: var(--color-border-strong);
	text-underline-offset: 2px;
}
:is(.bui-link-button, .bui-composer-status a, .bui-navmenu-notice a, .bui-reading a, .bui-callout-text a, .bui-unavailable-reason a, .bui-preferences-note a, .bui-page-lead a):hover {
	text-decoration-color: currentColor;
}

/* Identifiers, paths, hashes and versions in the monospace face, a little smaller to sit on the line. */
.bui-mono,
[data-mono] {
	font-family: var(--font-mono);
	font-size: 0.95em;
	font-variant-ligatures: none;
}

/* A card or panel raised inside a page (amends D10): its own surface, a border and a hairline shadow.
   Sections stay flat; `Section` takes `raised` for a panel that is an object of its own. */
.bui-raised,
.bui-section[data-raised],
.bui-waiting[data-frame] {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--color-surface-raised);
	box-shadow: var(--elevation-raised);
}
.bui-command,
.bui-checklist {
	box-shadow: var(--elevation-raised);
}

/* One inset (D184): a box's content keeps one inset on every side, measured optically: from the border to the
   first line's capitals, to the controls' edges and to the text's start, its controls starting on the text's
   edge. Each box names its inset (`--bui-<box>-inset`, a step of the spacing scale, its earlier side padding).
   - Where the box's own text starts or ends it, the padding takes off the half-leading its line keeps above
     the capitals and below the baseline, `calc(inset - (1lh - 1cap) / 2)`, as the composer's does.
   - Where a heading or a label in another size, or code in its own face, starts or ends it, that line trims
     itself to its capitals and baseline (`text-box`), which holds in any font and in Chrome's whole-pixel
     baseline (the formula is 1.3 px off there for a 19 px title-2).
   - Where a row of controls starts or ends it, the padding is the inset itself; folded Technical details hang
     their summary's target below its words.
   Without these units a box keeps its earlier padding. The page's boxes here; the surfaces that float over it
   in insets-floating.css. Late in the cascade, so they hold over each component's own padding. Tokens only. */
.bui-callout {
	--bui-callout-inset: var(--space-4);
}
.bui-unavailable {
	--bui-unavailable-inset: var(--space-6);
}
.bui-recovery {
	--bui-recovery-inset: var(--space-4);
}
.bui-recovery[data-recovery='page'] {
	--bui-recovery-inset: var(--space-6);
}
.bui-empty:not(.bui-empty-unframed) {
	--bui-empty-inset: var(--space-4);
}
.bui-command {
	--bui-command-inset: var(--space-4);
}
.bui-awaited {
	--bui-awaited-inset: var(--space-4);
}
.bui-card-choice {
	--bui-card-inset: var(--space-3);
}
.bui-checklist {
	--bui-checklist-inset: var(--space-4);
}
.bui-raised,
.bui-section[data-raised] {
	--bui-raised-inset: var(--space-4);
}
.bui-page-aside[data-raised] {
	--bui-panel-inset: var(--space-5);
}
.bui-consequence,
.bui-details-body,
.bui-help-panel,
.bui-copy-text,
.bui-textarea {
	--bui-text-inset: var(--space-3);
}
.bui-command-code,
.bui-activity-code,
.bui-activity-tail {
	--bui-code-inset: var(--space-3);
}
@media (max-width: 480px) {
	.bui-unavailable,
	.bui-recovery[data-recovery='page'] {
		--bui-unavailable-inset: var(--space-4);
		--bui-recovery-inset: var(--space-4);
	}
}

/* A select's chevron and a choice's chevron end one inset from the border, as their words start one in */
.bui-select {
	--bui-select-inset: var(--space-3);
}
.bui-select > .bui-icon {
	right: calc(var(--bui-select-inset) + 1px);
}
.bui-choice-button {
	--bui-choice-inset: var(--space-3);
	padding-inline: var(--bui-choice-inset);
}
.bui-card-radio {
	inset: var(--bui-card-inset) var(--bui-card-inset) auto auto;
}
/* A request stretched by its row keeps its parts at the top, its code block its own height */
.bui-command {
	align-content: start;
}

@supports (padding-top: calc(1lh - 1cap)) {
	/* A callout's title and last words one inset from its border; its actions' edges too */
	.bui-callout {
		padding-block: calc(var(--bui-callout-inset) - (1lh - 1cap) / 2);
	}
	.bui-callout:has(> .bui-callout-body > :last-child:is(.bui-callout-actions, .bui-details), > .bui-callout-body > .bui-host:last-child > .bui-details) {
		padding-block-end: var(--bui-callout-inset);
	}
	/* Boxes of their own text: help, a message to copy, a textarea, technical details above their Copy */
	:is(.bui-help-panel, .bui-copy-text, .bui-textarea, .bui-details-body) {
		padding-block: calc(var(--bui-text-inset) - (1lh - 1cap) / 2);
	}
	.bui-details-body {
		padding-block-end: var(--bui-text-inset);
	}
	/* Technical details' own words lead them in a monospace that scrolls (a scroller trims nothing in Firefox):
	   the words take off their own half-leading */
	.bui-details-body:has(> .bui-details-content > .bui-details-text:first-child) {
		padding-block-start: var(--bui-text-inset);
	}
	.bui-details-content > .bui-details-text:first-child {
		margin-block-start: calc((1cap - 1lh) / 2);
	}
	/* An empty state: its mark above and its action or steps below keep the inset; its words, when they end it, too */
	.bui-empty:not(.bui-empty-unframed) {
		padding-block: var(--bui-empty-inset);
	}
	.bui-empty:not(.bui-empty-unframed, :has(> .bui-empty-actions, > .bui-checklist)) {
		padding-block-end: calc(var(--bui-empty-inset) - (1lh - 1cap) / 2);
	}
	/* The recovery line: Try again's edges at the inset, the words centred on it; where Try again goes under
	   the words (a narrow region), the title's capitals at the inset and the mark centred on them */
	.bui-recovery:not([data-recovery='page']) {
		padding-block: var(--bui-recovery-inset);
	}
	/* Beside Try again, words that wrap taller than it keep their capitals at the inset: they take off their
	   half-leading on both sides, which keeps one line centred on Try again, Inter's capitals being mid-line.
	   Their lh and cap are the title's, whatever font the page around them sets (0.35.0) */
	@media (min-width: 481px) {
		.bui-recovery:not([data-recovery='page']) > .bui-recovery-words {
			margin-block: calc((1cap - 1lh) / 2);
			font-size: var(--text-body);
			line-height: var(--leading-body);
		}
		/* Offline the line has no Try again (0.33.0): its words set it, the mark centred on their capitals
		   without growing it (0.35.0) */
		.bui-recovery[data-offline]:not([data-recovery='page']) > .bui-recovery-mark {
			margin-block: calc((1cap - 18px) / 2);
			font-size: var(--text-body);
		}
	}
	@media (max-width: 480px) {
		.bui-recovery:not([data-recovery='page']) .bui-recovery-title {
			margin-block-start: calc((1cap - 1lh) / 2);
		}
		.bui-recovery:not([data-recovery='page']) > .bui-recovery-mark {
			margin-top: calc((1cap - 18px) / 2);
			font-size: var(--text-body);
		}
		/* Offline with no Technical details its words end the line (0.44.0): the last-tried line, in its own size,
		   takes off what its line keeps below its baseline, as the title does above its capitals */
		.bui-recovery[data-offline]:not([data-recovery='page'], :has(> .bui-details)) .bui-again:last-child {
			margin-block-end: calc((1cap - 1lh) / 2);
		}
	}
	.bui-recovery[data-recovery='page'][data-offline]:not(:has(> .bui-details)) .bui-again:last-child {
		margin-block-end: calc((1cap - 1lh) / 2);
	}
	/* The awaited card: its head on the title's line, the title's capitals at the inset; its steps' marks,
	   its bar or its actions end it at their edges */
	.bui-awaited {
		padding-block: var(--bui-awaited-inset);
	}
	.bui-awaited-head {
		margin-block-start: calc((1cap - 1lh) / 2);
		font-size: var(--text-body);
		line-height: var(--leading-body);
	}
	.bui-awaited-head > .bui-awaited-time {
		line-height: calc(var(--text-body) * var(--leading-body));
	}
	/* A checklist: its title's capitals at the inset, on the steps' edge (a current step draws its surface
	   there); its last step ends it by its own content */
	.bui-checklist-head:has(> .bui-checklist-title) {
		margin-block-start: calc((1cap - 1lh) / 2);
		font-size: var(--text-title-3);
	}
	/* A choice card: the head's title and the radio at the inset, the last line one inset from the border */
	.bui-card-choice {
		padding-block: var(--bui-card-inset) calc(var(--bui-card-inset) - (1lh - 1cap) / 2);
	}
	/* A command the person may correct (an editable CommandCard's textarea, which trims nothing): its first
	   line's capitals one inset from its top, in the code's face (0.35.0) */
	.bui-command-edit {
		padding-block-start: calc(var(--bui-code-inset) - (1lh - 1cap) / 2);
	}
	.bui-card-head {
		margin-block-start: calc((1cap - 1lh) / 2);
		font-size: var(--text-body);
	}
}

@supports (text-box: trim-start cap alphabetic) {
	/* Code in its own face, trimmed to its capitals and baseline: the inset holds in any monospace. A `code`
	   inside is the box's one line, so it is the line that trims; inside one activity exchange the code is the
	   exchange's row, not a box */
	:is(.bui-command-code, .bui-activity-code, .bui-activity-tail):not(textarea, .bui-activity-exchange *),
	.bui-copy-text.bui-copy-command {
		padding-block: var(--bui-code-inset, var(--bui-text-inset));
	}
	:is(.bui-command-code, .bui-activity-code, .bui-activity-tail, .bui-copy-text.bui-copy-command):not(textarea, .bui-activity-exchange *, :has(> code)) {
		text-box: trim-both cap alphabetic;
	}
	:is(.bui-command-code, .bui-activity-code, .bui-copy-command):not(.bui-activity-exchange *) > code {
		display: block;
		text-box: trim-both cap alphabetic;
	}
	/* A heading leads its box: its capitals one inset from the border, its mark centred on its capitals */
	:is(.bui-unavailable-title, .bui-recovery[data-recovery='page'] .bui-recovery-title, .bui-command-title, .bui-section[data-raised] > .bui-section-head .bui-section-title, .bui-page-aside[data-raised] .bui-section-title) {
		text-box: trim-start cap alphabetic;
	}
	.bui-unavailable {
		padding-block: var(--bui-unavailable-inset);
	}
	.bui-recovery[data-recovery='page'] {
		padding-block: var(--bui-recovery-inset);
	}
	:is(.bui-unavailable-icon, .bui-recovery[data-recovery='page'] .bui-recovery-mark) {
		margin-block-start: calc((1cap - var(--space-6)) / 2);
		margin-inline-start: calc((20px - var(--space-6)) / 2);
		font-size: var(--text-title-2);
	}
	.bui-command {
		padding-block: var(--bui-command-inset);
	}
	:is(.bui-raised, .bui-section[data-raised]) {
		padding-block: var(--bui-raised-inset);
	}
	.bui-page-aside[data-raised] {
		padding-block: var(--bui-panel-inset);
	}
	/* Words that end a box end at its inset: a notice's, a section's last paragraph, an answered request's line */
	:is(.bui-unavailable-body > p:last-child:not(.bui-unavailable-code), .bui-section[data-raised] > .bui-section-body > p:last-child, .bui-command-line) {
		text-box: trim-end cap alphabetic;
	}
	/* The consequence of a confirmation: its first label's capitals and its last words at the inset */
	.bui-consequence {
		padding-block: var(--bui-text-inset);
	}
	.bui-consequence > :first-child > dt {
		text-box: trim-start cap alphabetic;
	}
	.bui-consequence > :last-child > dd {
		text-box: trim-end cap alphabetic;
	}
}

/* A single-line control keeps its words one inset from every side (0.35.0): at compact density (30 px) and on a
   touch screen (44 px) its sides take the room its height leaves above its capitals, as the comfortable 36 px
   control's 12 px are, and a select's or a choice's chevron ends on it. Without `cap` they keep 12 px. */
@supports (padding-top: calc(1cap)) {
	:root[data-density='compact'] :is(input.bui-input, .bui-select, .bui-choice-button) {
		--bui-line-inset: calc((var(--bui-control) - 2px - 1cap) / 2);
	}
	@media (pointer: coarse) {
		:is(input.bui-input, .bui-select, .bui-choice-button) {
			--bui-line-inset: calc((var(--bui-control) - 2px - 1cap) / 2);
		}
	}
	/* The fields' and selects' own sides read it in forms.css; the chevron reads it in the control's own face */
	:root[data-density='compact'] .bui-select {
		font-size: var(--text-body);
	}
	@media (pointer: coarse) {
		.bui-select {
			font-size: var(--text-body);
		}
	}
	.bui-select {
		--bui-select-inset: var(--bui-line-inset, var(--space-3));
	}
	.bui-choice-button {
		--bui-choice-inset: var(--bui-line-inset, var(--space-3));
	}
}

/* Technical details folded at a box's end: the summary's words end the box, its target hangs below them; so
   do a quiet action's in the box's last row, which keeps a bordered neighbour's top */
@supports (padding-top: calc(1cap)) {
	:is(.bui-callout-body, .bui-unavailable-body, .bui-empty) > :is(.bui-callout-actions, .bui-unavailable-actions, .bui-empty-actions):last-child > .bui-button-quiet {
		align-self: flex-start;
		margin-block-end: calc((1cap - var(--bui-control)) / 2);
	}
	:is(.bui-callout-body, .bui-unavailable-body, .bui-empty) > :is(.bui-callout-actions, .bui-unavailable-actions, .bui-empty-actions):last-child > .bui-button-quiet.bui-button-small {
		margin-block-end: calc((1cap - max(var(--bui-control) - 6px, var(--bui-target))) / 2);
	}
	:is(.bui-callout-body > .bui-details:last-child, .bui-callout-body > .bui-host:last-child > .bui-details, .bui-unavailable-body > .bui-details:last-child, .bui-recovery > .bui-details):not([open]) > .bui-summary {
		display: flex;
		width: fit-content;
		margin-block-end: calc((1cap - var(--bui-target)) / 2);
	}
}

/* One inset (D184) for the surfaces that float over the page: dialogs, side sheets, toasts, menus, notification
   rows, the preview of a turn and the command palette, by insets.css's rules. A borderless close button is its
   glyph: its target hangs outside it, centred on the title's capitals, its glyph ending one inset from the end.
   The tooltip keeps 8 px on every side already (D184 measured). A part drawn outside its box (a product's own
   markup with a menu's entry or a dialog's head) falls back to the inset its box names. Tokens only. */
.bui-dialog {
	--bui-dialog-inset: var(--space-5);
}
.bui-sheet {
	--bui-sheet-inset: var(--space-5);
}
.bui-toast {
	--bui-toast-inset: var(--space-3);
}
.bui-menu {
	--bui-menu-inset: var(--space-4);
}
.bui-notice {
	--bui-notice-inset: var(--space-2);
}
.bui-turns-preview {
	--bui-preview-inset: var(--space-3);
}
.bui-palette {
	--bui-palette-inset: var(--space-4);
}
/* The close glyph's end on the inset: its target hangs (target − glyph) / 2 past it */
.bui-dialog-head {
	padding-inline-end: calc(var(--bui-dialog-inset, var(--space-5)) - (var(--bui-target) - 18px) / 2);
}
/* A side sheet's actions stand one inset from its bottom and from its divider, their row on its words' edge */
.bui-sheet-actions {
	padding: var(--bui-sheet-inset, var(--space-5));
}
.bui-sheet-head {
	padding-inline-end: calc(var(--bui-sheet-inset, var(--space-5)) - (var(--bui-target) - 18px) / 2);
}

@supports (text-box: trim-start cap alphabetic) {
	/* A dialog's and a side sheet's title: its capitals one inset from the top, the close button centred on them */
	:is(.bui-dialog-title, .bui-sheet-title) {
		padding-top: 0;
		text-box: trim-start cap alphabetic;
	}
	.bui-dialog-head {
		padding-block-start: var(--bui-dialog-inset, var(--space-5));
		font-size: var(--text-title-3);
	}
	.bui-sheet-head {
		padding-block-start: var(--bui-sheet-inset, var(--space-5));
		font-size: var(--text-title-2);
	}
	:is(.bui-dialog-head, .bui-sheet-head) > .bui-icon-button {
		margin-block-start: calc((1cap - var(--bui-target)) / 2);
	}
}

@supports (padding-top: calc(1lh - 1cap)) {
	/* A toast: its words one inset from the border, its mark and its close button centred on the first line
	   without growing the row, the close glyph one inset from the end; a detail ends it at its own baseline */
	.bui-toast {
		padding-block: calc(var(--bui-toast-inset) - (1lh - 1cap) / 2);
		padding-inline-end: calc(var(--bui-toast-inset) - (var(--bui-target) - 18px) / 2);
	}
	.bui-toast:has(.bui-toast-detail) {
		padding-block-end: var(--bui-toast-inset);
	}
	.bui-toast-detail {
		margin-block-end: calc((1cap - 1lh) / 2);
	}
	.bui-toast-text {
		padding-top: 0;
	}
	.bui-toast > .bui-icon {
		margin-top: calc((1lh - 18px) / 2);
	}
	.bui-toast > .bui-icon-button {
		margin-block: calc((1lh - var(--bui-target)) / 2);
	}
	/* A menu's entries keep 12 px from their own edges, so its words keep 16 px from its border */
	.bui-menu-item {
		padding-block: calc(var(--bui-menu-inset, var(--space-4)) - var(--space-1) - (1lh - 1cap) / 2);
	}
	/* On a touch screen an entry is a 44 px target with its words centred in it: the target's height decides a
	   menu's inset, an action menu's or a choice's, which its sides keep (0.35.0) */
	@media (pointer: coarse) {
		.bui-menu .bui-menu-item {
			justify-content: center;
			padding: calc((var(--bui-target) - 1lh) / 2) calc((var(--bui-target) - 1cap) / 2);
		}
	}
	/* A notification row, drawn as a box under the pointer: its words one inset from its edges */
	.bui-notice {
		padding-block: calc(var(--bui-notice-inset) - (1lh - 1cap) / 2);
	}
	/* The preview of a turn: its message's capitals at the inset; its keys' edges, or its facts' words, end it */
	.bui-turns-preview {
		padding-block: var(--bui-preview-inset);
	}
	.bui-turns-preview > .bui-turns-preview-title {
		margin-block-start: calc((1cap - 1lh) / 2);
	}
	@media (hover: none) and (pointer: coarse) {
		.bui-turns-preview {
			padding-block-end: calc(var(--bui-preview-inset) - (1lh - 1cap) / 2);
		}
	}
	/* The command palette: the field's words one inset from the top and from its divider, the count line's too */
	.bui-palette-search {
		padding-block: calc(var(--bui-palette-inset, var(--space-4)) - (var(--bui-target) - 1cap) / 2);
		font-size: var(--text-title-3);
	}
	.bui-palette-status {
		padding-block: calc(var(--bui-palette-inset, var(--space-4)) - (1lh - 1cap) / 2);
	}
}

/* A floating surface placed by `Floating` (0.15.0): menus, choice lists, suggestions, in-page popover
   panels, tooltips and hints. In the top layer where the browser has the popover API, `fixed` above the
   page otherwise; its place is set inline from its anchor, so these rules come last. An anchor scrolled
   out of the room hides it until it comes back. */
[data-bui-floating] {
	position: fixed;
	inset: auto;
	z-index: 60;
	margin: 0;
}
[data-bui-floating][data-bui-away] {
	visibility: hidden;
}
/* The browser frames a popover; a tooltip has no frame of its own. */
.bui-tooltip[data-bui-floating] {
	border: 0;
}
/* Key hints ("⌘K", "/ for commands") are not offered where there is no keyboard to press them on. */
@media (hover: none) and (pointer: coarse) {
	.bui-keys,
	[data-bui-keys] {
		display: none;
	}
}