/*!
 * @be-partner-labs/ds v1.8.0 — bpl-ds
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/bpl-ds.min.css">
 * npm:  @import "@be-partner-labs/ds/bpl-ds";
 * Docs: https://ds.bepartnerlabs.com/components/bpl-ds/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

/*
 * Be Partner DS — definition-first, agent-ready design system
 * Agent instructions: https://ds.bepartnerlabs.com/AGENTS.md
 * Implementation skill: https://ds.bepartnerlabs.com/skills/bpl-ds-implement/SKILL.md
 * Verification skill:   https://ds.bepartnerlabs.com/skills/bpl-ds-verify/SKILL.md
 * Full documentation:   https://ds.bepartnerlabs.com
 */

/*
 * Be Partner DS — definition-first, agent-ready design system
 * Agent instructions: https://ds.bepartnerlabs.com/AGENTS.md
 * Implementation skill: https://ds.bepartnerlabs.com/skills/bpl-ds-implement/SKILL.md
 * Verification skill:   https://ds.bepartnerlabs.com/skills/bpl-ds-verify/SKILL.md
 * Full documentation:   https://ds.bepartnerlabs.com
 */

/* ── @property — enables smooth animated transitions ─────── */
@property --bp-primary {
	syntax: '<color>';
	initial-value: #5fcb9f;
	inherits: true;
}
@property --bp-color-bg {
	syntax: '<color>';
	initial-value: #f8f6f2;
	inherits: true;
}
@property --bp-color-bg-subtle {
	syntax: '<color>';
	initial-value: #f2efe9;
	inherits: true;
}
@property --bp-color-bg-elevated {
	syntax: '<color>';
	initial-value: #ffffff;
	inherits: true;
}
@property --bp-color-text {
	syntax: '<color>';
	initial-value: #181715;
	inherits: true;
}
@property --bp-color-text-muted {
	syntax: '<color>';
	initial-value: #6b6760;
	inherits: true;
}
@property --bp-color-text-inverse {
	syntax: '<color>';
	initial-value: #f2eee6;
	inherits: true;
}
@property --bp-color-border {
	syntax: '<color>';
	initial-value: #e5e0d8;
	inherits: true;
}

@layer bp-tokens {
	:root {
		/* ═══════════════════════════════════════════════════════
       CLIENT SURFACE — set these, everything else adapts
       ═══════════════════════════════════════════════════════ */
		--bp-primary: #5fcb9f; /* mint green — BPL brand */
		--bp-radius: 0.625rem; /* base radius — all components scale from this */

		/* ── Primary scale — color-mix baseline, upgraded via @supports ── */
		--bp-primary-hover: color-mix(in srgb, var(--bp-primary) 82%, black);
		--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, white);
		--bp-primary-fg: color-mix(in srgb, var(--bp-primary) 30%, black);
	}

	@supports (color: oklch(from red l c h)) {
		:root {
			--bp-primary-hover: oklch(from var(--bp-primary) calc(l - 0.08) c h);
			--bp-primary-subtle: oklch(from var(--bp-primary) calc(l + 0.28) c h);
			--bp-primary-fg: oklch(from var(--bp-primary) 0.2 c h);
		}
	}

	:root {
		/* ── Radius scale ────────────────────────────────────── */
		--bp-radius-sm: calc(var(--bp-radius) * 0.5);
		--bp-radius-md: var(--bp-radius);
		--bp-radius-lg: calc(var(--bp-radius) * 1.5);
		--bp-radius-xl: calc(var(--bp-radius) * 2);
		--bp-radius-full: 9999px;

		/* ── Surface tokens (light mode) ─────────────────────── */
		--bp-color-bg: #f8f6f2;
		--bp-color-bg-subtle: #f2efe9;
		--bp-color-bg-elevated: #ffffff;
		--bp-color-text: #181715;
		--bp-color-text-muted: #6b6760;
		--bp-color-text-inverse: #f2eee6;
		--bp-color-border: #e5e0d8;

		/* ── Feedback ─────────────────────────────────────────── */
		--bp-color-success: #2e9e72;
		--bp-color-warning: #c97a3d;
		--bp-color-error: #b14a3a;
		--bp-color-error-surface: #b14a3a;
		--bp-color-info: #3b82f6;

		/* ── Focus ring ───────────────────────────────────────── */
		--bp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bp-primary) 40%, transparent);

		/* ── Typography ───────────────────────────────────────── */
		--bp-font-sans: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
		--bp-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

		--bp-font-weight-regular: 400;
		--bp-font-weight-medium: 500;
		--bp-font-weight-semibold: 600;
		--bp-font-weight-bold: 700;

		--bp-leading-tight: 1.25;
		--bp-leading-normal: 1.5;
		--bp-leading-loose: 1.75;

		/* Fluid type scale (360px → 1200px viewport) */
		--bp-text-xs: clamp(0.694rem, 0.65rem + 0.22vw, 0.8rem);
		--bp-text-sm: clamp(0.833rem, 0.78rem + 0.27vw, 0.95rem);
		--bp-text-base: clamp(1rem, 0.93rem + 0.33vw, 1.125rem);
		--bp-text-lg: clamp(1.2rem, 1.11rem + 0.44vw, 1.35rem);
		--bp-text-xl: clamp(1.44rem, 1.31rem + 0.63vw, 1.8rem);
		--bp-text-2xl: clamp(1.728rem, 1.54rem + 0.94vw, 2.4rem);
		--bp-text-3xl: clamp(2.074rem, 1.82rem + 1.27vw, 3.2rem);
		--bp-text-4xl: clamp(2.488rem, 2.13rem + 1.79vw, 4.2rem);
		--bp-text-5xl: clamp(2.986rem, 2.5rem + 2.43vw, 5.6rem);

		/* ── Spacing (base 4px) ───────────────────────────────── */
		--bp-space-1: 0.25rem;
		--bp-space-2: 0.5rem;
		--bp-space-3: 0.75rem;
		--bp-space-4: 1rem;
		--bp-space-5: 1.25rem;
		--bp-space-6: 1.5rem;
		--bp-space-8: 2rem;
		--bp-space-10: 2.5rem;
		--bp-space-12: 3rem;
		--bp-space-16: 4rem;
		--bp-space-20: 5rem;
		--bp-space-24: 6rem;

		/* ── Shadows ──────────────────────────────────────────── */
		--bp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--bp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--bp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		--bp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

		/* ── Motion ───────────────────────────────────────────── */
		--bp-duration-fast: 120ms;
		--bp-duration-normal: 220ms;
		--bp-duration-slow: 380ms;
		--bp-ease: cubic-bezier(0.4, 0, 0.2, 1);
		--bp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

		/* Smooth theme switching */
		transition:
			--bp-color-bg var(--bp-duration-normal) var(--bp-ease),
			--bp-color-bg-subtle var(--bp-duration-normal) var(--bp-ease),
			--bp-color-bg-elevated var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text-muted var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text-inverse var(--bp-duration-normal) var(--bp-ease),
			--bp-color-border var(--bp-duration-normal) var(--bp-ease);
	}

	/* ── Dark mode ────────────────────────────────────────────── */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme='light']) {
			--bp-primary: #6fd9ae;
			--bp-color-bg: #16140f;
			--bp-color-bg-subtle: #1e1c17;
			--bp-color-bg-elevated: #242118;
			--bp-color-text: #f2eee6;
			--bp-color-text-muted: #9e9a93;
			--bp-color-text-inverse: #181715;
			--bp-color-border: #2d3b30;
			--bp-color-success: #4dc896;
			--bp-color-warning: #e2a06a;
			--bp-color-error: #e07f6e;
			--bp-color-error-surface: #a84434;
			--bp-color-info: #60a5fa;
			--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, #16140f);
		}
	}

	@supports (color: oklch(from red l c h)) {
		@media (prefers-color-scheme: dark) {
			:root:not([data-theme='light']) {
				--bp-primary-subtle: oklch(from var(--bp-primary) calc(l - 0.3) c h);
				--bp-primary-fg: oklch(from var(--bp-primary) 0.15 c h);
			}
		}
		[data-theme='dark'] {
			--bp-primary-subtle: oklch(from var(--bp-primary) calc(l - 0.3) c h);
			--bp-primary-fg: oklch(from var(--bp-primary) 0.15 c h);
		}
	}

	[data-theme='dark'] {
		--bp-primary: #6fd9ae;
		--bp-color-bg: #16140f;
		--bp-color-bg-subtle: #1e1c17;
		--bp-color-bg-elevated: #242118;
		--bp-color-text: #f2eee6;
		--bp-color-text-muted: #9e9a93;
		--bp-color-text-inverse: #181715;
		--bp-color-border: #2d3b30;
		--bp-color-success: #4dc896;
		--bp-color-warning: #e2a06a;
		--bp-color-error: #e07f6e;
		--bp-color-info: #60a5fa;
		--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, #16140f);
	}

	[data-theme='light'] {
		--bp-primary: #5fcb9f;
		--bp-color-bg: #f8f6f2;
		--bp-color-bg-subtle: #f2efe9;
		--bp-color-bg-elevated: #ffffff;
		--bp-color-text: #181715;
		--bp-color-text-muted: #6b6760;
		--bp-color-text-inverse: #f2eee6;
		--bp-color-border: #e5e0d8;
		--bp-color-success: #2e9e72;
		--bp-color-warning: #c97a3d;
		--bp-color-error: #b14a3a;
		--bp-color-info: #3b82f6;
	}
}
@layer bp-reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		font-family: var(--bp-font-sans);
		font-size: 100%;
		line-height: var(--bp-leading-normal);
		color: var(--bp-color-text);
		background-color: var(--bp-color-bg);
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		hanging-punctuation: first last;
	}

	body {
		min-height: 100dvh;
	}

	img,
	video,
	svg {
		display: block;
		max-width: 100%;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: var(--bp-leading-tight);
		font-weight: var(--bp-font-weight-bold);
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
	}

	a {
		color: var(--bp-color-brand);
		text-decoration-skip-ink: auto;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}
