/* Generated: a copy of kits/_shared/kit.css made by scripts/build-kit.mjs — DO NOT EDIT. */
/* ============================================================================
   The Bold kits — components and section patterns, shared by every kit.

   Source: kits/_shared/kit.css. Each kit folder gets a byte-for-byte copy
   (plus a header), so a kit folder is self-contained to copy into a project.
   Kits differ only in tokens.css; the class API is identical.

   Hand-written, but every color is a token from tokens.css: the build refuses
   a color literal anywhere in this file, because the contrast contract can
   only vouch for colors it knows about.

   How it works: a section is a field (.bb-field + .bb-field-bright | night |
   day). The field class sets the current roles (--bb-bg, --bb-ink,
   --bb-action, ...) and every component below reads those roles, so the same
   markup is correct on any field. Put class="bb" on the page root.

   Rules the contract depends on:
   - Components sit on a ground (the field, or an orb) or inside .bb-raised.
     Inside .bb-raised (cards, tiles) use caret links, not buttons: an action
     fill on a raised card is not a checked pair.
   - Focus rings use --bb-focus on a ground, and --bb-on-input inside inputs.
   ========================================================================= */

/* ---- Base ---------------------------------------------------------------- */

.bb {
	font-family: var(--font-body);
	font-size: var(--bb-body);
	font-weight: var(--bb-weight-body);
	line-height: var(--bb-leading-body);
	color: var(--bb-ink);
	background: var(--bb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bb *,
.bb *::before,
.bb *::after {
	box-sizing: border-box;
}

.bb :focus-visible {
	outline: 3px solid var(--bb-focus);
	outline-offset: 3px;
}

.bb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bb-skip {
	position: absolute;
	z-index: 20;
	top: calc(0.75rem * var(--bb-density));
	left: calc(0.75rem * var(--bb-density));
	padding: calc(0.75rem * var(--bb-density)) calc(1rem * var(--bb-density));
	background: var(--bb-action);
	color: var(--bb-on-action);
	border-radius: var(--bb-radius-button);
	font-weight: var(--bb-weight-strong);
	text-decoration: none;
	translate: 0 -200%;
}

.bb-skip:focus {
	translate: 0 0;
}

/* The skip link floats over whatever field is at the top of the page, so its
   ring is drawn INSIDE its own fill, in on-action: a checked pair on any field. */
.bb-skip:focus-visible {
	outline: 3px solid var(--bb-on-action);
	outline-offset: -6px;
}

/* ---- Fields and layout ----------------------------------------------------- */

.bb-field {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: var(--bb-field-pad);
	background: var(--bb-bg);
	color: var(--bb-ink);
}

.bb-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--bb-wrap);
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
}

.bb-step {
	margin-inline-start: var(--bb-step);
}

.bb-stack {
	display: grid;
	gap: clamp(calc(1.25rem * var(--bb-density)), 2.5vw, calc(2rem * var(--bb-density)));
	align-content: start;
}

/* Blocks within one long field, spaced like separate sections. */
.bb-flow {
	display: grid;
	gap: var(--bb-flow-gap);
}

.bb-measure {
	max-width: var(--bb-measure);
}

.bb-measure-wide {
	max-width: var(--bb-measure-wide);
}

.bb-center {
	text-align: center;
	justify-items: center;
}

.bb-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(1rem * var(--bb-density)) calc(1.5rem * var(--bb-density));
}

.bb-center .bb-actions {
	justify-content: center;
}

.bb-orb {
	position: absolute;
	z-index: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--bb-orb);
	pointer-events: none;
}

/* Two placements. Anything may sit over an orb: orb is a contract ground. */
.bb-orb--high-right {
	width: min(78vw, calc(56rem * var(--bb-density)));
	top: calc(-12rem * var(--bb-density));
	right: calc(-16rem * var(--bb-density));
}

.bb-orb--low-left {
	width: min(60vw, calc(34rem * var(--bb-density)));
	bottom: calc(22rem * var(--bb-density));
	left: calc(-14rem * var(--bb-density));
}

/* ---- Type ------------------------------------------------------------------ */

.bb-display,
.bb-heading {
	margin: 0;
	font-family: var(--font-display);
	color: var(--bb-ink);
	text-wrap: balance;
}

.bb-display {
	font-size: var(--bb-display-xl);
	font-weight: var(--bb-weight-display);
	line-height: var(--bb-leading-display);
	letter-spacing: var(--bb-tracking-display);
}

.bb-display--lg {
	font-size: var(--bb-display-lg);
}

.bb-display--md {
	font-size: var(--bb-display-md);
}

.bb-heading {
	font-size: var(--bb-display-sm);
	font-weight: var(--bb-weight-heading);
	line-height: var(--bb-leading-heading);
	letter-spacing: var(--bb-tracking-heading);
}

/* A staggered headline: each .bb-line is a line; --step lines move in. */
.bb-line {
	display: block;
}

.bb-line--step {
	padding-inline-start: var(--bb-step);
}

.bb-center .bb-line--step {
	padding-inline-start: 0;
}

.bb-lede {
	margin: 0;
	max-width: var(--bb-measure);
	font-size: var(--bb-lede);
	line-height: 1.45;
	text-wrap: pretty;
}

.bb-muted {
	color: var(--bb-muted);
}

.bb-small {
	font-size: var(--bb-small);
}

.bb-caption {
	font-size: var(--bb-caption);
}

/* The marker: a filled box behind one word. One per headline, at most.
   Inline, its box is the font's whole content area (about 1.2em) inside a 0.96
   display line, so without room it runs into the lines around it: measured on
   saturdaysort.com, the "making" box covered the y of "you're" above it at
   375px and "it took" ran up into "shipped". A taller line-height grows only
   the line that carries the marker. (Both sites carried this as a local
   override until 2026-09-23; it lives here now.) */
.bb-marker {
	padding: 0 0.14em 0.06em;
	margin-inline: -0.02em;
	border-radius: var(--bb-radius-marker);
	background: var(--bb-marker);
	color: var(--bb-on-marker);
	line-height: 1.5;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* The kit's one orchestrated moment: the marker is set down by hand on load.
   The box is present in every frame, so its text never loses contrast. It is
   inline-block, so its own box would grow with line-height: it keeps the
   headline's and takes its clearance as margin instead. */
.bb-marker--settle {
	display: inline-block;
	line-height: inherit;
	margin-block: 0.14em;
	animation: bb-settle 700ms var(--ease-out) 150ms both;
}

@keyframes bb-settle {
	from {
		transform: var(--bb-pose-settle);
	}
	to {
		transform: none;
	}
}

/* ---- Actions --------------------------------------------------------------- */

.bb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: calc(3rem * var(--bb-density));
	padding: 0.75em 1.4em;
	border: var(--bb-stroke-width) solid transparent;
	border-radius: var(--bb-radius-button);
	background: var(--bb-action);
	color: var(--bb-on-action);
	font: var(--bb-weight-strong) var(--bb-small) / 1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out);
}

.bb-button:hover {
	transform: var(--bb-pose-nudge);
}

.bb-button:active {
	transform: none;
}

.bb-button--accent {
	background: var(--bb-accent);
	color: var(--bb-on-accent);
}

.bb-button--outline {
	background: transparent;
	color: var(--bb-ink);
	border-color: currentColor;
}

.bb-caret-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--bb-link);
	font-weight: var(--bb-weight-strong);
	text-decoration: none;
}

.bb-caret-link::after {
	content: "";
	flex: none;
	width: 0.55em;
	height: 1em;
	background: var(--bb-caret);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 32% 50%);
	transition: translate var(--dur-fast) var(--ease-out);
}

.bb-caret-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

.bb-caret-link:hover::after {
	translate: 0.2em 0;
}

/* ---- Asking ------------------------------------------------------------------ */

.bb-ask {
	display: flex;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	min-height: calc(4.25rem * var(--bb-density));
	padding: calc(0.45rem * var(--bb-density)) calc(0.45rem * var(--bb-density)) calc(0.45rem * var(--bb-density)) calc(1.35rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-input-line);
	border-radius: var(--bb-radius-pill);
	background: var(--bb-input);
	color: var(--bb-on-input);
}

.bb-ask:focus-within {
	outline: 3px solid var(--bb-focus);
	outline-offset: 3px;
}

.bb-ask-icon {
	flex: none;
	width: calc(1.5rem * var(--bb-density));
	height: calc(1.5rem * var(--bb-density));
}

.bb-ask-input {
	flex: 1;
	min-width: 0;
	padding: calc(0.5rem * var(--bb-density)) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: var(--bb-weight-body) var(--bb-body) / 1.3 var(--font-body);
}

.bb-ask-input::placeholder {
	color: var(--bb-input-muted);
	opacity: 1;
}

.bb-ask-input:focus,
.bb-ask-input:focus-visible {
	outline: none;
}

.bb-ask-submit {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(3.1rem * var(--bb-density));
	height: calc(3.1rem * var(--bb-density));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bb-submit);
	color: var(--bb-on-submit);
	cursor: pointer;
}

.bb-ask-submit:focus-visible {
	outline-color: var(--bb-on-input);
	outline-offset: 2px;
}

.bb-ask-submit svg {
	width: calc(1.35rem * var(--bb-density));
	height: calc(1.35rem * var(--bb-density));
}

.bb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.75rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A single scrolling row that runs to the field's edges. */
.bb-chips--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-inline: calc(-1 * var(--bb-gutter));
	padding: calc(0.5rem * var(--bb-density)) var(--bb-gutter);
	scroll-padding-inline: var(--bb-gutter);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--bb-muted) transparent;
}

/* With the tones layer a chip is outlined, as a suggestion is in the
   construction demo: the surface's own fill (chip-face), the ink's words
   (on-chip-face), a hairline drawn inside (chip-line, so the chip keeps its
   size) and, if the kit sets it, radius-suggestion. Without the layer, the
   filled chip: the hairline's var() is undefined, so the shadow is none. */
.bb-chip {
	display: inline-flex;
	align-items: center;
	min-height: calc(3rem * var(--bb-density));
	padding: calc(0.75rem * var(--bb-density)) calc(1.25rem * var(--bb-density));
	border: 0;
	border-radius: var(--bb-radius-suggestion, var(--bb-radius-chip));
	background: var(--bb-chip-face, var(--bb-chip));
	box-shadow: inset 0 0 0 var(--bb-stroke-width) var(--bb-chip-line);
	color: var(--bb-on-chip-face, var(--bb-on-chip));
	font: var(--bb-weight-strong) var(--bb-small) / 1.25 var(--font-body);
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: start;
}

.bb-chip:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Forms ------------------------------------------------------------------- */

.bb-text-field {
	display: grid;
	gap: calc(0.5rem * var(--bb-density));
	max-width: calc(26rem * var(--bb-density));
}

.bb-label {
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-input {
	width: 100%;
	min-height: calc(3.25rem * var(--bb-density));
	padding: calc(0.75rem * var(--bb-density)) calc(1rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-input-line);
	border-radius: var(--bb-radius-button);
	background: var(--bb-input);
	color: var(--bb-on-input);
	font: var(--bb-weight-body) var(--bb-small) / 1.3 var(--font-body);
}

.bb-input::placeholder {
	color: var(--bb-input-muted);
	opacity: 1;
}

.bb-hint {
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

/* ---- Cards ------------------------------------------------------------------- */

/* Raised surfaces re-scope the roles, so text and links inside read correctly. */
.bb-raised {
	--bb-bg: var(--bb-raised);
	--bb-ink: var(--bb-on-raised);
	--bb-soft: var(--bb-raised-soft);
	--bb-muted: var(--bb-raised-muted);
	--bb-link: var(--bb-raised-link, var(--bb-on-raised));
	background: var(--bb-raised);
	color: var(--bb-on-raised);
}

/* Poses: children of .bb-posed sit at the four hand-placed poses in turn. */
.bb-posed > * {
	transform: var(--bb-pose-1);
}

.bb-posed > :nth-child(4n + 2) {
	transform: var(--bb-pose-2);
}

.bb-posed > :nth-child(4n + 3) {
	transform: var(--bb-pose-3);
}

.bb-posed > :nth-child(4n + 4) {
	transform: var(--bb-pose-4);
}

.bb-stat {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: calc(0.4rem * var(--bb-density));
	min-height: calc(11rem * var(--bb-density));
	padding: calc(2rem * var(--bb-density)) calc(1.25rem * var(--bb-density));
	border-radius: var(--bb-radius-card);
	background: var(--bb-accent);
	color: var(--bb-on-accent);
	text-align: center;
}

.bb-stat-value {
	font: var(--bb-weight-display) var(--bb-display-md) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-display);
}

.bb-stat-label {
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	line-height: 1.3;
}

.bb-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(13rem * var(--bb-density))), 1fr));
	gap: clamp(calc(1rem * var(--bb-density)), 2vw, calc(1.5rem * var(--bb-density)));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-width: 100%;
	padding: clamp(calc(0.75rem * var(--bb-density)), 2vw, calc(1.5rem * var(--bb-density)));
	border-radius: var(--bb-radius-card);
}

