/* THE COFFEE UNDER AN ARTICLE (2026-08-26). Ported from
   lab/the-coffee-under-an-article.html; the numbers are the lab's. The card
   is the author box's card (padding 12, corner 12 + the xl radius), the
   amounts are the system's segmented control built the way the language
   switch is built, the button is the system's primary button. What is
   Jetpack's — the Donations block's own headings, texts, rule and error
   line — is put away; the theme prints the words. */
:is(.content-column, .wp-block-post-content) .support-box-inner,
:is(.content-column, .wp-block-post-content) .support-box p,
:is(.content-column, .wp-block-post-content) .support-box .donations__amount,
:is(.content-column, .wp-block-post-content) .support-box .donations__donate-button {
	font-family: var(--font-sans);
}
.support-box {
	--card-padding: var(--space-3);
	--card-corner: calc(var(--space-3) + var(--radius-xl));
	margin-top: var(--space-6);
	padding: var(--card-padding);
	border: var(--border-width-default) solid var(--border-default);
	border-radius: var(--card-corner);
}
.support-box-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-2);
}
.support-box-text {
	min-width: 0;
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lg);
	line-height: var(--text-base-line-height);
	font-weight: 400;
}
.support-box-controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	align-self: center;
}
.support-box .wp-block-jetpack-donations,
.support-box .donations__container,
.support-box .donations__content {
	display: contents;
}
.support-box .donations__tab {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.support-box .donations__container::before,
.support-box .donations__container::after {
	content: none;
}
.support-box .donations__tab > h4,
.support-box .donations__tab > p,
.support-box .donations__separator,
.support-box .donations__range-error,
.support-box .donations__nav {
	display: none;
}
.support-box .donations__amounts {
	--groove: var(--space-1);
	--segment: calc(var(--layout-control-height-large) - 2 * var(--groove));
	display: inline-flex;
	box-sizing: border-box;
	height: var(--layout-control-height-large);
	margin: 0;
	padding: var(--groove);
	gap: var(--groove);
	border: 0;
	border-radius: var(--radius-control);
	box-shadow: inset 0 0 0 var(--border-width-default) var(--border);
}
.support-box .donations__amount {
	font-size: var(--text-base);
	display: inline-flex;
	align-items: center;
	min-height: 0;
	height: var(--segment);
	margin: 0;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: calc(var(--radius-control) - var(--groove));
	background: transparent;
	color: var(--text-muted);
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.support-box .donations__amount:hover:not(.is-selected) {
	background: var(--surface-hover);
	color: var(--text);
}
.support-box .donations__amount.is-selected {
	background: var(--surface-track-selected);
	color: var(--text-primary);
	box-shadow: 0 0 0 0.5px var(--border-default);
}
.support-box .donations__amount:active:not(.is-selected) {
	background: var(--surface-pressed);
	color: var(--text-primary);
}
.support-box .donations__amounts.has-chip {
	position: relative;
}
.support-box .donations__amounts.has-chip .donations__amount {
	position: relative;
	z-index: 1;
}
.support-box .donations__amounts.has-chip .donations__amount.is-selected {
	background: transparent;
	box-shadow: none;
}
.support-box .donations__amounts .chip {
	position: absolute;
	z-index: 0;
	top: var(--groove);
	bottom: var(--groove);
	left: 0;
	width: 0;
	border-radius: calc(var(--radius-control) - var(--groove));
	background: var(--surface-track-selected);
	box-shadow:
		0 0 0 0.5px var(--border-default),
		0 1px 2px var(--elevation-contact-color);
	transition:
		left var(--motion-duration-spatial) var(--motion-easing-standard),
		width var(--motion-duration-spatial) var(--motion-easing-standard);
}
.support-box .donations__donate-button-wrapper {
	margin: 0;
}
:is(.content-column, .wp-block-post-content) .support-box .donations__donate-button {
	text-decoration: none;
}
.support-box .donations__donate-button.is-disabled {
	opacity: var(--opacity-disabled);
	pointer-events: none;
}