@layer bp-grid {
	/**
	 * .bp-content-grid
	 * Named-line grid with five zones: full-width, breakout, popout, content (default).
	 * Public API:
	 *   --padding-inline        Horizontal gutter. Default: clamp(1.25rem, 1vw + 1rem, 2rem)
	 *   --content-max-width     Max width of the content zone. Default: 72rem (1152px)
	 *   --popout-max-width      Max width of the popout zone.  Default: 60rem (960px)
	 *   --breakout-max-width    Max width of the breakout zone. Default: 90rem (1440px)
	 *
	 * Child classes:
	 *   (none)       → content zone (default)
	 *   .popout      → popout zone (~960px) — quotes, CTAs, mid-size media
	 *   .breakout    → breakout zone (~1440px) — grids, covers, video
	 *   .full-width  → full viewport width, inherits grid columns for sub-content
	 */
	.bp-content-grid {
		--_padding-inline: var(--padding-inline, clamp(1.25rem, 1vw + 1rem, 2rem));
		--_content-max-width: var(--content-max-width, 72rem);
		--_popout-max-width: var(--popout-max-width, 60rem);
		--_breakout-max-width: var(--breakout-max-width, 90rem);
		--_popout-size: calc((var(--_popout-max-width) - var(--_content-max-width)) / 2);
		--_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);

		display: grid;
		grid-template-columns:
			[full-width-start]
			minmax(var(--_padding-inline), 1fr)
			[breakout-start]
			minmax(0, var(--_breakout-size))
			[popout-start]
			minmax(0, var(--_popout-size))
			[content-start]
			min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
			[content-end]
			minmax(0, var(--_popout-size))
			[popout-end]
			minmax(0, var(--_breakout-size))
			[breakout-end]
			minmax(var(--_padding-inline), 1fr)
			[full-width-end];
	}

	/* Default: all direct children land in the content zone */
	.bp-content-grid > :not(.popout, .breakout, .full-width),
	.full-width > :not(.popout, .breakout, .full-width) {
		grid-column: content;
	}

	.bp-content-grid > .popout,
	.full-width > .popout {
		grid-column: popout;
	}

	.bp-content-grid > .breakout,
	.full-width > .breakout {
		grid-column: breakout;
	}

	/* Full-width inherits the parent grid columns so its own children can use zones */
	.bp-content-grid > .full-width {
		grid-column: full-width;
		display: grid;
		grid-template-columns: inherit;
	}

	/**
	 * .bp-container
	 * Declares an inline-size container so child components can use @container queries.
	 * Drop this on any wrapper to opt child components into container-aware layouts.
	 */
	.bp-container {
		container-type: inline-size;
	}
}
@layer bp-components {
	/**
	 * .bp-accordion
	 * Native <details>/<summary> accordion — zero JS required.
	 * Subtle style: transparent bg, bottom divider, brand left border when open.
	 * Public API:
	 *   --accordion-background           Background color
	 *   --accordion-radius       Border radius
	 *   --accordion-border       Item border
	 *   --accordion-accent       Left border color when open
	 */
	.bp-accordion {
		--_background: var(--accordion-background, transparent);
		--_radius: var(--accordion-radius, 0px);
		--_border: var(--accordion-border, 1px solid var(--bp-color-border));
		--_accent: var(--accordion-accent, var(--bp-primary));

		display: flex;
		flex-direction: column;
	}

	.bp-accordion__item {
		background-color: var(--_background);
		border-bottom: var(--_border);
		border-inline-start: 3px solid transparent;
		transition: border-inline-start-color var(--bp-duration-normal) var(--bp-ease);
	}

	.bp-accordion__item:first-child {
		border-top: var(--_border);
	}

	.bp-accordion__item[open] {
		border-inline-start-color: var(--_accent);
	}

	/* Hide native marker */
	.bp-accordion__summary {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--bp-space-4) var(--bp-space-5);
		background-color: transparent;
		cursor: pointer;
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
		gap: var(--bp-space-4);
		user-select: none;
		transition:
			color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-accordion__summary::-webkit-details-marker {
		display: none;
	}

	.bp-accordion__summary::marker {
		content: none;
		display: none;
	}

	.bp-accordion__item[open] .bp-accordion__summary {
		color: var(--_accent);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-accordion__summary:hover {
		background-color: var(--bp-color-bg-subtle);
	}

	.bp-accordion__summary:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Chevron arrow — matches text color */
	.bp-accordion__summary::after {
		content: '';
		flex-shrink: 0;
		width: 1em;
		height: 1em;
		opacity: 0.5;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		transition:
			transform var(--bp-duration-normal) var(--bp-ease),
			opacity var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-accordion__item[open] .bp-accordion__summary::after {
		transform: rotate(-180deg);
		opacity: 1;
	}

	/* Body panel */
	.bp-accordion__body {
		padding: var(--bp-space-2) var(--bp-space-5) var(--bp-space-5);
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-loose);
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease);
	}

	@starting-style {
		.bp-accordion__item[open] > .bp-accordion__body {
			opacity: 0;
			transform: translateY(-0.4rem);
		}
	}

	/* cqi fluid type */
	@container (inline-size > 0) {
		.bp-accordion__summary {
			font-size: clamp(var(--bp-text-sm), 3cqi, var(--bp-text-base));
		}
		.bp-accordion__body {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-avatar
	 * Circular user avatar rendered on a native <img>.
	 * Supports image, CSS-only initials fallback, size variants, and avatar groups.
	 * Public API:
	 *   --avatar-size           Width and height of the avatar
	 *   --avatar-radius         Border radius (circle by default)
	 *   --avatar-font-size      Initials text size
	 *   --avatar-font-weight    Initials text weight
	 *   --avatar-background             Fallback background color
	 *   --avatar-color          Initials text color
	 *   --avatar-border-width   Ring width (used in groups)
	 *   --avatar-border-color   Ring color (used in groups)
	 *   --avatar-group-overlap  Negative margin for stacking in groups
	 *   --avatar-overflow-background    Background for overflow count avatar
	 *   --avatar-overflow-color Text color for overflow count avatar
	 */
	.bp-avatar {
		--_size: var(--avatar-size, 2.5rem);
		--_radius: var(--avatar-radius, 9999px);
		--_font-size: var(--avatar-font-size, calc(var(--avatar-size, 2.5rem) * 0.4));
		--_font-weight: var(--avatar-font-weight, 600);
		--_background: var(--avatar-background, var(--bp-color-neutral-200, #e5e7eb));
		--_color: var(--avatar-color, var(--bp-color-neutral-700, #374151));
		--_border-width: var(--avatar-border-width, 2px);
		--_border-color: var(--avatar-border-color, var(--bp-color-bg, #fff));

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--_size);
		height: var(--_size);
		border-radius: var(--_radius);
		background-color: var(--_background);
		color: var(--_color);
		font-size: var(--_font-size);
		font-weight: var(--_font-weight);
		font-family: inherit;
		line-height: 1;
		object-fit: cover;
		flex-shrink: 0;
		vertical-align: middle;
		text-align: center;
	}

	/* ── Size variants ── */
	.bp-avatar--xs {
		--avatar-size: 1.5rem;
	}

	.bp-avatar--sm {
		--avatar-size: 2rem;
	}

	.bp-avatar--lg {
		--avatar-size: 3rem;
	}

	.bp-avatar--xl {
		--avatar-size: 4rem;
	}

	/* ── Shape modifier ── */
	.bp-avatar--square {
		--avatar-radius: 0.375rem;
	}

	/* ── Avatar group ── */
	.bp-avatar-group {
		display: inline-flex;
		flex-direction: row;
		isolation: isolate;
	}

	.bp-avatar-group .bp-avatar {
		margin-inline-start: var(--avatar-group-overlap, -0.75rem);
		box-sizing: content-box;
		border: var(--_border-width) solid var(--_border-color);
	}

	.bp-avatar-group .bp-avatar:first-child {
		margin-inline-start: 0;
	}

	/* ── Overflow count avatar ── */
	.bp-avatar--overflow {
		--avatar-background: var(--avatar-overflow-background, var(--bp-color-neutral-300, #d1d5db));
		--avatar-color: var(--avatar-overflow-color, var(--bp-color-neutral-800, #1f2937));
	}
}
@layer bp-components {
	/**
	 * .bp-alert
	 * Inline feedback message for persistent contextual notices.
	 * Public API:
	 *   --alert-background             Background (color-mix tint)
	 *   --alert-color          Text color
	 *   --alert-border-color   Border color
	 *   --alert-border-width   Border width (default: 1px)
	 *   --alert-border-radius  Border radius
	 *   --alert-padding-x      Horizontal padding
	 *   --alert-padding-y      Vertical padding
	 *   --alert-gap            Gap between icon, content, and close button
	 *   --alert-accent-width   Left stripe width (default: 4px)
	 *   --alert-accent-color   Left stripe color
	 *   --alert-title-size     Font size of title
	 *   --alert-body-size      Font size of body
	 */
	.bp-alert {
		--_background: var(--alert-background, var(--bp-color-bg-subtle));
		--_color: var(--alert-color, var(--bp-color-text));
		--_border-color: var(--alert-border-color, var(--bp-color-border));
		--_border-width: var(--alert-border-width, 1px);
		--_border-radius: var(--alert-border-radius, var(--bp-radius-md));
		--_padding-x: var(--alert-padding-x, var(--bp-space-4));
		--_padding-y: var(--alert-padding-y, var(--bp-space-3));
		--_gap: var(--alert-gap, var(--bp-space-3));
		--_accent-width: var(--alert-accent-width, 4px);
		--_accent-color: var(--alert-accent-color, var(--_border-color));

		position: relative;
		display: flex;
		align-items: flex-start;
		gap: var(--_gap);
		padding: var(--_padding-y) var(--_padding-x);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border-width) solid var(--_border-color);
		border-radius: var(--_border-radius);
		container-type: inline-size;
	}

	/* ── Dismissed state ── */
	.bp-alert[hidden] {
		display: none;
	}

	/* ── Semantic variants ── */
	.bp-alert--info {
		--alert-background: color-mix(in srgb, var(--bp-color-info) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-info) 30%, transparent);
		--alert-accent-color: var(--bp-color-info);
	}

	.bp-alert--success {
		--alert-background: color-mix(in srgb, var(--bp-color-success) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-success) 30%, transparent);
		--alert-accent-color: var(--bp-color-success);
	}

	.bp-alert--warning {
		--alert-background: color-mix(in srgb, var(--bp-color-warning) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-warning) 30%, transparent);
		--alert-accent-color: var(--bp-color-warning);
	}

	.bp-alert--error {
		--alert-background: color-mix(in srgb, var(--bp-color-error) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-error) 30%, transparent);
		--alert-accent-color: var(--bp-color-error);
	}

	/* ── Accent stripe modifier ──
     Renders a colored left border stripe via ::before.
     Combine with a semantic variant: bp-alert--info bp-alert--accent */
	.bp-alert--accent {
		border-left-color: transparent;
		padding-left: calc(var(--_padding-x) + var(--_accent-width));
	}

	.bp-alert--accent::before {
		content: '';
		position: absolute;
		inset-block: 0;
		left: 0;
		width: var(--_accent-width);
		background-color: var(--_accent-color);
		border-radius: var(--_border-radius) 0 0 var(--_border-radius);
	}

	/* ── Sub-elements ── */
	.bp-alert__icon {
		font-size: var(--bp-text-lg);
		line-height: 1;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.bp-alert__content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-alert__title {
		margin: 0;
		font-size: var(--alert-title-size, var(--bp-text-sm));
		font-weight: var(--bp-font-weight-semibold);
		color: var(--_color);
		line-height: var(--bp-leading-normal);
	}

	.bp-alert__body {
		margin: 0;
		font-size: var(--alert-body-size, var(--bp-text-sm));
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-normal);
	}

	/* ── Close button ── */
	.bp-alert__close {
		display: grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		flex-shrink: 0;
		background: none;
		border: none;
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		font-size: var(--bp-text-base);
		line-height: 1;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
		margin-top: -2px;
		margin-right: -4px;
	}

	.bp-alert__close:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text);
	}

	.bp-alert__close:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}
}
@layer bp-components {
	/**
	 * .bp-badge
	 * Inline label for status, counts, and categories.
	 * Public API:
	 *   --badge-background       Background color
	 *   --badge-color    Text color
	 *   --badge-border   Border (default: transparent)
	 *   --badge-radius   Border radius
	 */
	.bp-badge {
		--_background: var(--badge-background, var(--bp-primary-subtle));
		--_color: var(--badge-color, var(--bp-primary-fg));
		--_border: var(--badge-border, 1px solid transparent);
		--_radius: var(--badge-radius, var(--bp-radius-full));

		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: 0.2em 0.6em;
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-semibold);
		line-height: 1.4;
		white-space: nowrap;
		vertical-align: middle;
	}

	/* ── Semantic solid variants ── */
	.bp-badge--primary {
		--badge-background: var(--bp-primary);
		--badge-color: var(--bp-primary-fg);
	}

	.bp-badge--success {
		--badge-background: var(--bp-color-success);
		--badge-color: color-mix(in srgb, var(--bp-color-success) 20%, black);
	}

	.bp-badge--warning {
		--badge-background: var(--bp-color-warning);
		--badge-color: color-mix(in srgb, var(--bp-color-warning) 20%, black);
	}

	.bp-badge--error {
		--badge-background: var(--bp-color-error);
		--badge-color: #fff;
	}

	.bp-badge--info {
		--badge-background: var(--bp-color-info);
		--badge-color: #fff;
	}

	.bp-badge--neutral {
		--badge-background: var(--bp-color-bg-subtle);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Style modifier: subtle ──
     Low-opacity tinted background, colored text.
     Combine with a semantic variant: bp-badge--success bp-badge--subtle */
	.bp-badge--subtle.bp-badge--primary {
		--badge-background: var(--bp-primary-subtle);
		--badge-color: var(--bp-primary-fg);
	}

	.bp-badge--subtle.bp-badge--success {
		--badge-background: color-mix(in srgb, var(--bp-color-success) 15%, transparent);
		--badge-color: var(--bp-color-success);
	}

	.bp-badge--subtle.bp-badge--warning {
		--badge-background: color-mix(in srgb, var(--bp-color-warning) 15%, transparent);
		--badge-color: var(--bp-color-warning);
	}

	.bp-badge--subtle.bp-badge--error {
		--badge-background: color-mix(in srgb, var(--bp-color-error) 15%, transparent);
		--badge-color: var(--bp-color-error);
	}

	.bp-badge--subtle.bp-badge--info {
		--badge-background: color-mix(in srgb, var(--bp-color-info) 15%, transparent);
		--badge-color: var(--bp-color-info);
	}

	.bp-badge--subtle.bp-badge--neutral {
		--badge-background: color-mix(in srgb, var(--bp-color-text-muted) 12%, transparent);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Style modifier: outline ──
     Transparent background, colored border + text.
     Combine with a semantic variant: bp-badge--error bp-badge--outline */
	.bp-badge--outline {
		--badge-background: transparent;
	}

	.bp-badge--outline.bp-badge--primary {
		--badge-border: 1px solid var(--bp-primary);
		--badge-color: var(--bp-primary);
	}

	.bp-badge--outline.bp-badge--success {
		--badge-border: 1px solid var(--bp-color-success);
		--badge-color: var(--bp-color-success);
	}

	.bp-badge--outline.bp-badge--warning {
		--badge-border: 1px solid var(--bp-color-warning);
		--badge-color: var(--bp-color-warning);
	}

	.bp-badge--outline.bp-badge--error {
		--badge-border: 1px solid var(--bp-color-error);
		--badge-color: var(--bp-color-error);
	}

	.bp-badge--outline.bp-badge--info {
		--badge-border: 1px solid var(--bp-color-info);
		--badge-color: var(--bp-color-info);
	}

	.bp-badge--outline.bp-badge--neutral {
		--badge-border: 1px solid var(--bp-color-border);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Dot indicator ──
     Status dot inside the badge. Color inherits from the semantic variant.
     Usage: <span class="bp-badge bp-badge--success">
              <span class="bp-badge__dot" aria-hidden="true"></span>Active
            </span> */
	.bp-badge__dot {
		display: inline-block;
		width: 0.45em;
		height: 0.45em;
		border-radius: var(--bp-radius-full);
		background-color: currentColor;
		flex-shrink: 0;
	}

	/* ── Size modifier: lg ──
     Slightly larger for standalone / prominent use. */
	.bp-badge--lg {
		font-size: var(--bp-text-sm);
		padding: 0.3em 0.75em;
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --breadcrumb-separator: "/"     separator character
	 * --breadcrumb-color:             link color (default: --bp-color-text-muted)
	 * --breadcrumb-gap:               space between items (default: --bp-space-2)
	 * --breadcrumb-size:              font size (default: --bp-text-sm)
	 *
	 * Active/hover color: re-declare --breadcrumb-color in your own state selector.
	 */

	/* ─── Root ───────────────────────────────────────────────── */
	.bp-breadcrumb {
		--_separator: var(--breadcrumb-separator, "/");
		--_color: var(--breadcrumb-color, var(--bp-color-text-muted));
		--_gap: var(--breadcrumb-gap, var(--bp-space-2));
		--_size: var(--breadcrumb-size, var(--bp-text-sm));

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--_gap);
		font-size: var(--_size);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-breadcrumb__item {
		display: flex;
		align-items: center;
		gap: var(--_gap);
	}

	.bp-breadcrumb__item:not(:last-child)::after {
		content: var(--_separator) / "";
		color: var(--bp-color-text-muted);
	}

	/* ─── Links ──────────────────────────────────────────────── */
	.bp-breadcrumb__link {
		color: var(--_color);
		text-decoration: none;
	}

	.bp-breadcrumb__link:hover {
		text-decoration: underline;
		--breadcrumb-color: var(--bp-color-text);
	}

	.bp-breadcrumb__link:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
		border-radius: var(--bp-radius-sm);
	}

	/* ─── Current page ───────────────────────────────────────── */
	.bp-breadcrumb__item[aria-current="page"] .bp-breadcrumb__link,
	.bp-breadcrumb__item:last-child .bp-breadcrumb__link {
		--breadcrumb-color: var(--bp-color-text);
		font-weight: var(--bp-font-medium);
		pointer-events: none;
	}
}
@layer bp-components {
	/**
	 * .bp-btn
	 * Public API:
	 *   --btn-background    Button background color
	 *   --btn-color         Button text color
	 *   --btn-border-radius Border radius
	 *   --btn-padding       Padding shorthand
	 *   --btn-border        Border (default: none)
	 */
	.bp-btn {
		--_background: var(--btn-background, var(--bp-primary));
		--_color: var(--btn-color, var(--bp-primary-fg));
		--_border-radius: var(--btn-border-radius, var(--bp-radius-md));
		--_padding: var(--btn-padding, var(--bp-space-3) var(--bp-space-6));
		--_border: var(--btn-border, none);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--bp-space-2);
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_border-radius);
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-semibold);
		line-height: 1;
		cursor: pointer;
		text-decoration: none;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease),
			transform var(--bp-duration-fast) var(--bp-ease);
		white-space: nowrap;
		user-select: none;
	}

	.bp-btn:hover {
		--_background: var(--bp-primary-hover);
	}

	.bp-btn:active {
		transform: translateY(1px);
	}

	.bp-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* --- Variant: secondary --- */
	.bp-btn--secondary {
		--btn-background: var(--bp-color-bg-subtle);
		--btn-color: var(--bp-color-text);
		--btn-border: 1px solid var(--bp-color-border);
	}

	.bp-btn--secondary:hover {
		--_background: var(--bp-color-bg-elevated);
	}

	/* --- Variant: ghost --- */
	.bp-btn--ghost {
		--btn-background: transparent;
		--btn-color: var(--bp-primary);
	}

	.bp-btn--ghost:hover {
		--_background: var(--bp-primary-subtle);
	}

	/* --- Variant: danger --- */
	.bp-btn--danger {
		--btn-background: var(--bp-color-error-surface);
		--btn-color: #fff;
	}

	/* --- Variant: icon-only --- */
	.bp-btn--icon {
		--btn-padding: var(--bp-space-3);
		aspect-ratio: 1;
	}

	/* --- Size modifier: sm --- */
	.bp-btn--sm {
		--btn-padding: var(--bp-space-2) var(--bp-space-4);
		font-size: var(--bp-text-sm);
	}

	/* --- Size modifier: lg --- */
	.bp-btn--lg {
		--btn-padding: var(--bp-space-4) var(--bp-space-8);
		font-size: var(--bp-text-lg);
	}

	.bp-btn:disabled,
	.bp-btn[aria-disabled='true'] {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* --- Container query responses --- */

	/* cqi fluid font size */
	@container (inline-size > 0) {
		.bp-btn:not(.bp-btn--sm):not(.bp-btn--lg):not(.bp-btn--icon) {
			font-size: clamp(var(--bp-text-sm), 2cqi, var(--bp-text-base));
		}
	}

	/* Narrow container: fill full width */
	@container (max-width: 20rem) {
		.bp-btn:not(.bp-btn--icon) {
			width: 100%;
			justify-content: center;
		}
	}

	/* Very narrow container: compact padding */
	@container (max-width: 14rem) {
		.bp-btn:not(.bp-btn--icon):not(.bp-btn--lg) {
			--btn-padding: var(--bp-space-2) var(--bp-space-4);
		}
	}
}
@layer bp-components {
	/**
	 * .bp-card
	 * Public API:
	 *   --card-background        Background color
	 *   --card-radius    Border radius
	 *   --card-padding   Inner padding
	 *   --card-shadow    Box shadow
	 *   --card-border    Border
	 */
	.bp-card {
		--_background: var(--card-background, var(--bp-color-bg-elevated));
		--_radius: var(--card-radius, var(--bp-radius-lg));
		--_padding: var(--card-padding, var(--bp-space-6));
		--_shadow: var(--card-shadow, var(--bp-shadow-md));
		--_border: var(--card-border, 1px solid var(--bp-color-border));

		background-color: var(--_background);
		border-radius: var(--_radius);
		padding: var(--_padding);
		box-shadow: var(--_shadow);
		border: var(--_border);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
		container-type: inline-size;
		container-name: card;
	}

	.bp-card__image {
		border-radius: calc(var(--_radius) - 2px) calc(var(--_radius) - 2px) 0 0;
		margin: calc(var(--_padding) * -1) calc(var(--_padding) * -1) 0;
		overflow: hidden;
	}

	.bp-card__image img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.bp-card__header {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-card__title {
		font-size: var(--bp-text-lg);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
	}

	/* cqi fluid type — named so it resolves to this card even when nested inside another inline-size container (e.g. a fluid card grid) */
	@container card (inline-size > 0) {
		.bp-card__title {
			font-size: clamp(var(--bp-text-base), 4cqi, var(--bp-text-lg));
		}
		.bp-card__body {
			font-size: clamp(var(--bp-text-sm), 3.5cqi, var(--bp-text-base));
		}
	}

	.bp-card__meta {
		font-size: var(--bp-text-sm);
		color: var(--bp-color-text-muted);
	}

	.bp-card__body {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
		flex: 1;
	}

	.bp-card__footer {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		padding-top: var(--bp-space-4);
		border-top: 1px solid var(--bp-color-border);
	}

	/* --- Variant: horizontal --- */
	.bp-card--horizontal {
		flex-direction: row;
		align-items: flex-start;
	}

	.bp-card--horizontal .bp-card__image {
		border-radius: calc(var(--_radius) - 2px) 0 0 calc(var(--_radius) - 2px);
		margin: calc(var(--_padding) * -1) 0 calc(var(--_padding) * -1) calc(var(--_padding) * -1);
		flex-shrink: 0;
		width: 40%;
		min-height: 100%;
	}

	/* --- Variant: interactive (hover lift) --- */
	.bp-card--interactive {
		cursor: pointer;
		transition:
			transform var(--bp-duration-normal) var(--bp-ease),
			box-shadow var(--bp-duration-normal) var(--bp-ease);
	}

	.bp-card--interactive:hover {
		transform: translateY(-2px);
		--card-shadow: var(--bp-shadow-lg);
	}

	.bp-card--interactive:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}
}
@layer bp-components {
	/**
	 * .bp-carousel
	 * CSS scroll-snap carousel — no JS required for basic behavior.
	 * Public API:
	 *   --carousel-gap        Gap between slides
	 *   --carousel-slide-min  Minimum slide width (default: 100%)
	 *   --carousel-radius     Slide border radius
	 *   --carousel-slide-background   Slide background (default: transparent)
	 */
	.bp-carousel {
		--_gap: var(--carousel-gap, var(--bp-space-4));
		--_slide-min: var(--carousel-slide-min, 100%);
		--_radius: var(--carousel-radius, var(--bp-radius-lg));
		--_background: var(--carousel-slide-background, transparent);
		--_padding: var(--carousel-slide-padding, 0px);
		--_height: var(--carousel-slide-min-height, auto);

		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
	}

	.bp-carousel__track {
		display: flex;
		gap: var(--_gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: var(--bp-space-1); /* prevent clip of box-shadow on focused slide */
	}

	.bp-carousel__track::-webkit-scrollbar {
		display: none;
	}

	.bp-carousel__slide {
		flex: 0 0 var(--_slide-min);
		min-height: var(--_height);
		padding: var(--_padding);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		border-radius: var(--_radius);
		background-color: var(--_background);
		overflow: hidden;
		position: relative;
	}

	.bp-carousel__slide:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* ─── Manual dots (fallback) ────────────────────────────────
     Shown when ::scroll-marker is not supported.
     JS toggles .is-active based on IntersectionObserver.       */
	.bp-carousel__dots {
		display: flex;
		justify-content: center;
		gap: var(--bp-space-2);
		list-style: none;
		padding: 0;
	}

	.bp-carousel__dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: var(--bp-radius-full);
		background-color: var(--bp-color-border);
		border: none;
		padding: 0;
		cursor: pointer;
		transition:
			width var(--bp-duration-normal) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-carousel__dot.is-active,
	.bp-carousel__dot[aria-current='true'] {
		background-color: var(--bp-primary);
		width: 1.5rem;
	}

	.bp-carousel__dot:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Prev/Next buttons (manual fallback) */
	.bp-carousel__controls {
		display: flex;
		justify-content: center;
		gap: var(--bp-space-3);
	}

	/* ─── Native ::scroll-marker + ::scroll-button ───────────────
     Progressive enhancement — no JS needed for dots or arrows.
     Hides the manual .bp-carousel__dots when supported.        */
	@supports selector(::scroll-marker) {
		/* Hide manual dots — native markers take over */
		.bp-carousel__dots {
			display: none;
		}
		.bp-carousel__controls {
			display: none;
		}

		.bp-carousel__track {
			/* Required to activate the marker group */
			scroll-marker-group: after;
		}

		/* Each slide gets a native dot marker */
		.bp-carousel__slide::scroll-marker {
			content: '';
			display: block;
			width: 0.5rem;
			height: 0.5rem;
			border-radius: var(--bp-radius-full);
			background-color: var(--bp-color-border);
			border: 2px solid transparent;
			transition:
				width var(--bp-duration-normal) var(--bp-ease),
				background-color var(--bp-duration-fast) var(--bp-ease);
		}

		.bp-carousel__slide::scroll-marker:target-current {
			background-color: var(--bp-primary);
			width: 1.5rem;
			border-radius: var(--bp-radius-full);
		}

		.bp-carousel__slide::scroll-marker:focus-visible {
			outline: none;
			border-color: var(--bp-primary);
			box-shadow: var(--bp-focus-ring);
		}

		/* The marker group row — centered below the track */
		.bp-carousel__track::scroll-marker-group {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: var(--bp-space-2);
			padding-block: var(--bp-space-2);
		}

		/* Anchor positioning — each carousel scopes its own anchor name
       so multiple carousels on the same page don't interfere.        */
		.bp-carousel {
			anchor-scope: --bp-carousel-track;
			position: relative;
			isolation: isolate;
		}

		.bp-carousel__track {
			anchor-name: --bp-carousel-track;
		}

		/* Native prev/next scroll buttons — anchored to the track,
       floating over the slides at vertical center.               */
		/* Shared scroll button styles via wildcard */
		.bp-carousel__track::scroll-button(*) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;
			border-radius: var(--bp-radius-full);
			background: var(--bp-color-bg-elevated);
			border: 1px solid var(--bp-color-border);
			color: var(--bp-color-text);
			cursor: pointer;
			font-size: 1rem;
			z-index: 1;
			transition:
				background-color var(--bp-duration-fast) var(--bp-ease),
				border-color var(--bp-duration-fast) var(--bp-ease),
				opacity var(--bp-duration-fast) var(--bp-ease);

			/* Anchor to the track, float at the left/right edges */
			position: absolute;
			position-anchor: --bp-carousel-track;
		}

		/* content: "icon" / "accessible label" — screen readers get the label */
		.bp-carousel__track::scroll-button(inline-start) {
			content: '←' / 'Previous slide';
			position-area: inline-start center;
			translate: -50% 0;
		}

		.bp-carousel__track::scroll-button(inline-end) {
			content: '→' / 'Next slide';
			position-area: inline-end center;
			translate: 50% 0;
		}

		.bp-carousel__track::scroll-button(*):hover {
			background-color: var(--bp-color-bg-subtle);
			border-color: var(--bp-color-border);
		}

		.bp-carousel__track::scroll-button(*):focus-visible {
			outline: none;
			box-shadow: var(--bp-focus-ring);
		}

		.bp-carousel__track::scroll-button(*):disabled {
			opacity: 0.3;
			cursor: default;
		}
	}

	/* Multi-slide variant: show partial next slide as affordance */
	.bp-carousel--multi .bp-carousel__track {
		padding-inline: var(--bp-space-4);
	}

	.bp-carousel--multi .bp-carousel__slide {
		flex: 0 0 calc(var(--_slide-min) - var(--bp-space-8));
	}

	/* Carousel is its own container for slide content scaling */
	.bp-carousel {
		container-type: inline-size;
	}

	/* Slide content inside a narrow carousel gets smaller type */
	@container (inline-size > 0) {
		.bp-carousel__slide {
			font-size: clamp(var(--bp-text-sm), 3cqi, var(--bp-text-base));
		}
	}

	/* ─── Responsive peek — bp-carousel--peek variant ───────────
     Automatically adjusts how many slides are visible based on
     the carousel's container width. No JS, no media queries.

     < 30rem  → 1.2 slides (peek of 20% of next slide)
     < 50rem  → 1.8 slides
     ≥ 50rem  → 2.2 slides (peek of 20% of third slide)

     Formula: slide-min = calc(100% / N - var(--_gap) * (N-1) / N)
     Simplified to: (100% - gap) / N using approximate gap amortization. */
	.bp-carousel--peek {
		.bp-carousel__track {
			padding-inline: var(--bp-space-4);
		}
	}

	@container (inline-size < 30rem) {
		.bp-carousel--peek .bp-carousel__slide {
			--carousel-slide-min: calc(100% / 1.2 - var(--bp-space-4));
		}
	}

	@container (30rem <= inline-size < 50rem) {
		.bp-carousel--peek .bp-carousel__slide {
			--carousel-slide-min: calc(100% / 1.8 - var(--bp-space-4));
		}
	}

	@container (inline-size >= 50rem) {
		.bp-carousel--peek .bp-carousel__slide {
			--carousel-slide-min: calc(100% / 2.2 - var(--bp-space-4));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-checkbox
	 * Label wrapper for a native checkbox input with optional label text.
	 *
	 * .bp-checkbox-field
	 * Wrapper for a checkbox + error message.
	 *
	 * .bp-checkbox-group
	 * Fieldset wrapper for a group of checkboxes (stacked or inline).
	 *
	 * Public API:
	 *   --checkbox-size              Control box width/height
	 *   --checkbox-radius            Control border radius
	 *   --checkbox-border            Unchecked border
	 *   --checkbox-background                Unchecked background
	 *   --checkbox-color             Checked/indeterminate fill color
	 *   --checkbox-check-color       Checkmark/dash color
	 *   --checkbox-gap               Control-to-label gap
	 *   --checkbox-label-color       Label text color
	 *   --checkbox-error-color       Error border/text color
	 *   --checkbox-group-gap         Stacked group gap
	 *   --checkbox-group-inline-gap  Inline group gap
	 */
	.bp-checkbox {
		--_size: var(--checkbox-size, 1.125rem);
		--_radius: var(--checkbox-radius, var(--bp-radius-sm));
		--_border: var(--checkbox-border, 1px solid var(--bp-color-border));
		--_background: var(--checkbox-background, var(--bp-color-bg-elevated));
		--_color: var(--checkbox-color, var(--bp-primary));
		--_check-color: var(--checkbox-check-color, #fff);
		--_gap: var(--checkbox-gap, var(--bp-space-2));
		--_label-color: var(--checkbox-label-color, var(--bp-color-text));

		display: inline-flex;
		align-items: center;
		gap: var(--_gap);
		cursor: pointer;
		color: var(--_label-color);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
	}

	.bp-checkbox__input {
		appearance: none;
		-webkit-appearance: none;
		flex-shrink: 0;
		width: var(--_size);
		height: var(--_size);
		border: var(--_border);
		border-radius: var(--_radius);
		background-color: var(--_background);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 70%;
		cursor: pointer;
		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease);
	}

	/* ── Checked state ── */
	.bp-checkbox__input:checked {
		background-color: var(--_color);
		border-color: var(--_color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* ── Indeterminate state ── */
	.bp-checkbox__input:indeterminate {
		background-color: var(--_color);
		border-color: var(--_color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	/* ── Focus visible ── */
	.bp-checkbox__input:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* ── Disabled state ── */
	.bp-checkbox__input:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.bp-checkbox:has(.bp-checkbox__input:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* ── Error state ── */
	.bp-checkbox__input[aria-invalid='true'] {
		--checkbox-border: 1px solid var(--checkbox-error-color, var(--bp-color-error));
	}

	/* ── Field wrapper ── */
	.bp-checkbox-field {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-checkbox-field__error {
		font-size: var(--bp-text-xs);
		color: var(--checkbox-error-color, var(--bp-color-error));
		margin: 0;
	}

	/* ── Group ── */
	.bp-checkbox-group {
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--checkbox-group-gap, var(--bp-space-3));
	}

	.bp-checkbox-group__legend {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
		margin-bottom: var(--bp-space-2);
		padding: 0;
	}

	/* ── Group inline modifier ── */
	.bp-checkbox-group--inline {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--checkbox-group-inline-gap, var(--bp-space-4));
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --datepicker-border:        border (default: 1px solid --bp-color-border)
	 * --datepicker-radius:        border radius (default: --bp-radius-md)
	 * --datepicker-background:            background (default: --bp-color-bg)
	 * --datepicker-color:         text color (default: --bp-color-text)
	 * --datepicker-accent:        calendar accent (default: --bp-primary)
	 * --datepicker-padding:       padding (default: --bp-space-2 --bp-space-3)
	 * --datepicker-height:        input height (default: 2.5rem)
	 */

	.bp-datepicker {
		--_border: var(--datepicker-border, 1px solid var(--bp-color-border));
		--_radius: var(--datepicker-radius, var(--bp-radius-md));
		--_background: var(--datepicker-background, var(--bp-color-bg));
		--_color: var(--datepicker-color, var(--bp-color-text));
		--_accent: var(--datepicker-accent, var(--bp-primary));
		--_padding: var(--datepicker-padding, var(--bp-space-2) var(--bp-space-3));
		--_height: var(--datepicker-height, 2.5rem);

		/* Use accent-color to theme the native calendar popup */
		accent-color: var(--_accent);
		color-scheme: light dark;

		display: block;
		width: 100%;
		height: var(--_height);
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-family: inherit;
		font-size: var(--bp-text-sm);
		cursor: pointer;

		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-datepicker:hover {
		border-color: var(--bp-primary);
	}

	.bp-datepicker:focus-visible {
		outline: none;
		border-color: var(--bp-primary);
		box-shadow: var(--bp-focus-ring);
	}

	.bp-datepicker:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.bp-datepicker:invalid:not(:placeholder-shown) {
		border-color: var(--bp-color-error);
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --dropdown-background:        background (default: --bp-color-bg-elevated)
	 * --dropdown-border:    border (default: 1px solid --bp-color-border)
	 * --dropdown-radius:    border radius (default: --bp-radius-lg)
	 * --dropdown-shadow:    box shadow (default: --bp-shadow-lg)
	 * --dropdown-min-width: minimum width (default: 12rem)
	 * --dropdown-item-gap:  padding on items (default: --bp-space-2 --bp-space-3)
	 */

	/* ─── Wrapper ────────────────────────────────────────────── */
	.bp-dropdown {
		--_background: var(--dropdown-background, var(--bp-color-bg-elevated));
		--_border: var(--dropdown-border, 1px solid var(--bp-color-border));
		--_radius: var(--dropdown-radius, var(--bp-radius-lg));
		--_shadow: var(--dropdown-shadow, var(--bp-shadow-lg));
		--_min-width: var(--dropdown-min-width, 12rem);
		--_item-gap: var(--dropdown-item-gap, var(--bp-space-2) var(--bp-space-3));

		position: relative;
		display: inline-flex;
	}

	/* ─── Panel (popover) ────────────────────────────────────── */
	.bp-dropdown__panel {
		/* Reset browser popover styles */
		position: absolute;
		top: calc(100% + var(--bp-space-1));
		inset-inline-start: 0;
		z-index: 200;

		min-width: var(--_min-width);
		background-color: var(--_background);
		border: var(--_border);
		border-radius: var(--_radius);
		box-shadow: var(--_shadow);
		padding-block: var(--bp-space-1);
		list-style: none;
		margin: 0;
		padding-inline: 0;

		opacity: 0;
		visibility: hidden;
		translate: 0 -0.25rem;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			visibility 0s var(--bp-duration-fast);
	}

	/* ─── Open state (driven by [data-open] on wrapper) ─────── */
	.bp-dropdown[data-open] .bp-dropdown__panel {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			visibility 0s 0s;
	}

	/* ─── Popover API variant ────────────────────────────────── */
	.bp-dropdown__panel[popover] {
		position: fixed;
		inset: unset;
		padding-block: var(--bp-space-1);
		padding-inline: 0;
		color: var(--bp-color-text);

		opacity: 0;
		translate: 0 -0.25rem;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			display var(--bp-duration-fast) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-fast) var(--bp-ease) allow-discrete;
	}

	.bp-dropdown__panel[popover]:popover-open {
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		.bp-dropdown__panel[popover]:popover-open {
			opacity: 0;
			translate: 0 -0.25rem;
		}
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-dropdown__item {
		display: flex;
		align-items: center;
		gap: var(--bp-space-2);
		width: 100%;
		padding: var(--_item-gap);
		background: none;
		border: none;
		border-radius: 0;
		color: var(--bp-color-text);
		font-size: var(--bp-text-sm);
		text-align: start;
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-dropdown__item:hover,
	.bp-dropdown__item:focus-visible {
		background-color: var(--bp-color-bg-subtle);
		outline: none;
	}

	.bp-dropdown__item:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: -2px;
	}

	.bp-dropdown__item[aria-disabled="true"],
	.bp-dropdown__item:disabled {
		opacity: 0.4;
		pointer-events: none;
		cursor: default;
	}

	/* ─── Danger variant ─────────────────────────────────────── */
	.bp-dropdown__item--danger {
		color: var(--bp-color-error);
	}

	.bp-dropdown__item--danger:hover,
	.bp-dropdown__item--danger:focus-visible {
		background-color: color-mix(in srgb, var(--bp-color-error) 10%, transparent);
	}

	/* ─── Separator ──────────────────────────────────────────── */
	.bp-dropdown__separator {
		height: 1px;
		background-color: var(--bp-color-border);
		margin-block: var(--bp-space-1);
		margin-inline: var(--bp-space-2);
	}

	/* ─── Item icon ──────────────────────────────────────────── */
	.bp-dropdown__icon {
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		opacity: 0.7;
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-dropdown__panel,
		.bp-dropdown__panel[popover] {
			transition: none;
		}
	}
}
@layer bp-components {
	/**
	 * .bp-file-upload
	 * Dropzone with drag feedback, per-file progress, and inline retry.
	 * Requires the bp-file-upload custom element (public/bp-file-upload.js)
	 * for drag state, file selection, and trickle progress.
	 * Public API:
	 *   --file-upload-border           Dropzone border (default: dashed)
	 *   --file-upload-border-radius    Dropzone border radius
	 *   --file-upload-background       Dropzone background
	 *   --file-upload-padding          Dropzone inner padding
	 *   --file-upload-gap              Gap between dropzone children
	 *   --file-upload-accent           Drag-over / focus accent color
	 */
	.bp-file-upload {
		--_border: var(--file-upload-border, 2px dashed var(--bp-color-border));
		--_border-radius: var(--file-upload-border-radius, var(--bp-radius-lg));
		--_background: var(--file-upload-background, var(--bp-color-bg-subtle));
		--_padding: var(--file-upload-padding, var(--bp-space-8));
		--_gap: var(--file-upload-gap, var(--bp-space-2));
		--_accent: var(--file-upload-accent, var(--bp-primary));

		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
		container-type: inline-size;
	}

	.bp-file-upload__dropzone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--_gap);
		padding: var(--_padding);
		text-align: center;
		background-color: var(--_background);
		border: var(--_border);
		border-radius: var(--_border-radius);
		cursor: pointer;
		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-file-upload__input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.bp-file-upload__input:focus-visible ~ .bp-file-upload__dropzone,
	.bp-file-upload__dropzone:has(.bp-file-upload__input:focus-visible) {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-file-upload__icon {
		font-size: var(--bp-text-2xl);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__copy {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-sm);
	}

	.bp-file-upload__browse {
		color: var(--_accent, var(--bp-primary));
		font-weight: var(--bp-font-weight-medium);
		text-decoration: underline;
	}

	/* ── Drag-over state — border, glow, and copy shift before the drop ── */
	.bp-file-upload[data-dragover] .bp-file-upload__dropzone {
		border: 2px dashed var(--_accent);
		background-color: color-mix(in srgb, var(--_accent) 8%, var(--bp-color-bg-subtle));
		box-shadow: var(--bp-focus-ring);
	}

	/* ── File list ── */
	.bp-file-upload__list {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-3);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bp-file-upload__item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--bp-space-1) var(--bp-space-3);
		padding: var(--bp-space-3) var(--bp-space-4);
		background-color: var(--bp-color-bg-elevated);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--bp-radius-md);
	}

	.bp-file-upload__name {
		grid-column: 1;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bp-file-upload__size {
		grid-column: 2;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__progress {
		grid-column: 1 / -1;
		width: 100%;
		height: 6px;
		appearance: none;
		border: none;
		border-radius: var(--bp-radius-full);
		overflow: hidden;
	}

	.bp-file-upload__progress::-webkit-progress-bar {
		background-color: var(--bp-color-bg-subtle);
	}

	.bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-primary);
		transition: width var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-primary);
	}

	.bp-file-upload__percent {
		grid-column: 1;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__retry {
		grid-column: 2;
		justify-self: end;
		background: none;
		border: none;
		padding: 0;
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-error);
		cursor: pointer;
		text-decoration: underline;
	}

	.bp-file-upload__retry[hidden] {
		display: none;
	}

	/* ── Item states ── */
	.bp-file-upload__item[data-state='success'] .bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-color-success);
	}
	.bp-file-upload__item[data-state='success'] .bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-color-success);
	}
	.bp-file-upload__item[data-state='success'] .bp-file-upload__percent {
		color: var(--bp-color-success);
	}

	.bp-file-upload__item[data-state='error'] .bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-color-error);
	}
	.bp-file-upload__item[data-state='error'] .bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-color-error);
	}
	.bp-file-upload__item[data-state='error'] .bp-file-upload__percent {
		color: var(--bp-color-error);
	}

	/* ── cqi fluid type ── */
	@container (inline-size > 0) {
		.bp-file-upload__copy {
			font-size: clamp(var(--bp-text-xs), 2cqi, var(--bp-text-sm));
		}
	}

	/* ── Reduced motion ── */
	@media (prefers-reduced-motion: reduce) {
		.bp-file-upload__progress::-webkit-progress-value {
			transition: none;
		}
	}
}
@layer bp-components {
	/**
	 * .bp-footer
	 * Site footer using .bp-content-grid internally.
	 * Public API:
	 *   --footer-background      Background color
	 *   --footer-color   Text color
	 *   --footer-border  Top border
	 */
	.bp-footer {
		--_background: var(--footer-background, var(--bp-color-bg-subtle));
		--_color: var(--footer-color, var(--bp-color-text-muted));
		--_border: var(--footer-border, 1px solid var(--bp-color-border));

		background-color: var(--_background);
		color: var(--_color);
		border-top: var(--_border);
		font-size: var(--bp-text-sm);
	}

	.bp-footer__inner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--bp-space-10);
		padding-block: var(--bp-space-16);
		max-width: 90rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
	}

	.bp-footer__brand {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
	}

	.bp-footer__logo {
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-bold);
		color: var(--bp-color-text);
		text-decoration: none;
	}

	.bp-footer__logo:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-footer__tagline {
		line-height: var(--bp-leading-normal);
	}

	.bp-footer__col-title {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
		margin-bottom: var(--bp-space-4);
	}

	.bp-footer__links {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-3);
	}

	.bp-footer__link {
		color: var(--_color);
		text-decoration: none;
		transition: color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-footer__link:hover {
		color: var(--bp-primary);
	}

	.bp-footer__link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-footer__bottom {
		border-top: 1px solid var(--bp-color-border);
		padding-block: var(--bp-space-6);
		max-width: 90rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--bp-space-4);
	}

	/* Footer is its own container */
	.bp-footer {
		container-type: inline-size;
	}

	@container (inline-size > 0) {
		.bp-footer__logo {
			font-size: clamp(var(--bp-text-sm), 2cqi, var(--bp-text-base));
		}
		.bp-footer__col-title {
			font-size: clamp(var(--bp-text-xs), 1.8cqi, var(--bp-text-sm));
		}
		.bp-footer__link,
		.bp-footer__tagline {
			font-size: clamp(var(--bp-text-xs), 1.6cqi, var(--bp-text-sm));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-header
	 * Sticky site header with optional glassmorphism.
	 * Public API:
	 *   --header-background         Background color / fallback
	 *   --header-height     Header height
	 *   --header-z          z-index
	 *   --header-shadow     Box shadow when scrolled
	 */
	.bp-header {
		--_background: var(--header-background, var(--bp-color-bg-elevated));
		--_height: var(--header-height, 4rem);
		--_z: var(--header-z, 100);

		position: sticky;
		top: 0;
		z-index: var(--_z);
		height: var(--_height);
		background-color: var(--_background);
		border-bottom: 1px solid var(--bp-color-border);
		view-transition-name: bp-header;
		contain: layout;
		transition:
			box-shadow var(--bp-duration-normal) var(--bp-ease),
			border-color var(--bp-duration-normal) var(--bp-ease),
			background-color var(--bp-duration-normal) var(--bp-ease);
	}

	/* Glassmorphism — only when supported */
	@supports (backdrop-filter: blur(1px)) {
		.bp-header {
			background-color: color-mix(in srgb, var(--_background) 80%, transparent);
			backdrop-filter: blur(12px) saturate(180%);
			-webkit-backdrop-filter: blur(12px) saturate(180%);
		}
	}

	.bp-header.is-scrolled {
		box-shadow: var(--bp-shadow-md);
		border-bottom-color: transparent;
	}

	.bp-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		max-width: 90rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
		gap: var(--bp-space-8);
	}

	.bp-header__logo {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		text-decoration: none;
		color: var(--bp-color-text);
		font-size: var(--bp-text-lg);
		font-weight: var(--bp-font-weight-bold);
		flex-shrink: 0;
	}

	.bp-header__logo:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-header__actions {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		flex-shrink: 0;
		container-type: inline-size;
	}
}
@layer bp-components {
	/**
	 * .bp-hero
	 * Page hero section with entrance animation via @starting-style.
	 * Public API:
	 *   --hero-background          Background color or gradient
	 *   --hero-min-height  Minimum section height
	 *   --hero-align       Content alignment: center | left | right
	 */
	.bp-hero {
		--_background: var(--hero-background, var(--bp-color-bg));
		--_min-height: var(--hero-min-height, 80dvh);
		--_align: var(--hero-align, center);

		display: flex;
		align-items: center;
		min-height: var(--_min-height);
		background: var(--_background);
		padding-block: var(--bp-space-20);
	}

	.bp-hero__inner {
		width: 100%;
		max-width: 64rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
		text-align: var(--_align);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-6);

		/* Entrance animation */
		transition:
			opacity var(--bp-duration-slow) var(--bp-ease),
			transform var(--bp-duration-slow) var(--bp-ease);
	}

	@starting-style {
		.bp-hero__inner {
			opacity: 0;
			transform: translateY(1.5rem);
		}
	}

	.bp-hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-2);
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-primary);
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.bp-hero__headline {
		font-size: var(--bp-text-5xl);
		font-weight: var(--bp-font-weight-bold);
		line-height: var(--bp-leading-tight);
		color: var(--bp-color-text);
		letter-spacing: -0.02em;
	}

	.bp-hero__subheading {
		font-size: var(--bp-text-xl);
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-loose);
		max-width: 48rem;
	}

	/* cqi fluid type — only fires when inside a container context */
	@container (inline-size > 0) {
		.bp-hero__headline {
			font-size: clamp(var(--bp-text-2xl), 8cqi, var(--bp-text-5xl));
		}
		.bp-hero__subheading {
			font-size: clamp(var(--bp-text-base), 3cqi, var(--bp-text-xl));
		}
	}

	.bp-hero--center .bp-hero__subheading {
		margin-inline: auto;
	}

	.bp-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--bp-space-4);
		align-items: center;
		justify-content: var(--_align);
	}

	/* --- Variant: left-aligned --- */
	.bp-hero--left {
		--hero-align: left;
	}

	/* --- Variant: with-image --- */
	.bp-hero--with-image .bp-hero__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		text-align: start;
		max-width: 80rem;
	}

	.bp-hero--with-image .bp-hero__content {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-6);
	}

	.bp-hero--with-image .bp-hero__image {
		border-radius: var(--bp-radius-xl);
		overflow: hidden;
	}

	.bp-hero--with-image .bp-hero__actions {
		justify-content: flex-start;
	}

	@media (max-width: 48rem) {
		.bp-hero--with-image .bp-hero__inner {
			grid-template-columns: 1fr;
		}
	}
}
@layer bp-components {
	/**
	 * .bp-field
	 * Wrapper for label + input + hint.
	 *
	 * .bp-input
	 * Public API:
	 *   --input-background       Background color
	 *   --input-color    Text color
	 *   --input-radius   Border radius
	 *   --input-padding  Inner padding
	 *   --input-border   Border
	 */
	.bp-field {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-2);
	}

	.bp-field__label {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
	}

	.bp-field__hint {
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-field__error {
		font-size: var(--bp-text-xs);
		color: var(--bp-color-error);
	}

	.bp-input {
		--_background: var(--input-background, var(--bp-color-bg-elevated));
		--_color: var(--input-color, var(--bp-color-text));
		--_radius: var(--input-radius, var(--bp-radius-md));
		--_padding: var(--input-padding, var(--bp-space-3) var(--bp-space-4));
		--_border: var(--input-border, 1px solid var(--bp-color-border));

		display: block;
		width: 100%;
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
		transition: border-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-input::placeholder {
		color: var(--bp-color-text-muted);
		opacity: 0.7;
	}

	.bp-input:hover {
		--input-border: 1px solid var(--bp-color-text-muted);
	}

	.bp-input:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		--input-border: 1px solid var(--bp-primary);
	}

	.bp-input[aria-invalid='true'],
	.bp-input:invalid:not(:placeholder-shown) {
		--input-border: 1px solid var(--bp-color-error);
	}

	.bp-input[data-state='success'] {
		--input-border: 1px solid var(--bp-color-success);
	}

	.bp-input[aria-busy='true'] {
		--input-border: 1px solid var(--bp-color-border);
		cursor: wait;
		pointer-events: none;
	}

	.bp-input:disabled {
		cursor: not-allowed;
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text-muted);
	}

	/* Icon slot — success check, error mark, or .bp-spinner for loading */
	.bp-field__control {
		position: relative;
		display: flex;
	}

	.bp-field__icon {
		position: absolute;
		top: 50%;
		right: var(--bp-space-3);
		transform: translateY(-50%);
		display: flex;
		pointer-events: none;
		color: var(--bp-color-text-muted);
	}

	.bp-input[data-state='success'] ~ .bp-field__icon {
		color: var(--bp-color-success);
	}

	.bp-input[aria-invalid='true'] ~ .bp-field__icon {
		color: var(--bp-color-error);
	}

	.bp-field__control:has(.bp-field__icon) .bp-input {
		padding-right: var(--bp-space-8);
	}

	/* Textarea variant */
	textarea.bp-input {
		resize: vertical;
		min-height: 6rem;
		field-sizing: content;
	}

	/* cqi fluid type — label, hint, input text scale with container */
	@container (inline-size > 0) {
		.bp-field__label {
			font-size: clamp(var(--bp-text-xs), 2cqi, var(--bp-text-sm));
		}
		.bp-field__hint,
		.bp-field__error {
			font-size: clamp(var(--bp-text-xs), 1.6cqi, var(--bp-text-xs));
		}
		.bp-input {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-modal
	 * Native <dialog> modal — showModal() / close() via minimal JS.
	 * Focus trap is native to <dialog>.
	 * Public API:
	 *   --modal-background       Modal background
	 *   --modal-radius   Border radius
	 *   --modal-padding  Inner padding
	 *   --modal-width    Max width
	 */
	.bp-modal {
		--_background: var(--modal-background, var(--bp-color-bg-elevated));
		--_radius: var(--modal-radius, var(--bp-radius-xl));
		--_padding: var(--modal-padding, var(--bp-space-8));
		--_width: var(--modal-width, 32rem);

		background-color: var(--_background);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--_radius);
		padding: var(--_padding);
		position: fixed;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: calc(100vw - var(--bp-space-8));
		max-width: var(--_width);
		max-height: calc(100dvh - var(--bp-space-16));
		overflow-y: auto;
		box-shadow: var(--bp-shadow-xl);
		color: var(--bp-color-text);

		/* Entrance/exit with allow-discrete for display: none ↔ block */
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-modal[open] {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	@starting-style {
		.bp-modal[open] {
			opacity: 0;
			transform: translateY(1rem) scale(0.97);
		}
	}

	/* Backdrop */
	.bp-modal::backdrop {
		background-color: rgb(0 0 0 / 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);

		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	@starting-style {
		.bp-modal[open]::backdrop {
			opacity: 0;
		}
	}

	.bp-modal__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--bp-space-4);
		margin-bottom: var(--bp-space-6);
	}

	.bp-modal__title {
		font-size: var(--bp-text-xl);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
	}

	.bp-modal__close {
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		background: none;
		border: none;
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		flex-shrink: 0;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-modal__close:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text);
	}

	.bp-modal__close:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-modal__body {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
	}

	.bp-modal__footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--bp-space-3);
		margin-top: var(--bp-space-8);
		padding-top: var(--bp-space-6);
		border-top: 1px solid var(--bp-color-border);
	}

	/* Modal is its own container for internal cqi scaling */
	.bp-modal {
		container-type: inline-size;
	}

	@container (inline-size > 0) {
		.bp-modal__title {
			font-size: clamp(var(--bp-text-base), 5cqi, var(--bp-text-xl));
		}
		.bp-modal__body {
			font-size: clamp(var(--bp-text-sm), 3.5cqi, var(--bp-text-base));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-nav
	 * Navigation component with simple links, dropdowns, and megamenu.
	 * Public API:
	 *   --nav-gap        Gap between top-level items
	 *   --nav-link-color Text color of nav links
	 */

	/* cqi fluid type — fires when nav is inside a container (e.g. .bp-header__actions) */
	@container (inline-size > 0) {
		.bp-nav__link,
		.bp-nav__dropdown-btn,
		.bp-nav__megamenu-btn {
			font-size: clamp(var(--bp-text-xs), 1.4cqi, var(--bp-text-sm));
		}
	}

	.bp-nav {
		--_gap: var(--nav-gap, var(--bp-space-1));
		--_link-color: var(--nav-link-color, var(--bp-color-text));

		display: flex;
		align-items: center;
		gap: var(--_gap);
		list-style: none;
	}

	/* ===================== Simple link ===================== */
	.bp-nav__link {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-nav__link[aria-current='page'] {
		color: var(--bp-primary);
		background-color: var(--bp-primary-subtle);
	}

	/* ===================== Dropdown ===================== */
	.bp-nav__item {
		position: relative;
	}

	.bp-nav__dropdown-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__dropdown-btn:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__dropdown-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Arrow icon */
	.bp-nav__dropdown-btn::after {
		content: '';
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform var(--bp-duration-fast) var(--bp-ease);
	}

	/* Arrow rotates when dropdown open */
	.bp-nav__item--dropdown:is(:hover, :focus-within) .bp-nav__dropdown-btn::after,
	.bp-nav__item--dropdown[data-open] .bp-nav__dropdown-btn::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.bp-nav__dropdown-panel {
		position: absolute;
		top: calc(100% + var(--bp-space-2));
		left: 0;
		z-index: 200;
		min-width: 14rem;
		background-color: var(--bp-color-bg-elevated);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--bp-radius-lg);
		box-shadow: var(--bp-shadow-lg);
		padding: var(--bp-space-2);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);

		/* Hidden state */
		opacity: 0;
		transform: scale(0.95) translateY(-4px);
		pointer-events: none;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			transform var(--bp-duration-fast) var(--bp-ease);
	}

	/* Open via hover (pointer devices only) */
	@media (hover: hover) {
		.bp-nav__item--dropdown:hover .bp-nav__dropdown-panel {
			opacity: 1;
			transform: scale(1) translateY(0);
			pointer-events: auto;
		}
	}

	/* Open via focus-within (keyboard / touch) */
	.bp-nav__item--dropdown:focus-within .bp-nav__dropdown-panel {
		opacity: 1;
		transform: scale(1) translateY(0);
		pointer-events: auto;
	}

	.bp-nav__dropdown-link {
		display: flex;
		align-items: center;
		gap: var(--bp-space-2);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__dropdown-link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__dropdown-link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* ===================== Megamenu ===================== */
	.bp-nav__item--megamenu {
		position: static;
	}

	.bp-nav__megamenu-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__megamenu-btn:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__megamenu-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Popover-based megamenu panel */
	.bp-nav__megamenu-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 1px);
		inset-inline: 0;
		z-index: 200;
		background-color: var(--bp-color-bg-elevated);
		border-top: 1px solid var(--bp-color-border);
		border-bottom: 1px solid var(--bp-color-border);
		box-shadow: var(--bp-shadow-xl);
		padding: var(--bp-space-8) var(--bp-space-6);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--bp-space-8);
	}

	/* Popover open animation via @starting-style */
	.bp-nav__megamenu-panel[popover] {
		border: none;
		padding: var(--bp-space-8) var(--bp-space-6);
		max-width: 100%;
		width: 100%;
		margin: 0;
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-nav__megamenu-panel:popover-open {
		opacity: 1;
		transform: translateY(0);
	}

	@starting-style {
		.bp-nav__megamenu-panel:popover-open {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	.bp-nav__megamenu-section-title {
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: var(--bp-space-3);
	}

	.bp-nav__megamenu-links {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-nav__megamenu-link {
		display: flex;
		align-items: flex-start;
		gap: var(--bp-space-3);
		padding: var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text);
		text-decoration: none;
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__megamenu-link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__megamenu-link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-nav__megamenu-link-icon {
		width: 2rem;
		height: 2rem;
		display: grid;
		place-items: center;
		background-color: var(--bp-primary-subtle);
		border-radius: var(--bp-radius-md);
		color: var(--bp-primary);
		flex-shrink: 0;
		font-size: var(--bp-text-base);
	}

	.bp-nav__megamenu-link-text strong {
		display: block;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-nav__megamenu-link-text span {
		display: block;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
		margin-top: var(--bp-space-1);
	}

	/* Featured block inside megamenu */
	.bp-nav__megamenu-featured {
		background-color: var(--bp-color-bg-subtle);
		border-radius: var(--bp-radius-lg);
		padding: var(--bp-space-6);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-3);
	}

	.bp-nav__megamenu-featured-title {
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-nav__megamenu-featured-desc {
		font-size: var(--bp-text-sm);
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-normal);
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --pagination-color:      item text color (default: --bp-color-text)
	 * --pagination-background: active page background (default: --bp-primary)
	 * --pagination-border:     item border (default: 1px solid --bp-color-border)
	 * --pagination-radius:     item border radius (default: --bp-radius-md)
	 * --pagination-size:       item min size (default: 2.25rem)
	 * --pagination-gap:        gap between items (default: --bp-space-1)
	 *
	 * Active state: re-declare --pagination-color / --pagination-background in your own [aria-current] selector.
	 */

	/* ─── Root ───────────────────────────────────────────────── */
	.bp-pagination {
		--_color: var(--pagination-color, var(--bp-color-text));
		--_border: var(--pagination-border, 1px solid var(--bp-color-border));
		--_radius: var(--pagination-radius, var(--bp-radius-md));
		--_size: var(--pagination-size, 2.25rem);
		--_gap: var(--pagination-gap, var(--bp-space-1));

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--_gap);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-pagination__item {
		display: flex;
	}

	/* ─── Links and buttons ──────────────────────────────────── */
	.bp-pagination__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--_size);
		min-height: var(--_size);
		padding-inline: var(--bp-space-2);
		border: var(--_border);
		border-radius: var(--_radius);
		color: var(--_color);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-medium);
		background-color: transparent;
		cursor: pointer;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease),
			border-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-pagination__link:hover:not([aria-current]):not([aria-disabled="true"]):not(:disabled) {
		background-color: var(--bp-color-bg-subtle);
		border-color: var(--bp-primary);
	}

	.bp-pagination__link:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
	}

	/* ─── Active page ────────────────────────────────────────── */
	.bp-pagination__link[aria-current="page"] {
		--pagination-background: var(--bp-primary);
		--pagination-color: var(--bp-color-bg);
		background-color: var(--pagination-background);
		color: var(--_color);
		border-color: var(--pagination-background);
		pointer-events: none;
	}

	/* ─── Disabled ───────────────────────────────────────────── */
	.bp-pagination__link[aria-disabled="true"],
	.bp-pagination__link:disabled {
		opacity: 0.4;
		pointer-events: none;
		cursor: default;
	}

	/* ─── Ellipsis ───────────────────────────────────────────── */
	.bp-pagination__ellipsis {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--_size);
		min-height: var(--_size);
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-sm);
		user-select: none;
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --popover-background:       background (default: --bp-color-bg-elevated)
	 * --popover-border:   border (default: 1px solid --bp-color-border)
	 * --popover-radius:   border radius (default: --bp-radius-lg)
	 * --popover-shadow:   box shadow (default: --bp-shadow-lg)
	 * --popover-padding:  padding (default: --bp-space-4)
	 * --popover-width:    max width (default: 20rem)
	 */

	/* ─── Base ───────────────────────────────────────────────── */
	.bp-popover {
		--_background: var(--popover-background, var(--bp-color-bg-elevated));
		--_border: var(--popover-border, 1px solid var(--bp-color-border));
		--_radius: var(--popover-radius, var(--bp-radius-lg));
		--_shadow: var(--popover-shadow, var(--bp-shadow-lg));
		--_padding: var(--popover-padding, var(--bp-space-4));
		--_width: var(--popover-width, 20rem);

		/* Reset UA popover styles (position, inset, margin) */
		position: fixed;
		inset: unset;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		margin: 0;

		border: var(--_border);
		border-radius: var(--_radius);
		box-shadow: var(--_shadow);
		background-color: var(--_background);
		padding: var(--_padding);
		max-width: var(--_width);
		width: max-content;
		color: var(--bp-color-text);

		/* Hidden by default — shown by Popover API */
		opacity: 0;
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-popover:popover-open {
		opacity: 1;
		translate: -50% -50%;
	}

	/* ─── Entry animation (starting-style) ───────────────────── */
	@starting-style {
		.bp-popover:popover-open {
			opacity: 0;
			translate: -50% calc(-50% - 0.25rem);
		}
	}

	/* ─── Backdrop ──────────────────────────────────────────── */
	.bp-popover::backdrop {
		background-color: color-mix(in srgb, var(--bp-color-text) 30%, transparent);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-popover:popover-open::backdrop {
		opacity: 1;
	}

	@starting-style {
		.bp-popover:popover-open::backdrop {
			opacity: 0;
		}
	}

	/* ─── Header ─────────────────────────────────────────────── */
	.bp-popover__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bp-space-2);
		margin-block-end: var(--bp-space-3);
	}

	.bp-popover__title {
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-semibold);
		margin: 0;
	}

	/* ─── Close button ───────────────────────────────────────── */
	.bp-popover__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border: none;
		border-radius: var(--bp-radius-sm);
		background: transparent;
		color: var(--bp-color-text-muted);
		cursor: pointer;
		font-size: var(--bp-text-lg);
		line-height: 1;
		padding: 0;
		flex-shrink: 0;
	}

	.bp-popover__close:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text);
	}

	.bp-popover__close:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-popover {
			transition: none;
		}
	}
}
@layer bp-components {
	/**
	 * .bp-radio
	 * Single radio control — label wraps input for implicit association.
	 *
	 * .bp-radio-group
	 * Fieldset wrapper for a group of radio buttons.
	 *
	 * Public API:
	 *   --radio-size                Circle diameter
	 *   --radio-dot-size            Inner dot diameter
	 *   --radio-color               Checked ring and dot color
	 *   --radio-border              Unchecked border
	 *   --radio-background                  Unchecked background
	 *   --radio-gap                 Control-to-label gap
	 *   --radio-group-gap           Vertical group gap between items
	 *   --radio-group-gap-horizontal Horizontal group gap between items
	 *   --radio-label-color         Label text color
	 *   --radio-error-color         Error message color
	 */
	.bp-radio {
		--_size: var(--radio-size, 1.125rem);
		--_dot-size: var(--radio-dot-size, 0.5rem);
		--_color: var(--radio-color, var(--bp-primary));
		--_border: var(--radio-border, 1px solid var(--bp-color-border));
		--_background: var(--radio-background, var(--bp-color-bg-elevated));
		--_gap: var(--radio-gap, var(--bp-space-2));
		--_label-color: var(--radio-label-color, var(--bp-color-text));

		display: inline-flex;
		align-items: center;
		gap: var(--_gap);
		cursor: pointer;
	}

	/* Hide the native radio input visually but keep it accessible */
	.bp-radio__input {
		appearance: none;
		-webkit-appearance: none;
		flex-shrink: 0;
		width: var(--_size);
		height: var(--_size);
		border: var(--_border);
		border-radius: var(--bp-radius-full);
		background-color: var(--_background);
		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease);
		cursor: pointer;
	}

	/* The dot is rendered as a ::before pseudo on the label element,
	   positioned relative to itself using a negative margin trick so
	   it overlaps the input circle. We use the sibling combinator. */
	.bp-radio__label {
		position: relative;
		font-size: var(--bp-text-base);
		color: var(--_label-color);
		line-height: var(--bp-leading-normal);
	}

	/* Dot pseudo-element — positioned to float over the input circle */
	.bp-radio__label::before {
		content: '';
		position: absolute;
		/* center dot over the input: input is --_size wide, dot is --_dot-size wide */
		left: calc(-1 * var(--_gap) - var(--_size) / 2 - var(--_dot-size) / 2);
		top: 50%;
		transform: translateY(-50%) scale(0);
		width: var(--_dot-size);
		height: var(--_dot-size);
		border-radius: var(--bp-radius-full);
		background-color: var(--_color);
		transition: transform var(--bp-duration-fast) var(--bp-ease);
		pointer-events: none;
	}

	/* Checked state: show dot and switch border to accent color */
	.bp-radio__input:checked {
		border-color: var(--_color);
	}

	.bp-radio__input:checked + .bp-radio__label::before {
		transform: translateY(-50%) scale(1);
	}

	/* Hover state */
	.bp-radio:hover .bp-radio__input:not(:disabled) {
		border-color: var(--_color);
	}

	/* Focus-visible ring */
	.bp-radio__input:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Disabled state */
	.bp-radio__input:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.bp-radio:has(.bp-radio__input:disabled) {
		cursor: not-allowed;
		opacity: 0.5;
	}

	/* ── Group ── */
	.bp-radio-group {
		--_group-gap: var(--radio-group-gap, var(--bp-space-3));
		--_error-color: var(--radio-error-color, var(--bp-color-error));

		display: flex;
		flex-direction: column;
		gap: var(--_group-gap);
		border: none;
		padding: 0;
		margin: 0;
	}

	.bp-radio-group__legend {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
		margin-block-end: var(--bp-space-1);
		padding: 0;
		float: left;
		width: 100%;
	}

	/* Horizontal layout modifier */
	.bp-radio-group--horizontal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--radio-group-gap-horizontal, var(--bp-space-6));
	}

	/* Error message */
	.bp-radio-group__error {
		font-size: var(--bp-text-xs);
		color: var(--_error-color);
		margin: 0;
	}

	/* Error cascade: invalid fieldset highlights all inputs in the group */
	.bp-radio-group[aria-invalid='true'] .bp-radio__input {
		border-color: var(--_error-color);
	}

	.bp-radio-group[aria-invalid='true'] .bp-radio__input:checked {
		border-color: var(--_error-color);
	}

	.bp-radio-group[aria-invalid='true'] .bp-radio__input:checked + .bp-radio__label::before {
		background-color: var(--_error-color);
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --skeleton-color:       base color (default: --bp-color-bg-subtle)
	 * --skeleton-highlight:   shimmer highlight (default: --bp-color-bg-elevated)
	 * --skeleton-radius:      border radius (default: --bp-radius-md)
	 * --skeleton-duration:    animation duration (default: 1.5s)
	 *
	 * --spinner-color:     spinner track color (default: --bp-color-border)
	 * --spinner-arc-color: spinner arc color (default: --bp-primary)
	 * --spinner-size:         diameter (default: 1.5rem)
	 * --spinner-width:        stroke width (default: 2px)
	 * --spinner-duration:     rotation duration (default: 0.7s)
	 */

	/* ─── Skeleton shimmer animation ─────────────────────────── */
	@keyframes bp-shimmer {
		from { background-position: -200% center; }
		to   { background-position: 200% center; }
	}

	/* ─── Skeleton ───────────────────────────────────────────── */
	.bp-skeleton {
		--_color: var(--skeleton-color, var(--bp-color-bg-subtle));
		--_highlight: var(--skeleton-highlight, var(--bp-color-bg-elevated));
		--_radius: var(--skeleton-radius, var(--bp-radius-md));
		--_duration: var(--skeleton-duration, 1.5s);

		display: block;
		border-radius: var(--_radius);
		background: linear-gradient(
			90deg,
			var(--_color) 25%,
			var(--_highlight) 50%,
			var(--_color) 75%
		);
		background-size: 200% 100%;
		animation: bp-shimmer var(--_duration) ease-in-out infinite;
	}

	/* ─── Skeleton shape variants ────────────────────────────── */
	.bp-skeleton--text {
		height: 1em;
		width: 100%;
	}

	.bp-skeleton--heading {
		height: 1.5em;
		width: 60%;
	}

	.bp-skeleton--circle {
		border-radius: 50%;
	}

	.bp-skeleton--rect {
		border-radius: 0;
	}

	/* ─── Spinner animation ──────────────────────────────────── */
	@keyframes bp-spin {
		to { transform: rotate(360deg); }
	}

	/* ─── Spinner ────────────────────────────────────────────── */
	.bp-spinner {
		--_color: var(--spinner-color, color-mix(in srgb, var(--bp-primary) 20%, transparent));
		--_arc-color: var(--spinner-arc-color, var(--bp-primary));
		--_size: var(--spinner-size, 1.5rem);
		--_width: var(--spinner-width, 2px);
		--_duration: var(--spinner-duration, 0.7s);

		display: inline-block;
		width: var(--_size);
		height: var(--_size);
		border-radius: 50%;
		border: var(--_width) solid var(--_color);
		border-top-color: var(--_arc-color);
		animation: bp-spin var(--_duration) linear infinite;
		flex-shrink: 0;
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-skeleton {
			animation: none;
			background: var(--_color);
		}

		.bp-spinner {
			animation: none;
			border-top-color: var(--_arc-color);
			opacity: 0.6;
		}
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --table-border:        cell border (default: 1px solid --bp-color-border)
	 * --table-radius:        wrapper border radius (default: --bp-radius-lg)
	 * --table-background:            row background (default: --bp-color-bg)
	 * --table-background-alt:        striped row background (default: --bp-color-bg-subtle)
		 * --table-background-head:       header background (default: --bp-color-bg-subtle)
	 * --table-sort-color:    sort icon active color (default: --bp-primary)
	 * --table-padding:       cell padding (default: --bp-space-3 --bp-space-4)
	 */

	/* ─── Scroll wrapper ─────────────────────────────────────── */
	.bp-table-wrap {
		--_border: var(--table-border, 1px solid var(--bp-color-border));
		--_radius: var(--table-radius, var(--bp-radius-lg));

		overflow-x: auto;
		border: var(--_border);
		border-radius: var(--_radius);
	}

	/* ─── Table ──────────────────────────────────────────────── */
	.bp-table {
		--_background: var(--table-background, var(--bp-color-bg));
		--_background-alt: var(--table-background-alt, var(--bp-color-bg-subtle));
		--_background-head: var(--table-background-head, var(--bp-color-bg-subtle));
		--_sort-color: var(--table-sort-color, var(--bp-primary));
		--_padding: var(--table-padding, var(--bp-space-3) var(--bp-space-4));

		width: 100%;
		border-collapse: collapse;
		font-size: var(--bp-text-sm);
		background-color: var(--_background);
	}

	/* ─── Header ─────────────────────────────────────────────── */
	.bp-table thead {
		background-color: var(--_background-head);
	}

	.bp-table th {
		padding: var(--_padding);
		text-align: start;
		font-weight: var(--bp-font-semibold);
		color: var(--bp-color-text-muted);
		white-space: nowrap;
		border-bottom: var(--_border);
	}

	/* ─── Sortable headers ───────────────────────────────────── */
	.bp-table th[aria-sort] {
		cursor: pointer;
		user-select: none;
	}

	.bp-table th[aria-sort]:hover {
		color: var(--bp-color-text);
	}

	.bp-table th[aria-sort]::after {
		content: " ↕" / "";
		opacity: 0.4;
		font-size: 0.75em;
	}

	.bp-table th[aria-sort="ascending"]::after {
		content: " ↑" / "";
		opacity: 1;
		color: var(--_sort-color);
	}

	.bp-table th[aria-sort="descending"]::after {
		content: " ↓" / "";
		opacity: 1;
		color: var(--_sort-color);
	}

	/* ─── Body ───────────────────────────────────────────────── */
	.bp-table td {
		padding: var(--_padding);
		border-bottom: var(--_border);
		color: var(--bp-color-text);
		vertical-align: middle;
	}

	.bp-table tbody tr:last-child td {
		border-bottom: none;
	}

	/* ─── Hover ──────────────────────────────────────────────── */
	.bp-table tbody tr:hover td {
		background-color: var(--table-background, var(--bp-color-bg-subtle));
	}

	/* ─── Striped variant ────────────────────────────────────── */
	.bp-table--striped tbody tr:nth-child(even) td {
		background-color: var(--_background-alt);
	}

	/* ─── Selected row ───────────────────────────────────────── */
	.bp-table tbody tr[aria-selected="true"] td {
		background-color: color-mix(in srgb, var(--bp-primary) 8%, transparent);
	}

	/* ─── Numeric column ─────────────────────────────────────── */
	.bp-table .bp-table__num {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	/* ─── Empty state ────────────────────────────────────────── */
	.bp-table__empty {
		text-align: center;
		color: var(--bp-color-text-muted);
		padding-block: var(--bp-space-8);
	}
}
@layer bp-components {
	/**
	 * .bp-tabs
	 * Accessible tabs — JS drives aria-selected, CSS drives all visuals.
	 * Public API:
	 *   --tabs-accent    Active tab underline / left-border color
	 *   --tabs-border    Tab list bottom border
	 *   --tabs-gap       Space between tab buttons
	 */
	.bp-tabs {
		--_accent: var(--tabs-accent, var(--bp-primary));
		--_border: var(--tabs-border, 1px solid var(--bp-color-border));
		--_gap: var(--tabs-gap, var(--bp-space-2));

		container-type: inline-size;
		display: flex;
		flex-direction: column;
	}

	.bp-tabs__list {
		display: flex;
		flex-direction: row;
		gap: var(--_gap);
		border-bottom: var(--_border);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.bp-tabs__tab {
		position: relative;
		appearance: none;
		background: none;
		border: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		padding: var(--bp-space-3) var(--bp-space-4);
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		white-space: nowrap;
		transition:
			color var(--bp-duration-fast) var(--bp-ease),
			border-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-tabs__tab:hover {
		color: var(--bp-color-text);
	}

	.bp-tabs__tab:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-tabs__tab[aria-selected='true'] {
		color: var(--_accent);
		border-bottom-color: var(--_accent);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-tabs__panel {
		padding: var(--bp-space-5) 0;
		color: var(--bp-color-text);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-loose);
	}

	.bp-tabs__panel[hidden] {
		display: none;
	}

	@container (inline-size < 480px) {
		.bp-tabs__list {
			flex-direction: column;
			border-bottom: none;
			border-inline-start: var(--_border);
			gap: 0;
		}

		.bp-tabs__tab {
			border-bottom: none;
			border-inline-start: 3px solid transparent;
			margin-bottom: 0;
			margin-inline-start: -1px;
			text-align: start;
		}

		.bp-tabs__tab[aria-selected='true'] {
			border-inline-start-color: var(--_accent);
		}
	}

	@container (inline-size > 0) {
		.bp-tabs__tab {
			font-size: clamp(var(--bp-text-sm), 3cqi, var(--bp-text-base));
		}

		.bp-tabs__panel {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}
@layer bp-components {
	/**
	 * .bp-toggle
	 * A styled checkbox switch using role="switch".
	 *
	 * Public API:
	 *   --toggle-track-background   Track color (re-declare in :checked for checked state)
	 *   --toggle-track-radius      Track border radius
	 *   --toggle-track-width       Track width
	 *   --toggle-track-height      Track height
	 *   --toggle-thumb-background   Thumb fill color
	 *   --toggle-thumb-size        Thumb diameter
	 *   --toggle-thumb-shadow      Thumb drop shadow
	 *   --toggle-duration          Transition duration
	 *   --toggle-label-color       Label text color
	 *   --toggle-label-gap         Gap between track and label
	 *   --toggle-disabled-opacity  Opacity when disabled
	 */
	.bp-toggle {
		--_track-background: var(--toggle-track-background, var(--bp-color-border));
		--_track-radius: var(--toggle-track-radius, var(--bp-radius-full));
		--_track-width: var(--toggle-track-width, 2.75rem);
		--_track-height: var(--toggle-track-height, 1.5rem);
		--_thumb-background: var(--toggle-thumb-background, #fff);
		--_thumb-size: var(--toggle-thumb-size, 1.125rem);
		--_thumb-shadow: var(--toggle-thumb-shadow, var(--bp-shadow-sm));
		--_duration: var(--toggle-duration, var(--bp-duration-fast));
		--_label-color: var(--toggle-label-color, var(--bp-color-text));
		--_label-gap: var(--toggle-label-gap, var(--bp-space-3));
		--_disabled-opacity: var(--toggle-disabled-opacity, 0.45);

		display: inline-flex;
		align-items: center;
		gap: var(--_label-gap);
		cursor: pointer;
		user-select: none;
	}

	/* Visually hidden input — stays in tab order */
	.bp-toggle__input {
		opacity: 0;
		position: absolute;
		width: 0;
		height: 0;
		margin: 0;
	}

	.bp-toggle__track {
		position: relative;
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		width: var(--_track-width);
		height: var(--_track-height);
		background-color: var(--_track-background);
		border-radius: var(--_track-radius);
		transition: background-color var(--_duration) var(--bp-ease);
	}

	.bp-toggle__thumb {
		position: absolute;
		/* padding = (track-height - thumb-size) / 2 */
		left: calc((var(--_track-height) - var(--_thumb-size)) / 2);
		width: var(--_thumb-size);
		height: var(--_thumb-size);
		background-color: var(--_thumb-background);
		border-radius: var(--bp-radius-full);
		box-shadow: var(--_thumb-shadow);
		transition: transform var(--_duration) var(--bp-ease);
	}

	/* Checked state — track color */
	.bp-toggle__input:checked + .bp-toggle__track {
		--toggle-track-background: var(--bp-primary);
		background-color: var(--toggle-track-background);
	}

	/* Checked state — thumb translates right */
	.bp-toggle__input:checked + .bp-toggle__track .bp-toggle__thumb {
		transform: translateX(
			calc(var(--_track-width) - var(--_thumb-size) - (var(--_track-height) - var(--_thumb-size)))
		);
	}

	/* Focus ring on track when input is focused */
	.bp-toggle__input:focus-visible + .bp-toggle__track {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
	}

	/* Label text */
	.bp-toggle__label {
		font-size: var(--bp-text-base);
		color: var(--_label-color);
		line-height: var(--bp-leading-normal);
	}

	/* Disabled state */
	.bp-toggle__input:disabled + .bp-toggle__track {
		opacity: var(--_disabled-opacity);
	}

	.bp-toggle:has(.bp-toggle__input:disabled) {
		cursor: not-allowed;
		opacity: var(--_disabled-opacity);
	}

	/* Small variant */
	.bp-toggle--sm {
		--toggle-track-width: 2rem;
		--toggle-track-height: 1.125rem;
		--toggle-thumb-size: 0.75rem;
	}

	.bp-toggle--sm .bp-toggle__label {
		font-size: var(--bp-text-sm);
	}

	/* Large variant */
	.bp-toggle--lg {
		--toggle-track-width: 3.5rem;
		--toggle-track-height: 2rem;
		--toggle-thumb-size: 1.5rem;
	}

	.bp-toggle--lg .bp-toggle__label {
		font-size: var(--bp-text-lg);
	}

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.bp-toggle__track,
		.bp-toggle__thumb {
			transition: none;
		}
	}
}
@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --tooltip-background:       background color (default: --bp-color-text)
	 * --tooltip-color:    text color (default: --bp-color-bg)
	 * --tooltip-radius:   border radius (default: --bp-radius-md)
	 * --tooltip-size:     font size (default: --bp-text-xs)
	 * --tooltip-padding:  padding (default: --bp-space-1 --bp-space-2)
	 * --tooltip-delay:    show delay (default: 0.3s)
	 * --tooltip-offset:   distance from trigger (default: 0.5rem)
	 * --tooltip-max-width: max bubble width (default: 300px)
	 */

	/* ─── Wrapper ────────────────────────────────────────────── */
	.bp-tooltip-wrap {
		position: relative;
		display: inline-flex;
	}

	/* ─── Tooltip bubble ─────────────────────────────────────── */
	.bp-tooltip {
		--_background: var(--tooltip-background, var(--bp-color-text));
		--_color: var(--tooltip-color, var(--bp-color-bg));
		--_radius: var(--tooltip-radius, var(--bp-radius-md));
		--_size: var(--tooltip-size, var(--bp-text-xs));
		--_padding: var(--tooltip-padding, var(--bp-space-1) var(--bp-space-2));
		--_delay: var(--tooltip-delay, 0.3s);
		--_offset: var(--tooltip-offset, 0.5rem);
		--_max-width: var(--tooltip-max-width, 300px);

		position: absolute;
		bottom: calc(100% + var(--_offset));
		inset-inline-start: 50%;
		translate: -50% 0;
		z-index: 100;

		max-width: var(--_max-width);
		width: max-content;
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border-radius: var(--_radius);
		font-size: var(--_size);
		line-height: 1.4;
		text-wrap: pretty;
		pointer-events: none;

		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease) var(--_delay),
			visibility 0s var(--_delay);
	}

	/* ─── Arrow ──────────────────────────────────────────────── */
	.bp-tooltip::after {
		content: "" / "";
		position: absolute;
		top: 100%;
		inset-inline-start: 50%;
		translate: -50% 0;
		border: 5px solid transparent;
		border-top-color: var(--_background);
	}

	/* ─── Show on hover / focus ──────────────────────────────── */
	.bp-tooltip-wrap:hover .bp-tooltip,
	.bp-tooltip-wrap:focus-within .bp-tooltip {
		opacity: 1;
		visibility: visible;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease) var(--_delay),
			visibility 0s var(--_delay);
	}

	/* ─── Placement variants ─────────────────────────────────── */
	.bp-tooltip--bottom {
		bottom: auto;
		top: calc(100% + var(--_offset));
	}

	.bp-tooltip--bottom::after {
		top: auto;
		bottom: 100%;
		border-top-color: transparent;
		border-bottom-color: var(--_background);
	}

	.bp-tooltip--start {
		bottom: auto;
		inset-inline-start: auto;
		inset-inline-end: calc(100% + var(--_offset));
		top: 50%;
		translate: 0 -50%;
	}

	.bp-tooltip--start::after {
		top: 50%;
		inset-inline-start: 100%;
		translate: 0 -50%;
		border-top-color: transparent;
		border-inline-start-color: var(--_background);
	}

	.bp-tooltip--end {
		bottom: auto;
		inset-inline-start: calc(100% + var(--_offset));
		top: 50%;
		translate: 0 -50%;
	}

	.bp-tooltip--end::after {
		top: 50%;
		inset-inline-end: 100%;
		inset-inline-start: auto;
		translate: 0 -50%;
		border-top-color: transparent;
		border-inline-end-color: var(--_background);
	}

	/* ─── Anchor Positioning (progressive enhancement) ──────── */
	/*
	 * Opt in per instance by setting --tooltip-anchor to a unique
	 * dashed-ident on the wrapper:
	 *   style="--tooltip-anchor: --my-tip"
	 *
	 * Tried making this automatic via `anchor-scope` (one shared
	 * anchor-name re-scoped per .bp-tooltip-wrap) so no naming would be
	 * needed — but verified in Chrome 150 that anchor-scope combined with
	 * position-try-fallbacks cross-contaminates between sibling tooltip
	 * instances once a fallback position engages: a tooltip can render
	 * anchored to a *different* trigger's position. Reverted to explicit
	 * per-instance names until that engine interaction is reliable.
	 *
	 * When supported, the tooltip escapes overflow:hidden containers
	 * and renders above everything. Falls back to position:absolute.
	 */
	@supports (anchor-name: --x) {
		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) {
			/* Trigger gets anchor-name from the wrapper's custom property */
			> :first-child {
				anchor-name: var(--tooltip-anchor);
			}
		}

		/* Default anchor position: above the trigger */
		@position-try --bp-tooltip-bottom {
			bottom: auto;
			top: calc(anchor(bottom) + var(--_offset));
			translate: -50% 0;
		}

		@position-try --bp-tooltip-start {
			bottom: auto;
			inset-inline-start: auto;
			inset-inline-end: calc(anchor(left) + var(--_offset));
			top: anchor(center);
			translate: 0 -50%;
		}

		@position-try --bp-tooltip-end {
			bottom: auto;
			inset-inline-start: calc(anchor(right) + var(--_offset));
			top: anchor(center);
			translate: 0 -50%;
		}

		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) .bp-tooltip {
			position: fixed;
			position-anchor: var(--tooltip-anchor);
			bottom: calc(anchor(top) + var(--_offset) * -1);
			inset-inline-start: anchor(center);
			translate: -50% -100%;
			/* Try bottom, then sides if tooltip overflows viewport */
			position-try-fallbacks: --bp-tooltip-bottom, --bp-tooltip-end, --bp-tooltip-start;
			/* Remove z-index — top layer handles stacking */
			z-index: unset;
		}

		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) .bp-tooltip--bottom {
			bottom: auto;
			top: calc(anchor(bottom) + var(--_offset));
			translate: -50% 0;
			/* Flip order when consumer prefers bottom */
			position-try-fallbacks: --bp-tooltip-bottom, --bp-tooltip-end, --bp-tooltip-start;
		}
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-tooltip {
			transition: none;
		}
	}
}
/* ─── Starlight token overrides — BPL palette ────────────────
   Starlight dark = :root default. Light = [data-theme='light'].
   --sl-color-black is the PAGE BG (dark=near-black, light=white)
   --sl-color-white is the LIGHTEST TEXT.                        */

