/* Buttons. */
.bl-button {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: var(--bl-control-height);
	align-items: center;
	justify-content: center;
	gap: var(--bl-space-2);
	padding: 0.625rem var(--bl-space-5);
	border: 2px solid var(--bl-color-accent);
	border-radius: var(--bl-radius-md);
	background: transparent;
	box-shadow: none;
	color: var(--bl-color-text);
	font: inherit;
	font-size: var(--bl-font-size-sm);
	font-weight: var(--bl-font-weight-semibold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--bl-transition-fast) var(--bl-ease-out), opacity var(--bl-transition-fast) var(--bl-ease-out);
}

.bl-button:hover,
.bl-button--primary:hover {
	border-color: var(--bl-color-accent-hover);
	background: transparent;
	color: var(--bl-color-text);
	opacity: 0.92;
}

.bl-button:active,
.bl-button--primary:active {
	opacity: 0.84;
}

.bl-button--text {
	min-width: 0;
	min-height: 2rem;
	padding: var(--bl-space-1) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bl-color-accent);
	opacity: 1;
	text-decoration: none;
}

.bl-button--text:hover {
	background: transparent;
	color: var(--bl-color-accent-hover);
	opacity: 0.86;
}

.bl-button--small {
	min-height: 2.25rem;
	padding: var(--bl-space-2) var(--bl-space-3);
	font-size: var(--bl-font-size-xs);
}

.bl-button--large {
	min-height: 3.25rem;
	padding: var(--bl-space-3) var(--bl-space-6);
	font-size: var(--bl-font-size-md);
}

.bl-button--icon {
	width: var(--bl-control-height);
	padding: var(--bl-space-2);
}

.bl-button--full {
	width: 100%;
}

.bl-button[disabled],
.bl-button[aria-disabled="true"] {
	border-color: var(--bl-color-border);
	background: var(--bl-color-surface-active);
	color: var(--bl-color-text-disabled);
	cursor: not-allowed;
	opacity: 1;
}

.bl-button svg {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	fill: currentcolor;
}

/* Reusable theme-owned forms. Content-specific forms live in content.css. */
.bl-form {
	display: grid;
	gap: var(--bl-space-4);
}

.bl-form :where(label, legend) {
	color: var(--bl-color-text);
	font-size: var(--bl-font-size-sm);
	font-weight: var(--bl-font-weight-semibold);
}

.bl-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--bl-control-height);
	padding: 0.625rem var(--bl-space-3);
	border: 1px solid var(--bl-color-border-strong);
	border-radius: var(--bl-radius-md);
	background: var(--bl-color-bg-soft);
	box-shadow: none;
	color: var(--bl-color-text);
	font: inherit;
	font-size: var(--bl-font-size-md);
	line-height: 1.4;
	transition: border-color var(--bl-transition-fast) var(--bl-ease-out), background-color var(--bl-transition-fast) var(--bl-ease-out);
}

.bl-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.bl-form select {
	appearance: auto;
}

.bl-form :where(input, textarea)::placeholder {
	color: var(--bl-color-text-muted);
	opacity: 1;
}

.bl-form :where(input:not([type="hidden"]), select, textarea):focus-visible {
	border-color: var(--bl-color-accent);
	outline: var(--bl-focus-width) solid var(--bl-color-accent);
	outline-offset: 1px;
}

.bl-form :where(input, select, textarea):disabled {
	border-color: var(--bl-color-border);
	background: var(--bl-color-bg-subtle);
	color: var(--bl-color-text-disabled);
	cursor: not-allowed;
}

.bl-form :where(input[type="checkbox"], input[type="radio"]) {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 var(--bl-space-2) 0 0;
	accent-color: var(--bl-color-accent);
	vertical-align: -0.2em;
}

.bl-form__field {
	display: grid;
	gap: var(--bl-space-2);
	margin: 0;
}

.bl-form__help {
	color: var(--bl-color-text-muted);
	font-size: var(--bl-font-size-sm);
}

.bl-form__message {
	margin: 0;
	font-size: var(--bl-font-size-sm);
	font-weight: var(--bl-font-weight-medium);
}

.bl-form__message--error {
	color: var(--bl-color-danger);
}

.bl-form__message--success {
	color: var(--bl-color-success);
}

/* Surfaces and generic cards. */
.bl-surface,
.bl-card {
	border: 1px solid var(--bl-color-border);
	border-radius: var(--bl-radius-lg);
	background: var(--bl-color-surface);
}

.bl-surface {
	padding: var(--bl-space-5);
}

.bl-surface--raised {
	background: var(--bl-color-surface-raised);
	box-shadow: var(--bl-shadow-sm);
}

.bl-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.bl-card--interactive {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bl-transition-base) var(--bl-ease-out), border-color var(--bl-transition-base) var(--bl-ease-out), box-shadow var(--bl-transition-base) var(--bl-ease-out);
}

.bl-card--interactive:hover {
	border-color: var(--bl-color-border-strong);
	background: var(--bl-color-surface-hover);
	box-shadow: var(--bl-shadow-sm);
}

.bl-card__header,
.bl-card__body,
.bl-card__footer {
	padding: var(--bl-space-5);
}