/* A wall of tiles whose alternate columns drop, like cards laid on a table.
   Two columns, then three, then five once a tile can hold a wordmark. */
.bb-tile-wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(calc(0.5rem * var(--bb-density)), 1.2vw, calc(0.9rem * var(--bb-density)));
	margin: 0;
	padding: 0 0 calc(3rem * var(--bb-density));
	list-style: none;
}

.bb-tile-wall > :nth-child(2n) {
	translate: 0 calc(2rem * var(--bb-density) * var(--bb-stagger));
}

@media (min-width: 40rem) {
	.bb-tile-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb-tile-wall > :nth-child(2n) {
		translate: none;
	}

	.bb-tile-wall > :nth-child(3n + 2) {
		translate: 0 calc(2.5rem * var(--bb-density) * var(--bb-stagger));
	}
}

@media (min-width: 56rem) {
	.bb-tile-wall {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.bb-tile-wall > :nth-child(3n + 2) {
		translate: none;
	}

	.bb-tile-wall > :nth-child(5n + 2),
	.bb-tile-wall > :nth-child(5n + 4) {
		translate: 0 calc(3rem * var(--bb-density) * var(--bb-stagger));
	}
}

.bb-logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	font-size: var(--bb-lede);
	line-height: 1;
	text-align: center;
}

.bb-logo svg {
	flex: none;
	width: 1.5em;
	height: 1.5em;
}

.bb-quote {
	position: relative;
	display: grid;
	align-content: start;
	gap: calc(1.25rem * var(--bb-density));
	margin: calc(1.75rem * var(--bb-density)) 0 0;
	padding: calc(3.25rem * var(--bb-density)) clamp(calc(1.25rem * var(--bb-density)), 3vw, calc(2.25rem * var(--bb-density))) calc(2rem * var(--bb-density));
	border-radius: var(--bb-radius-card);
}

.bb-quote blockquote {
	margin: 0;
	font: var(--bb-weight-heading) var(--bb-lede) / 1.35 var(--font-display);
	letter-spacing: -0.01em;
}

.bb-quote blockquote p {
	margin: 0;
}

.bb-quote figcaption {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

/* A label that overhangs the top edge of a card, set down at an angle. */
.bb-tag {
	position: absolute;
	top: 0;
	left: clamp(calc(1rem * var(--bb-density)), 3vw, calc(2rem * var(--bb-density)));
	translate: 0 -55%;
	transform: var(--bb-pose-tag);
	padding: calc(0.7rem * var(--bb-density)) calc(1.1rem * var(--bb-density));
	border-radius: var(--bb-radius-chip);
	background: var(--bb-accent);
	color: var(--bb-on-accent);
	font: var(--bb-weight-heading) var(--bb-small) / 1.1 var(--font-display);
}

.bb-quote-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(22rem * var(--bb-density))), 1fr));
	gap: calc(2.5rem * var(--bb-density)) calc(1.5rem * var(--bb-density));
}

/* ============================================================================
   Apps: navigation, panels and data.

   The same rules as everything above: every color is a role, so the same
   markup is correct on any field. Data marks (bars, segments, lines, dots,
   heat cells) are drawn in series-1..3, which the contract holds at 3:1
   against the field, its orb, raised cards and the track. Series always meet
   with a gap between them, so no series has to contrast with another.

   Values are numbers in the markup, never colors:
     --bb-v           0..1, a bar's height or a meter's fill
     --bb-x, --bb-y   0..1, a point's position in its plot (y from the bottom)
     --bb-from/--bb-to 0..1, a span of a time bar or a donut
     --bb-col         a heat map month label's first week column

   Style rules: one highlight per chart (the ink, like one marker per
   headline); status is carried by a glyph's shape and its label, never by
   hue alone; data cards stay unposed, because a tilted chart is hard to read.
   ========================================================================= */

/* ---- Icons, people and counts --------------------------------------------- */

/* Inline SVG icons, stroked in the current text color. */
.bb-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* With the tones layer an avatar is the quiet tint under the ink's initials
   (tint, on-tint), set in the label face, and --ink is a deeper tone (soft
   under the surface's color); without it, the chip and the ink. */
.bb-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: calc(2.25rem * var(--bb-density));
	height: calc(2.25rem * var(--bb-density));
	border-radius: 50%;
	background: var(--bb-tint, var(--bb-chip));
	color: var(--bb-on-tint, var(--bb-on-chip));
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: 0.02em;
}

/* The inverse: ink fill, surface type. A checked pair on any surface. */
.bb-avatar--ink {
	background: var(--bb-soft, var(--bb-ink));
	color: var(--bb-bg);
}

/* Hollow: an ink ring and ink type, for variety where chip and ink are close. */
.bb-avatar--line {
	background: var(--bb-bg);
	color: var(--bb-ink);
	box-shadow: inset 0 0 0 2px currentColor;
}

.bb-avatar--lg {
	width: calc(3.5rem * var(--bb-density));
	height: calc(3.5rem * var(--bb-density));
	font-size: var(--bb-small);
}

/* A stack: each avatar overlaps the last, ringed in the surface color. */
.bb-avatars {
	display: inline-flex;
	align-items: center;
}

/* The overlap stops short of the initials. */
.bb-avatars > * + * {
	margin-inline-start: calc(-0.4rem * var(--bb-density));
}

.bb-avatars > * {
	box-shadow: 0 0 0 2px var(--bb-bg);
}

.bb-avatars > .bb-avatar--line {
	box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--bb-bg);
}

.bb-user {
	display: flex;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	min-width: 0;
	color: var(--bb-ink);
	text-decoration: none;
}

.bb-user-text {
	display: grid;
	min-width: 0;
	line-height: 1.3;
}

.bb-user-name {
	overflow: hidden;
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-user-role {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

.bb-count {
	display: inline-grid;
	place-items: center;
	min-width: calc(1.75rem * var(--bb-density));
	padding: calc(0.2rem * var(--bb-density)) calc(0.45rem * var(--bb-density));
	border-radius: var(--bb-radius-pill);
	background: var(--bb-tint, var(--bb-chip));
	color: var(--bb-on-tint, var(--bb-on-chip));
	font: var(--bb-weight-strong) var(--bb-caption) / 1 var(--font-body);
	font-variant-numeric: tabular-nums;
}

/* ---- Small controls --------------------------------------------------------- */

.bb-icon-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: calc(2.75rem * var(--bb-density));
	height: calc(2.75rem * var(--bb-density));
	padding: 0;
	border: var(--bb-stroke-width) solid currentColor;
	border-radius: var(--bb-radius-button);
	background: var(--bb-bg);
	color: var(--bb-ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out);
}

.bb-icon-button:hover {
	transform: var(--bb-pose-nudge);
}

.bb-icon-button .bb-icon {
	width: calc(1.25rem * var(--bb-density));
	height: calc(1.25rem * var(--bb-density));
}

/* No box, for row menus and dense toolbars: the icon is the target's mark. */
.bb-icon-button--quiet {
	border-color: transparent;
	background: transparent;
}

/* An unread mark on an icon button. Its meaning must also be in the
   button's accessible name. */
.bb-unread {
	position: absolute;
	top: calc(0.3rem * var(--bb-density));
	right: calc(0.3rem * var(--bb-density));
	width: calc(0.625rem * var(--bb-density));
	height: calc(0.625rem * var(--bb-density));
	border-radius: 50%;
	background: var(--bb-accent);
	box-shadow: 0 0 0 2px var(--bb-bg);
}

.bb-check {
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: calc(1.25rem * var(--bb-density));
	height: calc(1.25rem * var(--bb-density));
	margin: 0;
	border: var(--bb-stroke-width) solid currentColor;
	border-radius: var(--bb-radius-chip);
	background: transparent;
	color: var(--bb-ink);
	vertical-align: middle;
	cursor: pointer;
}

.bb-check::before {
	content: "";
	width: calc(0.75rem * var(--bb-density));
	height: calc(0.75rem * var(--bb-density));
	background: var(--bb-bg);
	clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 85% 8%, 38% 68%);
	scale: 0;
}

.bb-check:checked {
	background: var(--bb-ink);
}

.bb-check:checked::before {
	scale: 1;
}

/* A native select in a box, with a drawn chevron. */
.bb-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	min-height: calc(2.75rem * var(--bb-density));
	padding-inline: calc(0.85rem * var(--bb-density)) calc(2.1rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-input-line);
	border-radius: var(--bb-radius-button);
	background: var(--bb-input);
	color: var(--bb-on-input);
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(0.85rem * var(--bb-density));
	width: calc(0.7rem * var(--bb-density));
	height: calc(0.45rem * var(--bb-density));
	translate: 0 -40%;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

.bb-select select {
	appearance: none;
	min-width: 0;
	min-height: calc(2.5rem * var(--bb-density));
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.bb-select select:focus {
	outline: none;
}

.bb-select:focus-within {
	outline: 3px solid var(--bb-focus);
	outline-offset: 3px;
}

/* No box, for a card's own controls: inputs are only checked on grounds. */
.bb-select--quiet {
	padding-inline-start: 0;
	border-color: transparent;
	background: transparent;
	color: var(--bb-ink);
}

.bb-search {
	display: flex;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
	min-height: calc(2.75rem * var(--bb-density));
	min-width: min(100%, calc(15rem * var(--bb-density)));
	padding-inline: calc(0.85rem * var(--bb-density)) calc(0.5rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-input-line);
	border-radius: var(--bb-radius-button);
	background: var(--bb-input);
	color: var(--bb-on-input);
}

.bb-search:focus-within {
	outline: 3px solid var(--bb-focus);
	outline-offset: 3px;
}

.bb-search-input {
	flex: 1;
	min-width: 0;
	padding: calc(0.5rem * var(--bb-density)) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: var(--bb-weight-body) var(--bb-small) / 1.2 var(--font-body);
}

.bb-search-input::placeholder {
	color: var(--bb-input-muted);
	opacity: 1;
}

.bb-search-input:focus {
	outline: none;
}

.bb-search-input::-webkit-search-cancel-button {
	appearance: none;
}

.bb-kbd {
	padding: calc(0.2rem * var(--bb-density)) calc(0.4rem * var(--bb-density));
	border: var(--bb-stroke-width) solid currentColor;
	border-radius: var(--bb-radius-chip);
	color: var(--bb-input-muted);
	font: var(--bb-weight-strong) var(--bb-caption) / 1 var(--font-mono);
	white-space: nowrap;
}

/* ---- Navigation ------------------------------------------------------------- */

.bb-sidenav {
	display: flex;
	flex-direction: column;
	gap: calc(1.75rem * var(--bb-density));
	min-width: 0;
	padding: calc(1.5rem * var(--bb-density)) calc(1rem * var(--bb-density));
	background: var(--bb-bg);
	color: var(--bb-ink);
}

.bb-brand {
	display: inline-flex;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
	color: var(--bb-ink);
	font: var(--bb-weight-display) var(--bb-lede) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-heading);
	text-decoration: none;
	white-space: nowrap;
}

.bb-brand .bb-icon {
	width: calc(1.6rem * var(--bb-density));
	height: calc(1.6rem * var(--bb-density));
}

.bb-sidenav > .bb-brand,
.bb-sidenav > .bb-user {
	padding-inline: calc(0.75rem * var(--bb-density));
}

.bb-nav-group {
	display: grid;
	gap: calc(0.5rem * var(--bb-density));
}

.bb-nav-group--end {
	margin-top: auto;
}