:root {
	--sl-font: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
	--sl-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

	/* Accent — dark mode mint */
	--sl-color-accent-low: #1a3d2e;
	--sl-color-accent: #6fd9ae;
	--sl-color-accent-high: #4dc896;

	/* Gray scale — dark mode: 1=lightest text → 6=nav bg → black=page bg */
	--sl-color-white: #f2eee6;
	--sl-color-gray-1: #cbc5bb;
	--sl-color-gray-2: #9e9a93;
	--sl-color-gray-3: #4a5248;
	--sl-color-gray-4: #2d3b30;
	--sl-color-gray-5: #242118;
	--sl-color-gray-6: #1e1c17;
	--sl-color-black: #16140f;

	/* Semantic overrides — belt and suspenders */
	--sl-color-bg: #16140f;
	--sl-color-bg-nav: #1e1c17;
	--sl-color-bg-sidebar: #1e1c17;
	--sl-color-bg-inline-code: #242118;
	--sl-color-text: #f2eee6;
	--sl-color-text-accent: #6fd9ae;
	--sl-color-hairline: #2d3b30;
	--sl-color-hairline-light: #1f2920;
	--sl-color-hairline-shade: #16140f;
}

[data-theme='light'] {
	/* Accent — light mode deeper mint for contrast */
	--sl-color-accent-low: #ddf5ec;
	--sl-color-accent: #2e9e72;
	--sl-color-accent-high: #1a6644;

	/* Gray scale — light mode: 1=darkest text → 6=sidebar bg → black=page bg */
	--sl-color-white: #181715;
	--sl-color-gray-1: #3a3733;
	--sl-color-gray-2: #6b6760;
	--sl-color-gray-3: #9e9a93;
	--sl-color-gray-4: #cbc5bb;
	--sl-color-gray-5: #e5e0d8;
	--sl-color-gray-6: #f2efe9;
	--sl-color-gray-7: #f2efe9;
	--sl-color-black: #f8f6f2;

	/* Semantic overrides */
	--sl-color-bg: #f8f6f2;
	--sl-color-bg-nav: #f2efe9;
	--sl-color-bg-sidebar: #f2efe9;
	--sl-color-bg-inline-code: #ede9e2;
	--sl-color-text: #181715;
	--sl-color-text-accent: #2e9e72;
	--sl-color-hairline: #e5e0d8;
	--sl-color-hairline-light: #ede9e2;
	--sl-color-hairline-shade: #cbc5bb;
}