.bl-card__header + .bl-card__body,
.bl-card__body + .bl-card__footer {
	padding-top: 0;
}

.bl-card__footer {
	margin-top: auto;
	color: var(--bl-color-text-secondary);
}

/* Badges. */
.bl-badge {
	display: inline-flex;
	min-height: 1.625rem;
	align-items: center;
	gap: var(--bl-space-1);
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--bl-color-border);
	border-radius: var(--bl-radius-pill);
	background: var(--bl-color-bg-subtle);
	color: var(--bl-color-text-secondary);
	font-size: var(--bl-font-size-xs);
	font-weight: var(--bl-font-weight-semibold);
	line-height: 1.2;
}

.bl-badge--accent {
	border-color: var(--bl-color-accent-soft);
	background: var(--bl-color-accent-soft);
	color: var(--bl-color-text);
}

.bl-badge--success {
	background: var(--bl-color-success-soft);
	color: var(--bl-color-success);
}

.bl-badge--warning {
	background: var(--bl-color-warning-soft);
	color: var(--bl-color-warning);
}

.bl-badge--danger {
	background: var(--bl-color-danger-soft);
	color: var(--bl-color-danger);
}

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

/* Notices. */
.bl-notice {
	padding: var(--bl-space-4) var(--bl-space-5);
	border: 1px solid var(--bl-color-border-strong);
	border-left: 3px solid var(--bl-color-info);
	border-radius: var(--bl-radius-md);
	background: var(--bl-color-info-soft);
	color: var(--bl-color-text-secondary);
}

.bl-notice--info {
	border-left-color: var(--bl-color-info);
	background: var(--bl-color-info-soft);
}

.bl-notice--success {
	border-left-color: var(--bl-color-success);
	background: var(--bl-color-success-soft);
}

.bl-notice--warning {
	border-left-color: var(--bl-color-warning);
	background: var(--bl-color-warning-soft);
}

.bl-notice--danger {
	border-left-color: var(--bl-color-danger);
	background: var(--bl-color-danger-soft);
}

.bl-notice__title {
	margin: 0 0 var(--bl-space-1);
	color: var(--bl-color-text);
	font-size: var(--bl-font-size-md);
	font-weight: var(--bl-font-weight-semibold);
}

.bl-notice > :last-child {
	margin-bottom: 0;
}

.bl-notice a {
	color: inherit;
	font-weight: var(--bl-font-weight-semibold);
	text-decoration: none;
}

.bl-notice a:hover {
	opacity: 0.78;
}

/* Strictly scoped responsive tables. */
.bl-table-wrap,
.bl-prose > .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bl-table,
.bl-prose > table,
.bl-prose > .wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	color: var(--bl-color-text-secondary);
	font-size: var(--bl-font-size-sm);
	font-variant-numeric: tabular-nums;
}

:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) caption {
	padding-bottom: var(--bl-space-3);
	color: var(--bl-color-text-muted);
	font-size: var(--bl-font-size-sm);
	text-align: left;
}

:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) :where(th, td) {
	padding: var(--bl-space-3) var(--bl-space-4);
	border-bottom: 1px solid var(--bl-color-border);
	text-align: left;
	vertical-align: top;
}

:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) th {
	color: var(--bl-color-text);
	font-weight: var(--bl-font-weight-semibold);
}

:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) tbody tr:hover {
	background: var(--bl-color-bg-subtle);
}

:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) .is-numeric,
.bl-table__numeric {
	text-align: right;
}

/* Native accordions. */
.bl-accordion,
.bl-prose > details {
	border-block: 1px solid var(--bl-color-border);
	background: transparent;
}

.bl-accordion + .bl-accordion,
.bl-prose > details + details {
	border-top: 0;
}

.bl-accordion > summary,
.bl-prose > details > summary {
	display: flex;
	min-height: 3.5rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--bl-space-4);
	padding-block: var(--bl-space-4);
	color: var(--bl-color-text);
	font-weight: var(--bl-font-weight-semibold);
	list-style: none;
	cursor: pointer;
}

.bl-accordion > summary::-webkit-details-marker,
.bl-prose > details > summary::-webkit-details-marker {
	display: none;
}

.bl-accordion > summary::after,
.bl-prose > details > summary::after {
	content: "+";
	color: var(--bl-color-text-muted);
	font-size: var(--bl-font-size-xl);
	font-weight: var(--bl-font-weight-regular);
	line-height: 1;
	transition: rotate var(--bl-transition-base) var(--bl-ease-out);
}

.bl-accordion[open] > summary::after,
.bl-prose > details[open] > summary::after {
	rotate: 45deg;
}

.bl-accordion__content,
.bl-accordion > :not(summary),
.bl-prose > details > :not(summary) {
	margin-block: 0 var(--bl-space-5);
	color: var(--bl-color-text-secondary);
}

@media (max-width: 30rem) {
	.bl-button--large:not(.bl-button--icon) {
		width: 100%;
	}

	:where(.bl-table, .bl-prose > table, .bl-prose > .wp-block-table table) :where(th, td) {
		padding-inline: var(--bl-space-3);
	}
}