.bb-nav-label {
	margin: 0;
	padding-inline: calc(0.75rem * var(--bb-density));
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-nav-list {
	display: grid;
	gap: calc(0.25rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-nav-item {
	display: flex;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	min-height: calc(2.75rem * var(--bb-density));
	padding: calc(0.5rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	border-radius: var(--bb-radius-button);
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	text-decoration: none;
}

.bb-nav-item:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* The current page takes the action fill. In an app shell it also runs to
   the sidebar's edge, a tab cut from the page beside it. */
.bb-nav-item[aria-current="page"] {
	background: var(--bb-action);
	color: var(--bb-on-action);
}

.bb-nav-item .bb-count {
	margin-inline-start: auto;
}

.bb-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density)) calc(1.5rem * var(--bb-density));
	padding: calc(0.75rem * var(--bb-density)) clamp(calc(1rem * var(--bb-density)), 2vw, calc(1.5rem * var(--bb-density)));
	background: var(--bb-bg);
	color: var(--bb-ink);
}

.bb-topnav {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.25rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-topnav-item {
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	min-height: calc(2.5rem * var(--bb-density));
	padding: calc(0.4rem * var(--bb-density)) calc(0.85rem * var(--bb-density));
	border-radius: var(--bb-radius-button);
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	text-decoration: none;
	white-space: nowrap;
}

.bb-topnav-item:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.bb-topnav-item[aria-current="page"] {
	background: var(--bb-chip);
	color: var(--bb-on-chip);
}

.bb-topbar-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	margin-inline-start: auto;
}

/* A narrow rail: icon over label. */
.bb-rail {
	display: grid;
	align-content: start;
	gap: calc(0.25rem * var(--bb-density));
	width: calc(5.5rem * var(--bb-density));
	margin: 0;
	padding: calc(0.75rem * var(--bb-density)) calc(0.5rem * var(--bb-density));
	list-style: none;
	background: var(--bb-bg);
	color: var(--bb-ink);
}

.bb-rail-item {
	display: grid;
	justify-items: center;
	gap: calc(0.35rem * var(--bb-density));
	padding: calc(0.7rem * var(--bb-density)) calc(0.25rem * var(--bb-density));
	border-radius: var(--bb-radius-button);
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.bb-rail-item .bb-icon {
	width: calc(1.5rem * var(--bb-density));
	height: calc(1.5rem * var(--bb-density));
}

.bb-rail-item[aria-current="page"] {
	background: var(--bb-action);
	color: var(--bb-on-action);
}

/* Tabs: the caret color marks where you are, as it does on a caret link. */
.bb-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(1.75rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	box-shadow: inset 0 -2px 0 var(--bb-track);
}

.bb-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	min-height: calc(3rem * var(--bb-density));
	padding: calc(0.5rem * var(--bb-density)) calc(0.1rem * var(--bb-density));
	border: 0;
	background: none;
	color: var(--bb-muted);
	font: var(--bb-weight-strong) var(--bb-small) / 1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
}

.bb-tab:hover,
.bb-tab[aria-selected="true"],
.bb-tab:is([aria-current="page"], [aria-current="true"]) {
	color: var(--bb-ink);
}

.bb-tab[aria-selected="true"]::after,
.bb-tab:is([aria-current="page"], [aria-current="true"])::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 4px;
	border-radius: 2px 2px 0 0;
	background: var(--bb-caret);
}

/* Stat tabs: the number is the label. */
.bb-stat-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(8rem * var(--bb-density))), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	box-shadow: inset 0 -2px 0 var(--bb-track);
}

.bb-stat-tab {
	position: relative;
	display: grid;
	justify-items: center;
	gap: calc(0.35rem * var(--bb-density));
	width: 100%;
	padding: calc(1.25rem * var(--bb-density)) calc(0.75rem * var(--bb-density)) calc(1.4rem * var(--bb-density));
	border: 0;
	background: none;
	color: var(--bb-muted);
	font: var(--bb-weight-strong) var(--bb-caption) / 1.2 var(--font-body);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bb-stat-tab strong {
	color: var(--bb-ink);
	font: var(--bb-weight-display) var(--bb-display-sm) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-display);
	font-variant-numeric: tabular-nums;
}

.bb-stat-tab:hover,
.bb-stat-tab[aria-selected="true"],
.bb-stat-tab:is([aria-current="page"], [aria-current="true"]) {
	color: var(--bb-ink);
}

.bb-stat-tab[aria-selected="true"]::after,
.bb-stat-tab:is([aria-current="page"], [aria-current="true"])::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 4px;
	background: var(--bb-caret);
}

/* Segmented choices: the chosen one is the inverse, ink with surface type. */
.bb-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border: var(--bb-stroke-width) solid currentColor;
	border-radius: var(--bb-radius-button);
	color: var(--bb-ink);
}

.bb-segmented > button,
.bb-segmented > a {
	min-height: calc(2.25rem * var(--bb-density));
	padding: calc(0.35rem * var(--bb-density)) calc(0.9rem * var(--bb-density));
	border: 0;
	border-radius: var(--bb-radius-chip);
	background: transparent;
	color: var(--bb-ink);
	font: var(--bb-weight-strong) var(--bb-caption) / 1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
}

.bb-segmented > [aria-pressed="true"],
.bb-segmented > [aria-checked="true"],
.bb-segmented > [aria-current] {
	background: var(--bb-ink);
	color: var(--bb-bg);
}

/* A row of days. It scrolls on its own; the padding keeps focus rings in. */
.bb-datestrip {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	min-width: 0;
}

.bb-datestrip-days {
	display: flex;
	flex: 1;
	gap: calc(0.5rem * var(--bb-density));
	min-width: 0;
	margin: -6px;
	padding: 6px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--bb-muted) transparent;
}

.bb-datestrip-days > li {
	display: flex;
	flex: 1 0 calc(6.5rem * var(--bb-density));
}

.bb-day {
	display: grid;
	flex: 1;
	justify-items: center;
	gap: calc(0.2rem * var(--bb-density));
	min-height: calc(4rem * var(--bb-density));
	padding: calc(0.6rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-track);
	border-radius: var(--bb-radius-button);
	background: transparent;
	color: var(--bb-ink);
	font: var(--bb-weight-heading) var(--bb-small) / 1.2 var(--font-body);
	cursor: pointer;
	scroll-snap-align: start;
}

.bb-day span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-day[aria-pressed="true"] {
	border-color: var(--bb-ink);
	background: var(--bb-ink);
	color: var(--bb-bg);
}

.bb-day[aria-pressed="true"] span {
	color: inherit;
}

.bb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.25rem * var(--bb-density)) calc(0.6rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
}

.bb-breadcrumb li + li::before {
	content: "";
	width: 0.45em;
	height: 0.8em;
	background: var(--bb-muted);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 32% 50%);
}

.bb-breadcrumb a {
	color: var(--bb-link);
	text-decoration: none;
}

.bb-breadcrumb a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

.bb-breadcrumb [aria-current="page"] {
	color: var(--bb-muted);
}

/* A caret link that points back. */
.bb-caret-link--back::after {
	order: -1;
	scale: -1 1;
}

.bb-caret-link--back:hover::after {
	translate: -0.2em 0;
}

.bb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
}

.bb-toolbar-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	margin-inline-start: auto;
}

.bb-pager {
	display: inline-flex;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	font-variant-numeric: tabular-nums;
}

/* A live status line: the dot says "this is current", the words say when. */
.bb-live {
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-live::before {
	content: "";
	flex: none;
	width: calc(0.625rem * var(--bb-density));
	height: calc(0.625rem * var(--bb-density));
	border-radius: 50%;
	background: var(--bb-series-1);
}

/* ---- App shell and panels ----------------------------------------------------- */

.bb-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.bb-shell-main {
	display: grid;
	align-content: start;
	gap: clamp(calc(1rem * var(--bb-density)), 2vw, calc(1.5rem * var(--bb-density)));
	min-width: 0;
	padding: clamp(calc(1rem * var(--bb-density)), 3vw, calc(2rem * var(--bb-density)));
	background: var(--bb-bg);
	color: var(--bb-ink);
	container-type: inline-size;
}

@media (min-width: 56rem) {
	.bb-shell {
		grid-template-columns: calc(15rem * var(--bb-density)) minmax(0, 1fr);
	}

	.bb-shell .bb-sidenav {
		padding-inline-end: 0;
	}

	.bb-shell .bb-sidenav > .bb-brand,
	.bb-shell .bb-sidenav > .bb-user {
		margin-inline-end: calc(1rem * var(--bb-density));
	}

	.bb-shell .bb-nav-item[aria-current="page"] {
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}
}

/* Narrow: the sidebar folds into a bar whose items wrap. */
@media (max-width: 55.99rem) {
	.bb-shell .bb-sidenav {
		flex-flow: row wrap;
		align-items: center;
		gap: calc(0.5rem * var(--bb-density)) calc(1rem * var(--bb-density));
		padding: calc(1rem * var(--bb-density));
	}

	.bb-shell .bb-sidenav > .bb-brand {
		flex-basis: 100%;
		padding-inline: 0;
	}

	.bb-shell .bb-nav-group {
		display: contents;
	}

	.bb-shell .bb-nav-label,
	.bb-shell .bb-sidenav .bb-user-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bb-shell .bb-nav-list {
		display: flex;
		flex-wrap: wrap;
	}

	.bb-shell .bb-sidenav > .bb-user {
		padding-inline: 0;
	}
}

.bb-panel {
	display: grid;
	align-content: start;
	gap: calc(1.25rem * var(--bb-density));
	min-width: 0;
	padding: clamp(calc(1.25rem * var(--bb-density)), 2.5vw, calc(1.75rem * var(--bb-density)));
	border-radius: var(--bb-radius-card);
	background: var(--bb-bg);
	color: var(--bb-ink);
}

.bb-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(0.5rem * var(--bb-density)) calc(1rem * var(--bb-density));
}

.bb-panel-title {
	margin: 0;
	font: var(--bb-weight-heading) var(--bb-lede) / 1.2 var(--font-display);
	letter-spacing: var(--bb-tracking-heading);
}

.bb-panel-note {
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

/* A board of panels: one column, two from 36rem, three from 48rem of its own
   width (a container query, so it works inside a shell or a card). Wide
   panels span with .bb-span-2 or .bb-span-3, and narrow ones fill the gaps
   they leave. */
.bb-board {
	container-type: inline-size;
}

.bb-board-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: row dense;
	gap: clamp(calc(0.75rem * var(--bb-density)), 1.5vw, calc(1.25rem * var(--bb-density)));
}

@container (min-width: 36rem) {
	.bb-board-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb-board-grid > .bb-span-2,
	.bb-board-grid > .bb-span-3 {
		grid-column: 1 / -1;
	}
}

@container (min-width: 48rem) {
	.bb-board-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb-board-grid > .bb-span-2 {
		grid-column: span 2;
	}
}

/* ---- Figures: KPIs, deltas and status --------------------------------------- */

/* KPI panels in a row that wraps: four across a wide board, two on a phone. */
.bb-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(9rem * var(--bb-density))), 1fr));
	gap: clamp(calc(0.75rem * var(--bb-density)), 1.5vw, calc(1.25rem * var(--bb-density)));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-kpi {
	gap: calc(0.6rem * var(--bb-density));
}

.bb-kpi-label {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-kpi-value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(0.25rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	margin: 0;
	font: var(--bb-weight-display) var(--bb-display-md) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-display);
	font-variant-numeric: tabular-nums;
}

.bb-kpi-note {
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

/* A trend: the arrow's direction is the meaning; the caret color draws it. */
.bb-delta {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--bb-ink);
	font: var(--bb-weight-strong) var(--bb-small) / 1 var(--font-body);
	letter-spacing: 0;
	white-space: nowrap;
}

.bb-delta::before {
	content: "";
	flex: none;
	width: 0.8em;
	height: 0.8em;
	background: var(--bb-caret);
	clip-path: polygon(22% 0, 100% 0, 100% 78%, 76% 78%, 76% 41%, 17% 100%, 0 83%, 59% 24%, 22% 24%);
}

.bb-delta[data-trend="down"]::before {
	rotate: 90deg;
}

.bb-delta[data-trend="flat"]::before {
	rotate: 45deg;
}

/* A trend's sense: better or worse, whichever way the number moved (a cost
   falling is better). The arrow still says the direction; with the status
   layer, better is good and worse is bad. */
.bb-delta[data-sense="better"]::before {
	background: var(--bb-good, var(--bb-caret));
}

.bb-delta[data-sense="worse"]::before {
	background: var(--bb-bad, var(--bb-caret));
}

/* Status glyphs. The shape carries the meaning, so it survives grayscale:
   planned is a dashed ring, active a half-filled dot, done a solid dot,
   attention a triangle, stopped a cross. Use .bb-status for glyph + label,
   .bb-glyph for the glyph alone (with the label beside it in text). */
.bb-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	white-space: nowrap;
}

.bb-status::before,
.bb-glyph {
	content: "";
	display: inline-block;
	flex: none;
	width: 0.8em;
	height: 0.8em;
}

.bb-status[data-status="planned"]::before,
.bb-glyph[data-status="planned"] {
	border: var(--bb-stroke-width) dashed var(--bb-muted);
	border-radius: 50%;
}

.bb-status[data-status="active"]::before,
.bb-glyph[data-status="active"] {
	border-radius: 50%;
	background: conic-gradient(var(--bb-series-1) 0 50%, transparent 0);
	box-shadow: inset 0 0 0 2px var(--bb-series-1);
}