/* ─── Smooth theme transitions for Starlight layout elements ──
   --sl-color-* vars are not @property registered, so we can't
   animate them directly. Instead, transition the concrete CSS
   properties on the key structural elements.                   */
@layer bp-utilities {
	:root {
		--_theme-duration: 220ms;
		--_theme-ease: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.page,
	.sidebar,
	header.header,
	nav.sidebar-content,
	.content-panel,
	.right-sidebar,
	.sl-markdown-content,
	:root body,
	.sl-flex {
		transition:
			background-color var(--_theme-duration) var(--_theme-ease),
			border-color var(--_theme-duration) var(--_theme-ease),
			color var(--_theme-duration) var(--_theme-ease);
	}
}

@layer bp-components {
	/**
	 * .bp-theme-toggle
	 * Theme toggle button. Sets data-theme on <html>.
	 * The ripple effect is pure CSS via @keyframes.
	 */
	.bp-theme-toggle {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--bp-radius-full);
		background: none;
		border: 1px solid var(--bp-color-border);
		cursor: pointer;
		color: var(--bp-color-text);
		position: relative;
		overflow: hidden;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			border-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-theme-toggle:hover {
		background-color: var(--bp-color-bg-subtle);
		border-color: var(--bp-color-border-strong);
	}

	.bp-theme-toggle:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Ripple effect on click */
	.bp-theme-toggle::after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: var(--bp-primary);
		border-radius: inherit;
		opacity: 0;
		transform: scale(0);
		pointer-events: none;
	}

	.bp-theme-toggle:active::after {
		animation: bp-ripple var(--bp-duration-normal) var(--bp-ease) forwards;
	}

	@keyframes bp-ripple {
		from {
			opacity: 0.25;
			transform: scale(0);
		}
		to {
			opacity: 0;
			transform: scale(2);
		}
	}

	/* Icon swap based on current theme */
	.bp-theme-toggle .icon-sun {
		display: none;
	}
	.bp-theme-toggle .icon-moon {
		display: block;
	}

	[data-theme='dark'] .bp-theme-toggle .icon-sun {
		display: block;
	}
	[data-theme='dark'] .bp-theme-toggle .icon-moon {
		display: none;
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme='light']) .bp-theme-toggle .icon-sun {
			display: block;
		}
		:root:not([data-theme='light']) .bp-theme-toggle .icon-moon {
			display: none;
		}
	}
}
@layer bp-components {
	/**
	 * #bp-toast-region
	 * Fixed stack container — bottom-right, isolated stacking context.
	 * Created lazily by bp-toast.js; do not place manually.
	 */
	#bp-toast-region {
		position: fixed;
		bottom: var(--bp-space-6);
		right: var(--bp-space-6);
		display: flex;
		flex-direction: column-reverse;
		gap: var(--bp-space-2);
		isolation: isolate;
		list-style: none;
		margin: 0;
		padding: 0;
		pointer-events: none;
		width: var(--toast-width, 22rem);
		max-width: calc(100vw - var(--bp-space-8));
		z-index: 1000;
	}

	/**
	 * .bp-toast
	 * Individual notification item.
	 * Public API:
	 *   --toast-background       Background override
	 *   --toast-color    Text color override
	 *   --toast-border   Border color override (default: transparent)
	 *   --toast-width    Max width (set on region)
	 *   --toast-radius   Border radius
	 */
	.bp-toast {
		--_background: var(--toast-background, var(--bp-color-bg-elevated));
		--_color: var(--toast-color, var(--bp-color-text));
		--_radius: var(--toast-radius, var(--bp-radius-lg));
		--_border: var(--toast-border, transparent);

		display: flex;
		align-items: flex-start;
		gap: var(--bp-space-3);
		padding: var(--bp-space-4);
		background-color: var(--_background);
		color: var(--_color);
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
		box-shadow: var(--bp-shadow-lg);
		pointer-events: auto;
		container-type: inline-size;

		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease-spring); /* spring for slide feel */
	}

	@starting-style {
		.bp-toast {
			opacity: 0;
			transform: translateY(0.75rem) scale(0.97);
		}
	}

	.bp-toast.is-dismissing {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.97);
		pointer-events: none;
	}

	/* ── Semantic variants ── */
	.bp-toast--success {
		--toast-background: color-mix(in srgb, var(--bp-color-success) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-success) 30%, transparent);
	}

	.bp-toast--error {
		--toast-background: color-mix(in srgb, var(--bp-color-error) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-error) 30%, transparent);
	}

	.bp-toast--warning {
		--toast-background: color-mix(in srgb, var(--bp-color-warning) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-warning) 30%, transparent);
	}

	.bp-toast--info {
		--toast-background: color-mix(in srgb, var(--bp-color-info) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-info) 30%, transparent);
	}

	/* ── Sub-elements ── */
	.bp-toast__icon {
		font-size: var(--bp-text-lg);
		line-height: 1;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.bp-toast__body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-2);
	}

	.bp-toast__message {
		margin: 0;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
		line-height: var(--bp-leading-normal);
	}

	.bp-toast__action {
		align-self: flex-start;
		background: none;
		border: none;
		padding: 0;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-primary);
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.bp-toast__action:hover {
		color: var(--bp-primary-hover, var(--bp-primary));
		text-decoration: none;
	}

	.bp-toast__action:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-toast__close {
		display: grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		flex-shrink: 0;
		background: none;
		border: none;
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		font-size: var(--bp-text-base);
		line-height: 1;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
		margin-top: -2px;
	}

	.bp-toast__close:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text);
	}

	.bp-toast__close:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}
}
@layer bp-utilities {
	.bp-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}