.bb-status[data-status="done"]::before,
.bb-glyph[data-status="done"] {
	border-radius: 50%;
	background: var(--bb-good, var(--bb-series-1));
}

.bb-status[data-status="attention"]::before,
.bb-glyph[data-status="attention"] {
	background: var(--bb-warning, var(--bb-ink));
	clip-path: polygon(50% 2%, 100% 96%, 0 96%);
}

.bb-status[data-status="stopped"]::before,
.bb-glyph[data-status="stopped"] {
	background: var(--bb-bad, var(--bb-ink));
	clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

/* ---- Series, keys and legends -------------------------------------------------- */

/* A series class sets the paint for anything inside it, and a mark shape, so
   dots and keys differ by shape as well as color: circle, square, diamond. */
.bb-series-1 {
	--bb-paint: var(--bb-series-1);
	--bb-mark-radius: 50%;
	--bb-mark-turn: 0deg;
}

.bb-series-2 {
	--bb-paint: var(--bb-series-2);
	--bb-mark-radius: 2px;
	--bb-mark-turn: 0deg;
}

.bb-series-3 {
	--bb-paint: var(--bb-series-3);
	--bb-mark-radius: 2px;
	--bb-mark-turn: 45deg;
}

/* The one value that matters, drawn in ink. One per chart. */
.bb-highlight {
	--bb-paint: var(--bb-ink);
}

.bb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5rem * var(--bb-density)) calc(1.25rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-legend > li {
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	color: var(--bb-soft, inherit);
}

.bb-legend strong {
	color: var(--bb-ink);
	font-weight: var(--bb-weight-heading);
	font-variant-numeric: tabular-nums;
}

.bb-legend--stack {
	display: grid;
	gap: calc(0.85rem * var(--bb-density));
	font-size: var(--bb-small);
}

.bb-legend--stack > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: calc(0.75rem * var(--bb-density));
}

.bb-key {
	flex: none;
	width: calc(0.75rem * var(--bb-density));
	height: calc(0.75rem * var(--bb-density));
	border-radius: var(--bb-mark-radius, 50%);
	background: var(--bb-paint, var(--bb-series-1));
	rotate: var(--bb-mark-turn, 0deg);
}

/* The empty part of a whole: the track, outlined so the key is seen. */
.bb-key--track {
	background: var(--bb-track);
	box-shadow: inset 0 0 0 2px var(--bb-muted);
}

.bb-key--line {
	width: calc(1.5rem * var(--bb-density));
	height: calc(0.25rem * var(--bb-density));
	border-radius: 2px;
	rotate: none;
}

/* Series 2 lines are dashed, series 3 dotted, in keys and in charts. */
.bb-series-2 .bb-key--line,
.bb-key--line.bb-series-2 {
	background: repeating-linear-gradient(90deg, var(--bb-paint) 0 0.5rem, transparent 0.5rem 0.75rem);
}

.bb-series-3 .bb-key--line,
.bb-key--line.bb-series-3 {
	background: repeating-linear-gradient(90deg, var(--bb-paint) 0 0.25rem, transparent 0.25rem 0.5rem);
}

/* ---- Plots: the frame bars, lines and dots share ---------------------------- */

.bb-chart {
	display: grid;
	gap: calc(1rem * var(--bb-density));
	min-width: 0;
	margin: 0;
	container-type: inline-size;
}

/* The plot. Gridlines are a list whose items carry the y labels; the marks
   sit in the area to the right of the labels. */
.bb-plot {
	--bb-axis-w: calc(2.75rem * var(--bb-density));
	position: relative;
	height: var(--bb-plot-h, calc(14rem * var(--bb-density)));
	margin-block: calc(0.75rem * var(--bb-density)) calc(2.25rem * var(--bb-density));
}

.bb-gridlines {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.bb-gridlines > li {
	position: relative;
	height: 0;
	margin-inline-start: var(--bb-axis-w);
	border-top: var(--bb-stroke-width) solid var(--bb-track);
}

.bb-gridlines span {
	position: absolute;
	top: 0;
	right: calc(100% + calc(0.6rem * var(--bb-density)));
	translate: 0 -50%;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bb-bars,
.bb-plot-area,
.bb-dots {
	position: absolute;
	inset: 0 0 0 var(--bb-axis-w);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The x axis under a plot: zero-width items, so each label centers on its
   position. */
.bb-axis-x {
	position: absolute;
	top: calc(100% + calc(0.6rem * var(--bb-density)));
	right: 0;
	left: var(--bb-axis-w);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	font-variant-numeric: tabular-nums;
}

.bb-axis-x > li {
	display: flex;
	justify-content: center;
	width: 0;
	white-space: nowrap;
}

.bb-axis-title {
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

/* A value tag, set down at the tag pose on the marker, over the one
   highlighted mark. */
.bb-chart-tag {
	position: absolute;
	bottom: calc(var(--bb-v, var(--bb-y, 0)) * 100% + calc(0.75rem * var(--bb-density)));
	left: calc(var(--bb-x, 0.5) * 100%);
	z-index: 1;
	translate: -50% 0;
	transform: var(--bb-pose-tag);
	padding: calc(0.4rem * var(--bb-density)) calc(0.6rem * var(--bb-density));
	border-radius: var(--bb-radius-chip);
	background: var(--bb-marker);
	color: var(--bb-on-marker);
	font: var(--bb-weight-heading) var(--bb-caption) / 1 var(--font-display);
	white-space: nowrap;
	pointer-events: none;
}

/* ---- Bars ----------------------------------------------------------------------- */

.bb-bars {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: clamp(calc(0.2rem * var(--bb-density)), 1.6cqi, calc(0.9rem * var(--bb-density)));
	padding-inline: calc(0.25rem * var(--bb-density));
}

.bb-bars > li {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	height: 100%;
}

.bb-bar {
	flex: 1 1 0;
	max-width: calc(3.5rem * var(--bb-density));
	height: calc(var(--bb-v, 0) * 100%);
	min-height: 2px;
	border-radius: var(--bb-radius-chip) var(--bb-radius-chip) 0 0;
	background: var(--bb-paint, var(--bb-series-1));
}

.bb-bar-label {
	position: absolute;
	top: calc(100% + calc(0.6rem * var(--bb-density)));
	left: 50%;
	translate: -50% 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	white-space: nowrap;
}

/* Nine or more labels do not fit a phone: below 24rem every other one steps
   aside (it stays in the accessibility tree). */
@container (max-width: 24rem) {
	.bb-bars:has(> :nth-child(9)) > li:nth-child(even) .bb-bar-label {
		opacity: 0;
	}
}

/* ---- Lines ------------------------------------------------------------------- */

/* An SVG in a 0..100 box, stretched to the plot area. Points and tags sit
   over it in HTML at the same --bb-x/--bb-y, so they stay round. */
.bb-line-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* An area under one series. It is the track, so it hides the gridlines it
   covers; the labels still read. */
.bb-line-area {
	fill: var(--bb-track);
	stroke: none;
}

.bb-line-path {
	fill: none;
	stroke: var(--bb-paint, var(--bb-series-1));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.bb-line-path.bb-series-2 {
	stroke-dasharray: 9 6;
}

.bb-line-path.bb-series-3 {
	stroke-dasharray: 2 6;
}

.bb-point,
.bb-dot {
	position: absolute;
	bottom: calc(var(--bb-y, 0) * 100%);
	left: calc(var(--bb-x, 0) * 100%);
	width: var(--bb-mark, calc(0.75rem * var(--bb-density)));
	height: var(--bb-mark, calc(0.75rem * var(--bb-density)));
	translate: -50% 50%;
	rotate: var(--bb-mark-turn, 0deg);
	border-radius: var(--bb-mark-radius, 50%);
	background: var(--bb-paint, var(--bb-series-1));
	box-shadow: 0 0 0 2px var(--bb-bg);
}

.bb-point.bb-highlight,
.bb-dot.bb-highlight {
	--bb-mark: calc(1.1rem * var(--bb-density));
	box-shadow: 0 0 0 3px var(--bb-bg);
}

/* A spark line: a line chart without axes, for a KPI card. */
.bb-spark {
	display: block;
	width: 100%;
	height: calc(3.5rem * var(--bb-density));
	overflow: visible;
}

/* ---- Scatter -------------------------------------------------------------------- */

.bb-plot--scatter .bb-dots {
	border-inline-start: var(--bb-stroke-width) solid var(--bb-track);
}

.bb-dot {
	--bb-mark: calc(0.8rem * var(--bb-density));
}

.bb-dot.bb-series-3 {
	--bb-mark: calc(0.7rem * var(--bb-density));
}

/* ---- Donut ---------------------------------------------------------------------- */

.bb-donut-chart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(1.5rem * var(--bb-density)) calc(2rem * var(--bb-density));
	margin: 0;
}

.bb-donut-chart > .bb-legend {
	flex: 1 1 calc(12rem * var(--bb-density));
}

/* An SVG ring of circumference 100 (r 15.915 in a 42 box, pathLength 100).
   Each segment is one circle; --bb-from and --bb-to place it, from 12
   o'clock clockwise, and a gap of the track or surface separates them. */
.bb-donut {
	position: relative;
	flex: none;
	width: min(100%, var(--bb-donut, calc(11rem * var(--bb-density))));
	aspect-ratio: 1;
}

.bb-donut svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bb-donut circle {
	fill: none;
	stroke-width: 5.5;
}

.bb-donut-track {
	stroke: var(--bb-track);
}

.bb-donut-seg {
	--bb-len: calc((var(--bb-to, 0) - var(--bb-from, 0)) * 100 - var(--bb-gap, 1.25));
	stroke: var(--bb-paint, var(--bb-series-1));
	stroke-dasharray: calc(var(--bb-len) * 1px) calc((100 - var(--bb-len)) * 1px);
	stroke-dashoffset: calc((25 - var(--bb-from, 0) * 100) * 1px);
}

.bb-donut-center {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: calc(0.2rem * var(--bb-density));
	margin: 0;
	text-align: center;
}

.bb-donut-center strong {
	font: var(--bb-weight-display) var(--bb-display-sm) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-display);
	font-variant-numeric: tabular-nums;
}

.bb-donut-center span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

/* ---- Split bars and meters ------------------------------------------------------ */

/* Shares of one whole, in a row: each part's --bb-v is its share. */
.bb-split {
	display: flex;
	gap: 3px;
	height: calc(0.875rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-split > * {
	flex: var(--bb-v, 1) 1 0;
	min-width: 3px;
	border-radius: 2px;
	background: var(--bb-paint, var(--bb-series-1));
}

.bb-split > :first-child {
	border-start-start-radius: var(--bb-radius-pill);
	border-end-start-radius: var(--bb-radius-pill);
}

.bb-split > :last-child {
	border-start-end-radius: var(--bb-radius-pill);
	border-end-end-radius: var(--bb-radius-pill);
}

/* One value against a whole: the fill on the track. Give the element
   role="meter" (or progressbar) with its values. */
.bb-meter {
	height: calc(0.75rem * var(--bb-density));
	overflow: hidden;
	border-radius: var(--bb-radius-pill);
	background: var(--bb-track);
}

.bb-meter > span {
	display: block;
	width: calc(var(--bb-v, 0) * 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--bb-paint, var(--bb-series-1));
}

/* ---- Heat tracker ----------------------------------------------------------------- */

/* A year of days, a column per week. Size, not tint, carries the amount:
   every cell is one series color, and a fuller square means more. So the
   scale needs no extra colors and reads in grayscale. Level 0 is a small
   track square. */
.bb-heat-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bb-muted) transparent;
}

.bb-heat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: calc(0.4rem * var(--bb-density)) calc(0.6rem * var(--bb-density));
	width: max(100%, calc(46rem * var(--bb-density)));
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-heat-months,
.bb-heat-grid {
	display: grid;
	grid-template-columns: repeat(var(--bb-weeks, 52), minmax(0, 1fr));
	column-gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-heat-months {
	grid-column: 2;
}

.bb-heat-months > li {
	grid-column: var(--bb-col, auto) / span 4;
	white-space: nowrap;
}

.bb-heat-days {
	display: grid;
	grid-template-rows: repeat(7, minmax(0, 1fr));
	row-gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.bb-heat-days > li {
	display: flex;
	align-items: center;
}

.bb-heat-grid {
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	row-gap: 3px;
}

.bb-heat-grid > i,
.bb-heat-scale > i {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
}

.bb-heat-grid > i::before,
.bb-heat-scale > i::before {
	content: "";
	width: var(--bb-size, 100%);
	aspect-ratio: 1;
	border-radius: 2px;
	background: var(--bb-paint, var(--bb-series-1));
}

:is(.bb-heat-grid, .bb-heat-scale) > [data-level="0"] {
	--bb-size: 30%;
	--bb-paint: var(--bb-track);
}

:is(.bb-heat-grid, .bb-heat-scale) > [data-level="1"] {
	--bb-size: 45%;
}

:is(.bb-heat-grid, .bb-heat-scale) > [data-level="2"] {
	--bb-size: 65%;
}

:is(.bb-heat-grid, .bb-heat-scale) > [data-level="3"] {
	--bb-size: 85%;
}

:is(.bb-heat-grid, .bb-heat-scale) > [data-level="4"] {
	--bb-size: 100%;
}

.bb-heat-scale {
	display: flex;
	align-items: center;
	gap: calc(0.35rem * var(--bb-density));
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-heat-scale > i {
	width: calc(0.9rem * var(--bb-density));
}

.bb-heat-scale > :first-of-type {
	margin-inline-start: calc(0.25rem * var(--bb-density));
}

.bb-heat-scale > :last-of-type {
	margin-inline-end: calc(0.25rem * var(--bb-density));
}

/* ---- Time bar and timeline ---------------------------------------------------- */

/* Spans of one period on the track, placed by --bb-from/--bb-to. */
.bb-timebar {
	position: relative;
	height: calc(3rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--bb-radius-chip);
	background: var(--bb-track);
}

.bb-timebar > li {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--bb-from, 0) * 100% + 1px);
	width: calc((var(--bb-to, 0) - var(--bb-from, 0)) * 100% - 2px);
	background: var(--bb-paint, var(--bb-series-1));
}

/* Evenly spaced times; zero-width items center each label on its tick. */
.bb-timebar-scale {
	display: flex;
	justify-content: space-between;
	margin: 0 0 calc(0.5rem * var(--bb-density));
	padding: 0;
	list-style: none;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	font-variant-numeric: tabular-nums;
}

.bb-timebar-scale > li {
	display: flex;
	justify-content: center;
	width: 0;
	white-space: nowrap;
}

.bb-timeline {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-timeline > li {
	position: relative;
	display: grid;
	grid-template-columns: calc(1.25rem * var(--bb-density)) minmax(0, 1fr);
	gap: 0 calc(0.9rem * var(--bb-density));
	padding-bottom: calc(1.4rem * var(--bb-density));
}

/* The connector, from each glyph to the next. */
.bb-timeline > li::before {
	content: "";
	position: absolute;
	top: calc(1.5rem * var(--bb-density));
	bottom: calc(0.3rem * var(--bb-density));
	left: calc(calc(0.625rem * var(--bb-density)) - 1px);
	width: 2px;
	background: var(--bb-track);
}

.bb-timeline > li:last-child {
	padding-bottom: 0;
}

.bb-timeline > li:last-child::before {
	display: none;
}

.bb-timeline .bb-glyph {
	justify-self: center;
	width: calc(0.9rem * var(--bb-density));
	height: calc(0.9rem * var(--bb-density));
	margin-top: calc(0.3rem * var(--bb-density));
}

.bb-timeline-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 calc(1rem * var(--bb-density));
	margin: 0;
	font-weight: var(--bb-weight-strong);
}

.bb-timeline-head time {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-variant-numeric: tabular-nums;
}

.bb-timeline-body > p:not(.bb-timeline-head) {
	margin: calc(0.15rem * var(--bb-density)) 0 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

.bb-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: calc(0.3rem * var(--bb-density)) calc(1rem * var(--bb-density));
	margin: calc(0.6rem * var(--bb-density)) 0 0;
	font-size: var(--bb-caption);
}

.bb-facts dt {
	color: var(--bb-muted);
}

.bb-facts dd {
	margin: 0;
	font-weight: var(--bb-weight-strong);
}

/* ---- Map -------------------------------------------------------------------------- */

/* A drawn map in two tones: blocks in the track on the surface, streets cut
   through in the surface. The route is series-1 on a surface casing, so it
   meets only colors it is checked against. Pins, labels and callouts sit
   over it in HTML at --bb-x/--bb-y (0..1 from the top left), which is why
   the map keeps one aspect ratio. */
.bb-map {
	position: relative;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
	border-radius: var(--bb-radius-card);
	background: var(--bb-bg);
}

.bb-map-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bb-map-block,
.bb-map-park {
	fill: var(--bb-track);
}

.bb-map-street,
.bb-map-bank,
.bb-map-water,
.bb-map-ripple {
	fill: none;
	stroke: var(--bb-bg);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-map-street {
	stroke-width: 10;
}

/* Water is the track, like the blocks, set apart by surface banks and
   wave marks. */
.bb-map-bank {
	stroke-width: 58;
}

.bb-map-water {
	stroke: var(--bb-track);
	stroke-width: 44;
}

.bb-map-ripple {
	stroke-width: 2;
}

.bb-map-tree {
	fill: var(--bb-bg);
}

.bb-map-casing {
	fill: none;
	stroke: var(--bb-bg);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-map-route {
	fill: none;
	stroke: var(--bb-paint, var(--bb-series-1));
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-map-route.bb-series-3 {
	stroke-dasharray: 0.5 11;
	stroke-width: 6;
}

/* Place names sit on a plate of the surface, so their contrast is the
   checked muted-on-surface pair wherever they land. */
.bb-map-label {
	position: absolute;
	top: calc(var(--bb-y, 0) * 100%);
	left: calc(var(--bb-x, 0) * 100%);
	translate: -50% -50%;
	padding: calc(0.1rem * var(--bb-density)) calc(0.35rem * var(--bb-density));
	border-radius: 2px;
	background: var(--bb-bg);
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-heading);
	letter-spacing: 0.04em;
	white-space: nowrap;
	pointer-events: none;
}

/* A dropped pin: its point is exactly at --bb-x/--bb-y. */
.bb-pin {
	position: absolute;
	top: calc(var(--bb-y, 0) * 100%);
	left: calc(var(--bb-x, 0) * 100%);
	display: grid;
	place-items: center;
	width: calc(2.25rem * var(--bb-density));
	height: calc(2.25rem * var(--bb-density));
	translate: -50% calc(-50% - calc(1.6rem * var(--bb-density)));
	rotate: -45deg;
	border-radius: 50% 50% 50% 0;
	background: var(--bb-ink);
	color: var(--bb-bg);
	box-shadow: 0 0 0 3px var(--bb-bg);
}

.bb-pin > * {
	rotate: 45deg;
}

.bb-pin .bb-icon {
	width: calc(1.1rem * var(--bb-density));
	height: calc(1.1rem * var(--bb-density));
}

/* A spot on the route, and a callout set down above it on the marker. */
.bb-spot {
	position: absolute;
	top: calc(var(--bb-y, 0) * 100%);
	left: calc(var(--bb-x, 0) * 100%);
	width: calc(0.9rem * var(--bb-density));
	height: calc(0.9rem * var(--bb-density));
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--bb-ink);
	box-shadow: 0 0 0 3px var(--bb-bg);
}

.bb-callout {
	position: absolute;
	top: calc(var(--bb-y, 0) * 100%);
	left: calc(var(--bb-x, 0) * 100%);
	z-index: 1;
	translate: -50% calc(-100% - calc(1.1rem * var(--bb-density)));
	transform: var(--bb-pose-tag);
	padding: calc(0.4rem * var(--bb-density)) calc(0.65rem * var(--bb-density));
	border-radius: var(--bb-radius-chip);
	background: var(--bb-marker);
	color: var(--bb-on-marker);
	font: var(--bb-weight-heading) var(--bb-caption) / 1.1 var(--font-display);
	white-space: nowrap;
}

.bb-callout::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	width: calc(0.8rem * var(--bb-density));
	height: calc(0.5rem * var(--bb-density));
	translate: -50% 0;
	background: var(--bb-marker);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.bb-map-controls {
	position: absolute;
	right: calc(0.75rem * var(--bb-density));
	bottom: calc(0.75rem * var(--bb-density));
	display: grid;
	gap: calc(0.4rem * var(--bb-density));
}

/* ---- People: podium, ranks, feed ------------------------------------------------ */

.bb-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: clamp(calc(0.5rem * var(--bb-density)), 2vw, calc(1rem * var(--bb-density)));
	margin: 0;
	padding: calc(1.5rem * var(--bb-density)) 0 0;
	list-style: none;
}

.bb-podium > li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: calc(0.3rem * var(--bb-density));
	min-width: 0;
	padding: calc(2rem * var(--bb-density)) calc(0.5rem * var(--bb-density)) calc(1.1rem * var(--bb-density));
	border-radius: var(--bb-radius-card);
	text-align: center;
}

/* First place stands in the middle, and taller; the list order stays 1, 2, 3. */
.bb-podium > [data-rank="1"] {
	order: 2;
	padding-top: calc(3rem * var(--bb-density));
}

.bb-podium > [data-rank="2"] {
	order: 1;
}

.bb-podium > [data-rank="3"] {
	order: 3;
}

.bb-podium strong {
	overflow: hidden;
	max-width: 100%;
	font-size: var(--bb-small);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-podium-score {
	font: var(--bb-weight-display) var(--bb-lede) / 1 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.bb-rank {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: calc(2rem * var(--bb-density));
	height: calc(2rem * var(--bb-density));
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--bb-tint, var(--bb-chip));
	color: var(--bb-on-tint, var(--bb-on-chip));
	font: var(--bb-weight-display) var(--bb-small) / 1 var(--font-display);
}

.bb-podium > [data-rank="1"] .bb-rank {
	width: calc(2.5rem * var(--bb-density));
	height: calc(2.5rem * var(--bb-density));
	background: var(--bb-marker);
	color: var(--bb-on-marker);
}

.bb-ranks {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bb-small);
}

.bb-ranks > li {
	display: grid;
	grid-template-columns: calc(1.75rem * var(--bb-density)) auto minmax(0, 1fr) auto;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
	padding-block: calc(0.7rem * var(--bb-density));
	border-top: var(--bb-stroke-width) solid var(--bb-track);
	font-variant-numeric: tabular-nums;
}

.bb-ranks > li > :first-child {
	color: var(--bb-muted);
	font-weight: var(--bb-weight-strong);
}

.bb-ranks strong {
	font-weight: var(--bb-weight-heading);
}

.bb-feed {
	display: grid;
	gap: calc(1.1rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-feed > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0 calc(0.75rem * var(--bb-density));
}

.bb-feed p {
	margin: 0;
	color: var(--bb-soft, inherit);
	font-size: var(--bb-small);
	line-height: 1.4;
}

.bb-feed time {
	display: block;
	margin-top: calc(0.15rem * var(--bb-density));
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

/* From here to there: two ends and the leg between them. */
.bb-route {
	display: grid;
	grid-template-columns: auto minmax(calc(3rem * var(--bb-density)), 1fr) auto;
	align-items: center;
	gap: calc(0.75rem * var(--bb-density));
}

.bb-route-end {
	display: grid;
	gap: calc(0.15rem * var(--bb-density));
	margin: 0;
}

.bb-route-end:last-child {
	justify-items: end;
	text-align: end;
}

.bb-route-end > span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-route-end > .bb-route-code {
	color: var(--bb-ink);
	font: var(--bb-weight-display) var(--bb-display-sm) / 1 var(--font-display);
	letter-spacing: var(--bb-tracking-heading);
}

.bb-route-leg {
	position: relative;
	display: grid;
	justify-items: center;
	gap: calc(0.35rem * var(--bb-density));
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-route-leg::before {
	content: "";
	position: absolute;
	top: calc(0.6rem * var(--bb-density));
	right: 0;
	left: 0;
	height: 2px;
	background: var(--bb-muted);
}

.bb-route-leg .bb-icon {
	position: relative;
	padding-inline: calc(0.2rem * var(--bb-density));
	background: var(--bb-bg);
	color: var(--bb-ink);
	box-sizing: content-box;
}

/* ---- Tables ----------------------------------------------------------------------- */

/* Tables keep their columns and scroll inside this, never the page. Give it
   tabindex="0", role="region" and a label, so it scrolls by keyboard. */
.bb-table-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bb-muted) transparent;
}

.bb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bb-small);
	font-variant-numeric: tabular-nums;
}

.bb-table th,
.bb-table td {
	padding: calc(0.8rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	text-align: start;
	vertical-align: middle;
	white-space: nowrap;
}

.bb-table :is(th, td):first-child {
	padding-inline-start: 0;
}

.bb-table :is(th, td):last-child {
	padding-inline-end: 0;
}

.bb-table thead th {
	padding-block: calc(0.6rem * var(--bb-density));
	border-bottom: var(--bb-stroke-width) solid var(--bb-ink);
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

.bb-table tbody tr + tr > * {
	border-top: var(--bb-stroke-width) solid var(--bb-track);
}

.bb-table .bb-num {
	text-align: end;
}

/* A row's name is its header cell (<th scope="row">), set like the other
   cells. With the tones layer the other cells read soft and the name keeps
   the ink, so the eye runs down the names. */
.bb-table tbody th {
	font-weight: inherit;
}

.bb-table tbody td {
	color: var(--bb-soft, inherit);
}

/* ============================================================================
   Case views: labels, badges, steps, schedules and rulers, for dense
   operational screens (a case, a schedule, a decision with a deadline).
   Same rules as everything above: roles only. A schedule span's meaning is
   carried by its pattern (solid, striped, dashed, outlined) as well as its
   words, never by color alone.
   ========================================================================= */

/* ---- Labels and badges ------------------------------------------------------ */

/* A section label in small tracked capitals. Write it in sentence case: the
   capitals are style, so screen readers read words, not letters.

   Labels (this, badges, the agent chip, table-like heads, tile titles) read
   three optional kit tokens: --bb-font-label (default the body font),
   --bb-label-weight (default the strong weight) and --bb-label-tracking.
   --bb-label-case uppercases the ones that are not already capitals. A kit
   that sets none of them draws its labels as before. */
.bb-overline {
	margin: 0;
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.3 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

/* A small boxed label: a source, a kind, a state. Outlined in ink; --fill is
   the inverse; --dashed marks something not yet real (a draft, a proposal);
   --pill rounds it; --quiet steps it back to the muted color. Ink on the
   surface or its inverse, so it reads on any field or card. */
.bb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: calc(1.625rem * var(--bb-density));
	padding: calc(0.1rem * var(--bb-density)) calc(0.45rem * var(--bb-density));
	border: var(--bb-stroke-width) solid currentColor;
	border-radius: var(--bb-radius-chip);
	color: var(--bb-ink);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: 0.03em;
	/* inherit, not none: a badge in a capitalized head keeps its capitals */
	text-transform: var(--bb-label-case, inherit);
	white-space: nowrap;
}

/* With the tones layer a filled badge is a quiet tint with the ink's words
   (tint, on-tint), not the inverse: a count, a rank or a countdown, not a
   black pill. Without it, the inverse. */
.bb-badge--fill {
	border-color: var(--bb-tint, var(--bb-ink));
	background: var(--bb-tint, var(--bb-ink));
	color: var(--bb-on-tint, var(--bb-bg));
}

/* An alert: a top priority, a clash, a deadline that bites. With the status
   layer its edge and words take bad, on bad's own wash (checked at 4.5:1);
   without it, it draws exactly as --fill. */
.bb-badge--alert {
	border-color: var(--bb-bad, var(--bb-ink));
	background: var(--bb-bad-wash, var(--bb-ink));
	color: var(--bb-bad, var(--bb-bg));
}

.bb-badge--dashed {
	border-style: dashed;
}

.bb-badge--pill {
	padding-inline: calc(0.7rem * var(--bb-density));
	border-radius: var(--bb-radius-pill);
}

.bb-badge--quiet {
	color: var(--bb-muted);
}

.bb-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.35rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A card drawn as an outline instead of a fill, for notes that sit beside
   the work rather than being it. */
.bb-panel--outline {
	box-shadow: inset 0 0 0 2px var(--bb-track);
}

/* ---- Steps ------------------------------------------------------------------- */

/* Where a process stands. Done steps are solid dots, the current step a
   ringed dot in bold, steps ahead hollow rings: the shapes carry it. Mark
   the current step aria-current="step" and finished ones data-done (with
   the word "done" for screen readers, as the page does). */
.bb-steps {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5rem * var(--bb-density)) calc(1.5rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bb-muted);
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-steps > li {
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
}

.bb-steps > li::before {
	content: "";
	flex: none;
	width: calc(0.7rem * var(--bb-density));
	height: calc(0.7rem * var(--bb-density));
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px currentColor;
}

.bb-steps > [data-done]::before {
	background: currentColor;
}

.bb-steps > [aria-current="step"] {
	color: var(--bb-ink);
	font-weight: var(--bb-weight-heading);
}

.bb-steps > [aria-current="step"]::before {
	background: currentColor;
	box-shadow: 0 0 0 3px var(--bb-bg), 0 0 0 5px currentColor;
}

/* ---- Schedules --------------------------------------------------------------- */

/* Lanes over a run of columns (days, hours). Each lane has a label and a
   track; spans on the track are placed by --bb-from and --bb-to, 0..1 across
   all the columns. A span's kind shows in its pattern: solid for booked,
   striped for blocked, dashed for proposed, outlined for open. The schedule
   keeps its columns and scrolls inside .bb-lanes-scroll on a narrow screen
   (give it tabindex="0", a role and a label, as the page does). */
.bb-lanes-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bb-muted) transparent;
}

.bb-lanes {
	--bb-label-w: calc(10rem * var(--bb-density));
	display: grid;
	min-width: calc(44rem * var(--bb-density));
	font-size: var(--bb-small);
}

.bb-lanes-head,
.bb-lane {
	display: grid;
	grid-template-columns: var(--bb-label-w) minmax(0, 1fr);
}

.bb-lanes-head {
	box-shadow: inset 0 -2px 0 var(--bb-track);
	color: var(--bb-muted);
	font-weight: var(--bb-weight-strong);
}

.bb-lanes-title {
	align-self: end;
	margin: 0;
	padding-block: calc(0.5rem * var(--bb-density));
	color: var(--bb-ink);
	font-weight: var(--bb-weight-heading);
}

.bb-lanes-cols {
	display: grid;
	grid-template-columns: repeat(var(--bb-cols, 7), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-lanes-cols > li {
	padding: calc(0.5rem * var(--bb-density)) calc(0.25rem * var(--bb-density));
	text-align: center;
	white-space: nowrap;
}

.bb-lane {
	box-shadow: inset 0 -2px 0 var(--bb-track);
}

.bb-lane-label {
	display: grid;
	align-content: center;
	margin: 0;
	padding: calc(0.5rem * var(--bb-density)) calc(0.75rem * var(--bb-density)) calc(0.5rem * var(--bb-density)) 0;
	font-weight: var(--bb-weight-heading);
	line-height: 1.25;
}

.bb-lane-label span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
}

/* The track: a column rule every 1/--bb-cols, with spans over them. */
.bb-lane-track {
	position: relative;
	min-height: calc(3.25rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	background: linear-gradient(to right, var(--bb-track) 0 2px, transparent 2px) 0 0 / calc(100% / var(--bb-cols, 7)) 100% repeat-x;
}

/* Booked: a solid span in the track color, with ink words (a checked pair on
   any field and in raised cards). */
.bb-span {
	position: absolute;
	top: calc(0.45rem * var(--bb-density));
	bottom: calc(0.45rem * var(--bb-density));
	left: calc(var(--bb-from, 0) * 100% + 3px);
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density));
	width: calc((var(--bb-to, 0) - var(--bb-from, 0)) * 100% - 6px);
	padding-inline: calc(0.6rem * var(--bb-density));
	overflow: hidden;
	border-radius: var(--bb-radius-button);
	background: var(--bb-track);
	color: var(--bb-ink);
	font-weight: var(--bb-weight-strong);
	white-space: nowrap;
}

/* The words give way first, with an ellipsis; a single badge or end note
   gives way after them, the same way; a row of badges keeps its size. */
.bb-span-label {
	flex: 0 100 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bb-span > .bb-badge {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	line-height: calc(1.625rem * var(--bb-density) - 4px);
}

.bb-span > .bb-badges {
	flex: none;
	flex-wrap: nowrap;
}

/* A note at the span's far end. */
.bb-span-end {
	flex: none;
	margin-inline-start: auto;
	font-weight: var(--bb-weight-body);
}

/* Blocked: stripes in the muted color, which is checked on grounds and on
   raised cards, with the words on a plate of the surface. */
.bb-span--blocked {
	justify-content: center;
	background: repeating-linear-gradient(135deg, var(--bb-muted) 0 1.5px, transparent 1.5px 8px);
}

.bb-span--blocked > .bb-span-label {
	padding: calc(0.1rem * var(--bb-density)) calc(0.4rem * var(--bb-density));
	border-radius: 2px;
	background: var(--bb-bg);
}

/* Proposed: a dashed outline on the surface. Not yet real. */
.bb-span--proposed {
	border: var(--bb-stroke-width) dashed currentColor;
	background: var(--bb-bg);
}

/* Open: a solid outline on the surface. A window that is free. */
.bb-span--open {
	justify-content: center;
	border: var(--bb-stroke-width) solid currentColor;
	background: var(--bb-bg);
}

/* ---- Ruler ------------------------------------------------------------------- */

/* A stretch of time with now and a deadline on it: the scale along the
   bottom, now as an ink line with a dot, the deadline as an inverse label on
   its own line, and the stretch between them named on a hairline. Positions
   are 0..1 across the scale: --bb-at for a mark, --bb-from and --bb-to for
   the stretch. */
.bb-ruler {
	position: relative;
	padding-top: calc(3rem * var(--bb-density));
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	font-variant-numeric: tabular-nums;
	container-type: inline-size;
}

.bb-ruler-scale {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: calc(0.35rem * var(--bb-density)) 0 0;
	list-style: none;
	border-top: var(--bb-stroke-width) solid currentColor;
}

.bb-ruler-scale > li {
	display: flex;
	justify-content: center;
	width: 0;
	white-space: nowrap;
}

.bb-ruler-span {
	position: absolute;
	top: calc(2.1rem * var(--bb-density));
	left: calc(var(--bb-from, 0) * 100%);
	display: flex;
	justify-content: center;
	width: calc((var(--bb-to, 0) - var(--bb-from, 0)) * 100%);
	height: 0;
	border-top: var(--bb-stroke-width) solid var(--bb-track);
}

.bb-ruler-span > span {
	padding-inline: calc(0.5rem * var(--bb-density));
	translate: 0 -55%;
	background: var(--bb-bg);
	line-height: 1;
	white-space: nowrap;
}

/* A mark is its line, at --bb-at; its words sit beside the line, on the right
   in the left half of the scale and on the left in the right half, so they
   never run off either end. */
.bb-ruler-now,
.bb-ruler-due {
	--bb-flip: min(1, round(down, var(--bb-at, 0) * 2, 1));
	position: absolute;
	top: 0;
	left: calc(var(--bb-at, 0) * 100%);
	width: 0;
	height: calc(calc(3rem * var(--bb-density)) + 1px);
	margin-inline-start: -1px;
	border-inline-start: var(--bb-stroke-width) solid var(--bb-ink);
	color: var(--bb-ink);
	line-height: 1.2;
	white-space: nowrap;
}

.bb-ruler-now > span,
.bb-ruler-due > span {
	position: absolute;
	top: 0;
	left: 0;
	translate: calc(var(--bb-flip) * -100%) 0;
}

.bb-ruler-now > span {
	padding-inline: calc(0.4rem * var(--bb-density));
}

.bb-ruler-now::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: -6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bb-ink);
}

.bb-ruler-due > span {
	padding: calc(0.2rem * var(--bb-density)) calc(0.45rem * var(--bb-density));
	border-radius: var(--bb-radius-chip);
	background: var(--bb-tint, var(--bb-ink));
	color: var(--bb-on-tint, var(--bb-bg));
}

/* Too narrow for every word: the stretch keeps its line, and every other
   hour steps aside (it stays in the accessibility tree). */
@container (max-width: 30rem) {
	.bb-ruler-span > span {
		display: none;
	}

	.bb-ruler-scale > li:nth-child(even) {
		opacity: 0;
	}
}

/* ============================================================================
   The agent layer, decisions and case parts (2026-09-24). From a
   construction demo's agentic screens: what the product's agent made or says
   (its chip, its mark, the run that found something, feedback and sources,
   its explainer, a thread with it), the decision it drafts (options with
   their value, a stage strip, the values on one axis), and the parts around
   a case (a ranked queue, documents, a guided viewer, a meeting it booked,
   the record an approval leaves) and the tiles of a live project (calendar,
   weather, library, phases).

   The agent wears its own roles in every field (foundation.mjs): agent and
   agent-2 (its gradient), on-agent, agent-wash, agent-line. Status stays a
   shape; a kit that spreads the status layer (_shared/status.mjs) also
   paints good, warning and bad, read here with today's colors as the
   fallback.
   ============================================================================ */

/* ---- The agent: chip, mark, live ---------------------------------------------- */

/* What the agent made or says. Its gradient is checked, as every color along
   it, against the words on it. Write the words in sentence case; a kit's
   label case (Clean & Drafted: capitals) is style. */
.bb-agent-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	width: max-content;
	min-height: calc(1.5rem * var(--bb-density));
	padding: calc(0.15rem * var(--bb-density)) calc(0.55rem * var(--bb-density));
	border-radius: var(--bb-radius-chip);
	background: linear-gradient(135deg, var(--bb-agent), var(--bb-agent-2));
	color: var(--bb-on-agent);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.03em);
	text-transform: var(--bb-label-case, none);
	white-space: nowrap;
}

/* The agent's mark: its gradient in a disc, a four-point spark in its words'
   color. The spark swells once every two seconds; nothing else moves. */
.bb-agent-mark {
	position: relative;
	display: inline-block;
	flex: none;
	width: calc(2rem * var(--bb-density));
	height: calc(2rem * var(--bb-density));
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bb-agent), var(--bb-agent-2));
}

.bb-agent-mark::after {
	content: "";
	position: absolute;
	inset: 26%;
	background: var(--bb-on-agent);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	animation: bb-spark 2s ease-out infinite;
}

.bb-agent-mark--sm {
	width: calc(1.5rem * var(--bb-density));
	height: calc(1.5rem * var(--bb-density));
}

.bb-agent-mark--lg {
	width: calc(2.75rem * var(--bb-density));
	height: calc(2.75rem * var(--bb-density));
}

@keyframes bb-spark {
	0%, 34%, 100% { scale: 1; }
	16% { scale: 1.14; }
}

/* A live line that is still working: the dot breathes. */
.bb-live--pulse::before {
	box-shadow: 0 0 0 0 var(--bb-series-1);
	animation: bb-breathe 2s ease-out infinite;
}

@keyframes bb-breathe {
	0% { box-shadow: 0 0 0 0 var(--bb-series-1); }
	70%, 100% { box-shadow: 0 0 0 calc(0.45rem * var(--bb-density)) transparent; }
}

/* ---- The run: what the agent did to find it -------------------------------------- */

/* A <details>: folded, one line ("Reviewed 14 documents · 4 agents");
   open, the steps and the agent that took each. A step is done (a dot),
   working (a half dot that turns) or pending (a dashed ring): the status
   glyphs' own shapes. data-state="working" on the run leads its summary
   with the turning half dot. */
.bb-run > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	width: max-content;
	cursor: pointer;
	list-style: none;
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.3 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

.bb-run > summary::-webkit-details-marker {
	display: none;
}

.bb-run > summary::after {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.9em;
	background: var(--bb-ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 32% 50%);
	transition: rotate var(--dur-fast) var(--ease-out);
}

.bb-run[open] > summary::after {
	rotate: 90deg;
}

.bb-run[data-state="working"] > summary::before,
.bb-run-steps > li::before {
	content: "";
	flex: none;
	width: 0.85em;
	height: 0.85em;
	border-radius: 50%;
}

.bb-run[data-state="working"] > summary::before,
.bb-run-steps > li[data-state="working"]::before {
	background: conic-gradient(var(--bb-series-1) 0 50%, transparent 0);
	box-shadow: inset 0 0 0 2px var(--bb-series-1);
	animation: bb-turn 3s linear infinite;
}

.bb-run-steps {
	display: grid;
	gap: calc(0.7rem * var(--bb-density));
	margin: calc(0.85rem * var(--bb-density)) 0 0;
	padding: 0;
	list-style: none;
}

.bb-run-steps > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 0 calc(0.65rem * var(--bb-density));
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-small);
	line-height: 1.35;
}

.bb-run-steps > li::before {
	translate: 0 0.1em;
}

.bb-run-steps > li[data-state="done"]::before {
	background: var(--bb-good, var(--bb-series-1));
}

.bb-run-steps > li[data-state="pending"] {
	color: var(--bb-muted);
}

.bb-run-steps > li[data-state="pending"]::before {
	border: var(--bb-stroke-width) dashed var(--bb-muted);
}

/* Which agent took the step, under it */
.bb-run-who {
	grid-column: 2;
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.3 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

@keyframes bb-turn {
	to { rotate: 1turn; }
}

/* ---- A finding, feedback and sources ------------------------------------------------ */

/* What the agent found: a status label, the finding, and where to act. */
.bb-finding {
	display: grid;
	gap: calc(0.5rem * var(--bb-density));
}

.bb-finding > p {
	margin: 0;
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-body);
	line-height: 1.45;
}

/* Inside a soft sentence, its strong words keep the ink: the figure or the
   headline of the finding is what the eye lands on. */
:is(.bb-finding > p, .bb-option-body > p, .bb-feed p, .bb-record > p) :is(strong, b) {
	color: var(--bb-ink);
}

/* Feedback on an answer: helpful, not helpful, run it again, and its
   sources. aria-pressed marks the one chosen, in ink. */
.bb-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.25rem * var(--bb-density));
}

.bb-feedback-button {
	display: inline-grid;
	place-items: center;
	width: calc(2.25rem * var(--bb-density));
	height: calc(2.25rem * var(--bb-density));
	padding: 0;
	border: 0;
	border-radius: var(--bb-radius-button);
	background: none;
	color: var(--bb-muted);
	cursor: pointer;
}

.bb-feedback-button svg {
	width: calc(1.1rem * var(--bb-density));
	height: calc(1.1rem * var(--bb-density));
}

.bb-feedback-button:hover,
.bb-feedback-button[aria-pressed="true"] {
	color: var(--bb-ink);
}

.bb-sources-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-left: auto;
	padding: calc(0.4rem * var(--bb-density)) 0;
	border: 0;
	background: none;
	color: var(--bb-ink);
	cursor: pointer;
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

.bb-sources-toggle::after {
	content: "";
	width: 0.9em;
	height: 0.55em;
	background: var(--bb-ink);
	clip-path: polygon(0 0, 50% 68%, 100% 0, 100% 32%, 50% 100%, 0 32%);
	transition: rotate var(--dur-fast) var(--ease-out);
}

.bb-sources-toggle[aria-expanded="true"]::after {
	rotate: 180deg;
}

.bb-sources {
	display: grid;
	gap: calc(0.6rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	line-height: 1.4;
}

.bb-sources b {
	display: block;
	color: var(--bb-ink);
	font-weight: var(--bb-weight-strong);
}

/* ---- The explainer and the thread ---------------------------------------------------- */

/* The agent's own panel: its tint, its line, its chip as the title. Words
   read as on a card (on-raised and raised-muted, checked on agent-wash). */
.bb-explainer {
	--bb-bg: var(--bb-agent-wash);
	--bb-ink: var(--bb-on-raised);
	--bb-soft: var(--bb-raised-soft);
	--bb-muted: var(--bb-raised-muted);
	--bb-link: var(--bb-raised-link, var(--bb-on-raised));
	display: grid;
	gap: calc(0.75rem * var(--bb-density));
	padding: calc(1rem * var(--bb-density)) calc(1.1rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-agent-line);
	border-radius: var(--bb-radius-card);
	background: var(--bb-agent-wash);
	color: var(--bb-on-raised);
	font-size: var(--bb-small);
	line-height: 1.5;
}

.bb-explainer > p {
	margin: 0;
}

/* A thread with the agent: your question in a bubble, its answer as text
   under its chip. */
.bb-thread {
	display: grid;
	gap: calc(1rem * var(--bb-density));
}

.bb-msg {
	margin: 0;
	font-size: var(--bb-small);
	line-height: 1.5;
}

.bb-msg--you {
	justify-self: end;
	max-width: 85%;
	padding: calc(0.55rem * var(--bb-density)) calc(0.9rem * var(--bb-density));
	border-radius: var(--bb-radius-card);
	background: var(--bb-chip);
	color: var(--bb-on-chip);
}

.bb-msg--agent {
	display: grid;
	justify-items: start;
	gap: calc(0.5rem * var(--bb-density));
	color: var(--bb-soft, var(--bb-ink));
}

/* The agent's quiet controls: correct it, pause it. Words in the label face. */
.bb-text-button {
	padding: calc(0.4rem * var(--bb-density)) calc(0.25rem * var(--bb-density));
	border: 0;
	background: none;
	color: var(--bb-link);
	cursor: pointer;
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

/* ---- Decisions: options, stage strip ------------------------------------------------- */

/* The options the agent drafted, each with its value on the right: named
   (net gain, net loss), signed, and led by a trend arrow whose sense is
   better or worse. The verdict leads the row: the agent chip for the one it
   recommends, a quiet badge for an alternative, the stopped status for one
   it advises against. */
.bb-options {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-option {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) auto;
	align-items: start;
	gap: calc(0.5rem * var(--bb-density)) calc(1rem * var(--bb-density));
	padding: calc(1rem * var(--bb-density)) 0;
	border-top: var(--bb-stroke-width) solid var(--bb-line);
}

.bb-option:first-child {
	border-top: 0;
}

.bb-option-title {
	margin: 0;
	color: var(--bb-ink);
	font-size: var(--bb-body);
	font-weight: var(--bb-weight-strong);
}

.bb-option-value {
	display: grid;
	justify-items: end;
	gap: calc(0.2rem * var(--bb-density));
	white-space: nowrap;
}

.bb-option-value > span:first-child {
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.2 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

.bb-option-value .bb-delta {
	font: var(--bb-weight-body) var(--bb-display-sm) / 1.1 var(--font-display);
	letter-spacing: var(--bb-tracking-heading);
}

.bb-option-body {
	grid-column: 2 / -1;
	display: grid;
	gap: calc(0.4rem * var(--bb-density));
}

.bb-option-body > p {
	margin: 0;
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-small);
}

.bb-option-body > .bb-option-note {
	max-width: var(--bb-measure-wide);
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	line-height: 1.45;
}

/* A stage strip: what an option does to each stage. The bar's pattern is its
   status (solid holds, striped at risk, a heavy bar fails) and the words say
   so; with the status layer, good, warning and bad. */
.bb-stage-strip {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: calc(0.4rem * var(--bb-density));
	margin: calc(0.25rem * var(--bb-density)) 0 0;
	padding: 0;
	list-style: none;
}

.bb-stage-strip > li {
	display: grid;
	align-content: start;
	gap: calc(0.25rem * var(--bb-density));
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	line-height: 1.35;
}

.bb-stage-strip > li::before {
	content: "";
	height: calc(0.3rem * var(--bb-density));
	margin-bottom: calc(0.2rem * var(--bb-density));
	border-radius: var(--bb-radius-pill);
	background: var(--bb-good, var(--bb-series-1));
}

.bb-stage-strip > li[data-status="risk"]::before {
	background: repeating-linear-gradient(135deg, var(--bb-warning, var(--bb-series-1)) 0 3px, transparent 3px 6px);
	box-shadow: inset 0 0 0 1px var(--bb-warning, var(--bb-series-1));
}

.bb-stage-strip > li[data-status="fail"]::before {
	height: calc(0.45rem * var(--bb-density));
	background: var(--bb-bad, var(--bb-ink));
}

.bb-stage-strip b {
	color: var(--bb-soft, var(--bb-ink));
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.2 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

/* ---- Decisions: the values on one axis -------------------------------------------- */

/* A diverging chart: every option's value on one axis, the zero drawn and
   labelled, each side named, and each bar split into what its value is built
   from, each part labelled over it. Positions are numbers in the markup:
   --bb-zero (0..1) on the chart; a part's --bb-from and --bb-to; a label's
   and a tick's --bb-at. Kept or created is series-1, lost is series-2; the
   second part of a bar is hatched; money spent is a dashed outline. */
.bb-diverge {
	--bb-zero: 0.5;
	display: grid;
	margin: 0;
}

.bb-diverge-row {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 5rem;
	align-items: end;
	gap: calc(0.75rem * var(--bb-density));
}

.bb-diverge-key {
	padding-bottom: calc(0.55rem * var(--bb-density));
	color: var(--bb-ink);
	font-weight: var(--bb-weight-strong);
}

.bb-diverge-value {
	padding-bottom: calc(0.5rem * var(--bb-density));
	color: var(--bb-ink);
	font-weight: var(--bb-weight-strong);
	text-align: right;
	white-space: nowrap;
}

.bb-diverge-plot {
	position: relative;
	height: calc(3rem * var(--bb-density));
	background:
		linear-gradient(90deg, transparent calc(var(--bb-zero) * 100% - 1px), var(--bb-ink) calc(var(--bb-zero) * 100% - 1px) calc(var(--bb-zero) * 100% + 1px), transparent calc(var(--bb-zero) * 100% + 1px));
}

.bb-diverge-seg {
	position: absolute;
	bottom: calc(0.5rem * var(--bb-density));
	left: calc(var(--bb-from) * 100%);
	width: calc((var(--bb-to) - var(--bb-from)) * 100% - 2px);
	height: calc(0.9rem * var(--bb-density));
	border-radius: 3px;
	background: var(--bb-series-1);
}

.bb-diverge-seg--more {
	background: repeating-linear-gradient(135deg, var(--bb-series-1) 0 1.5px, transparent 1.5px 4.5px);
	box-shadow: inset 0 0 0 1.5px var(--bb-series-1);
}

.bb-diverge-seg--spent {
	border: 1.5px dashed var(--bb-series-1);
	background: none;
}

.bb-diverge-seg--lost {
	background: var(--bb-series-2);
}

.bb-diverge-seg--lost-more {
	background: repeating-linear-gradient(135deg, var(--bb-series-2) 0 1.5px, transparent 1.5px 4.5px);
	box-shadow: inset 0 0 0 1.5px var(--bb-series-2);
}

.bb-diverge-label {
	position: absolute;
	bottom: calc(1.6rem * var(--bb-density));
	left: calc(var(--bb-at) * 100%);
	margin-left: 4px;
	color: var(--bb-soft, var(--bb-ink));
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.03em);
	text-transform: var(--bb-label-case, none);
	white-space: nowrap;
}

/* On the lost side a label ends at its part's zero-side edge. */
.bb-diverge-label--end {
	translate: calc(-100% - 8px) 0;
}

.bb-diverge-axis .bb-diverge-plot {
	height: calc(2.25rem * var(--bb-density));
	background: none;
}

.bb-diverge-tick {
	position: absolute;
	bottom: 0;
	left: calc(var(--bb-at) * 100%);
	translate: -50% 0;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-variant-numeric: tabular-nums;
}

.bb-diverge-tick--zero {
	color: var(--bb-ink);
	font-weight: var(--bb-weight-strong);
}

.bb-diverge-side {
	position: absolute;
	top: 0;
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
	white-space: nowrap;
}

.bb-diverge-side--lost {
	right: calc((1 - var(--bb-zero)) * 100% + 0.5rem);
}

.bb-diverge-side--kept {
	left: calc(var(--bb-zero) * 100% + 0.5rem);
}

/* ---- Case parts: a ranked queue, documents, people ------------------------------------- */

/* What needs doing, in order: the top item carries its badge and its
   action; the rest are a rank, a title, who, and when. */
.bb-queue {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-queue > li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: calc(0.3rem * var(--bb-density)) calc(0.9rem * var(--bb-density));
	padding: calc(0.9rem * var(--bb-density)) 0;
	border-top: var(--bb-stroke-width) solid var(--bb-line);
}

.bb-queue > li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bb-queue-rank {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-strong);
	font-variant-numeric: tabular-nums;
}

.bb-queue-title {
	margin: 0;
	color: var(--bb-ink);
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
}

.bb-queue-title + span {
	display: block;
	color: var(--bb-muted);
	font-size: var(--bb-caption);
}

.bb-queue-when {
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
	white-space: nowrap;
}

.bb-queue-top .bb-queue-rank {
	color: var(--bb-ink);
}

.bb-queue-top .bb-queue-title {
	font: var(--bb-weight-heading) var(--bb-display-sm) / var(--bb-leading-heading) var(--font-display);
	letter-spacing: var(--bb-tracking-heading);
}

.bb-queue-top > .bb-actions,
.bb-queue-top > .bb-queue-more {
	grid-column: 2 / -1;
}

/* A document: its id in the mono face, its name, and a flag for what is new. */
.bb-doc {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	padding: calc(0.5rem * var(--bb-density)) calc(0.75rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-line);
	border-radius: var(--bb-radius-button);
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-small);
	text-decoration: none;
}

.bb-doc-id {
	color: var(--bb-ink);
	font: var(--bb-weight-strong) var(--bb-caption) / 1 var(--font-mono);
}

.bb-doc-flag {
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

/* A person as a chip: their avatar, their name, their role under it. */
.bb-people {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-person {
	display: inline-flex;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
	padding: calc(0.3rem * var(--bb-density)) calc(0.9rem * var(--bb-density)) calc(0.3rem * var(--bb-density)) calc(0.3rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-line);
	border-radius: var(--bb-radius-pill);
	color: var(--bb-ink);
}

.bb-person-text {
	display: grid;
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	line-height: 1.2;
}

.bb-person-text > span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-body);
}

/* ---- Case parts: the guided viewer ------------------------------------------------ */

/* A document viewer with its explanation beside it: a head (the ids, the
   name, a flag, close), a side column, and the main stage with layer
   toggles over it. .bb-next rings the thing to do next, in the agent's line. */
.bb-viewer {
	container-type: inline-size;
	display: grid;
	gap: calc(1rem * var(--bb-density));
}

.bb-viewer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.5rem * var(--bb-density)) calc(0.9rem * var(--bb-density));
}

.bb-viewer-head .bb-doc-id {
	font-size: var(--bb-small);
}

.bb-viewer-head > :last-child {
	margin-left: auto;
}

.bb-viewer-body {
	display: grid;
	grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
	align-items: start;
	gap: calc(1.25rem * var(--bb-density));
}

.bb-viewer-side {
	display: grid;
	gap: calc(0.9rem * var(--bb-density));
}

.bb-viewer-stage {
	display: grid;
	gap: calc(0.75rem * var(--bb-density));
	min-width: 0;
}

.bb-layer-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.4rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-layer-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: calc(2rem * var(--bb-density));
	padding: 0 calc(0.7rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-ink);
	border-radius: var(--bb-radius-chip);
	background: var(--bb-bg);
	color: var(--bb-ink);
	cursor: pointer;
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.03em);
	text-transform: var(--bb-label-case, none);
}

.bb-layer-toggle[aria-pressed="true"] {
	background: var(--bb-ink);
	color: var(--bb-bg);
}

.bb-layer-toggle > .bb-agent-chip {
	min-height: 0;
	padding: 0.2em 0.45em;
}

.bb-next {
	box-shadow: 0 0 0 2px var(--bb-bg), 0 0 0 4px var(--bb-agent-line);
	animation: bb-nudge 1.6s ease-in-out infinite;
}

@keyframes bb-nudge {
	50% { box-shadow: 0 0 0 2px var(--bb-bg), 0 0 0 6px var(--bb-agent-line); }
}

/* ---- Case parts: a meeting the agent booked, the record an approval leaves ---------- */

.bb-event {
	display: grid;
	gap: calc(0.9rem * var(--bb-density));
}

.bb-event-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
}

.bb-event-body {
	display: flex;
	align-items: center;
	gap: calc(1rem * var(--bb-density));
}

/* A date as a block: the inverse, like a filled badge. */
.bb-date {
	display: grid;
	justify-items: center;
	flex: none;
	min-width: calc(4rem * var(--bb-density));
	padding: calc(0.45rem * var(--bb-density)) 0;
	border-radius: var(--bb-radius-card);
	background: var(--bb-ink);
	color: var(--bb-bg);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.2 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

.bb-date b {
	font: var(--bb-weight-body) var(--bb-display-sm) / 1.1 var(--font-display);
	letter-spacing: 0;
}

.bb-event-title {
	margin: 0;
	color: var(--bb-ink);
	font-size: var(--bb-body);
	font-weight: var(--bb-weight-strong);
}

.bb-event-title + p {
	margin: 0;
	color: var(--bb-muted);
	font-size: var(--bb-small);
}

/* The record: what was approved, when, and who heard. A done glyph leads. */
.bb-record {
	display: grid;
	gap: calc(0.4rem * var(--bb-density));
	padding: calc(1rem * var(--bb-density)) calc(1.1rem * var(--bb-density));
	border-radius: var(--bb-radius-card);
}

.bb-record > p {
	margin: 0;
	color: var(--bb-soft, inherit);
	font-size: var(--bb-small);
	line-height: 1.5;
}

/* ---- Project tiles: calendar, weather, library, phases -------------------------------- */

/* A month: day letters, then days. data-kind marks a day: past and weekend
   step back; today is ringed; key is the inverse (a deadline); event is
   ringed in the agent's line (something it booked). */
.bb-calendar {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-caption);
	font-variant-numeric: tabular-nums;
	line-height: calc(1.75rem * var(--bb-density));
	text-align: center;
}

.bb-calendar > li {
	border-radius: 50%;
}

.bb-calendar > li[data-kind="dow"] {
	color: var(--bb-muted);
	font-family: var(--bb-font-label, var(--font-body));
}

.bb-calendar > li[data-kind="past"],
.bb-calendar > li[data-kind="weekend"] {
	color: var(--bb-muted);
}

.bb-calendar > li[data-kind="today"] {
	box-shadow: inset 0 0 0 var(--bb-stroke-width) var(--bb-ink);
	color: var(--bb-ink);
}

.bb-calendar > li[data-kind="key"] {
	background: var(--bb-ink);
	color: var(--bb-bg);
	font-weight: var(--bb-weight-strong);
}

.bb-calendar > li[data-kind="event"] {
	box-shadow: inset 0 0 0 2px var(--bb-agent-line);
}

/* Weather: now, then the next days. Glyphs are line icons in the ink. */
.bb-weather-now {
	display: flex;
	align-items: center;
	gap: calc(0.6rem * var(--bb-density));
	margin: 0;
	color: var(--bb-ink);
	font: var(--bb-weight-body) var(--bb-display-md) / 1 var(--font-display);
}

.bb-weather-now svg {
	width: calc(2rem * var(--bb-density));
	height: calc(2rem * var(--bb-density));
}

.bb-weather-days {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bb-soft, var(--bb-ink));
	font-size: var(--bb-caption);
	text-align: center;
}

.bb-weather-days > li {
	display: grid;
	justify-items: center;
	gap: calc(0.3rem * var(--bb-density));
}

.bb-weather-days b {
	color: var(--bb-muted);
	font-family: var(--bb-font-label, var(--font-body));
}

.bb-weather-days svg {
	width: calc(1.1rem * var(--bb-density));
	height: calc(1.1rem * var(--bb-density));
}

/* A library: kinds of record and how many. */
.bb-files {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: calc(0.8rem * var(--bb-density)) calc(1rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-files > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0 calc(0.6rem * var(--bb-density));
	color: var(--bb-ink);
	font-size: var(--bb-small);
	font-weight: var(--bb-weight-strong);
	line-height: 1.3;
}

.bb-files > li::before {
	content: "";
	grid-row: span 2;
	width: calc(1rem * var(--bb-density));
	height: calc(1.25rem * var(--bb-density));
	border: var(--bb-stroke-width) solid var(--bb-ink);
	border-radius: 2px 6px 2px 2px;
}

.bb-files span {
	color: var(--bb-muted);
	font-size: var(--bb-caption);
	font-weight: var(--bb-weight-body);
}

/* Phases: done in series-1, the one under way half filled, the rest on the
   track, each named under its bar. */
.bb-phases {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: calc(0.6rem * var(--bb-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-phases > li {
	display: grid;
	align-content: start;
	gap: calc(0.3rem * var(--bb-density));
	color: var(--bb-muted);
	font: var(--bb-label-weight, var(--bb-weight-strong)) var(--bb-caption) / 1.3 var(--bb-font-label, var(--font-body));
	letter-spacing: var(--bb-label-tracking, 0.08em);
	text-transform: uppercase;
}

.bb-phases > li::before {
	content: "";
	height: calc(0.4rem * var(--bb-density));
	margin-bottom: calc(0.25rem * var(--bb-density));
	border-radius: var(--bb-radius-pill);
	background: var(--bb-track);
}

.bb-phases > li[data-state="done"],
.bb-phases > li[data-state="now"] {
	color: var(--bb-ink);
}

.bb-phases > li[data-state="done"]::before {
	background: var(--bb-series-1);
}

.bb-phases > li[data-state="now"]::before {
	background: linear-gradient(90deg, var(--bb-series-1) 50%, var(--bb-track) 50%);
}

.bb-phases span {
	color: var(--bb-muted);
	font: var(--bb-weight-body) var(--bb-caption) / 1.3 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
}

/* Too narrow for a side column: the viewer stacks. */
@container (max-width: 40rem) {
	.bb-viewer-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 40rem) {
	.bb-option {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bb-option > :first-child {
		grid-column: 1 / -1;
	}

	.bb-option-body {
		grid-column: 1 / -1;
	}

	.bb-stage-strip,
	.bb-phases {
		grid-auto-flow: row;
	}
}

/* The agent's motion stops when the reader asks for less. */
@media (prefers-reduced-motion: reduce) {
	.bb-agent-mark::after,
	.bb-live--pulse::before,
	.bb-run[data-state="working"] > summary::before,
	.bb-run-steps > li[data-state="working"]::before,
	.bb-next {
		animation: none;
	}
}

/* ---- Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bb-marker--settle {
		animation: none;
	}

	.bb-button,
	.bb-icon-button,
	.bb-caret-link::after {
		transition: none;
	}
}