[data-words] {
	--_words-gap: var(--words-gap-md);
	--_words-radius: var(--words-radius-md);
	--_words-content-px: var(--words-content-px-md);
	--_words-content-py: var(--words-content-py-md);
	--_words-content-min-block-size: var(--words-content-min-block-size-md);
	--_words-toolbar-px: var(--words-toolbar-px-md);
	--_words-toolbar-py: var(--words-toolbar-py-md);
	--_words-button-size: var(--words-button-size-md);
	--_words-font-size: var(--words-font-size-md);
	/* `--_words-accent-*` is TSC-emitted from `lib/recipes/base.ts > words._accent-*`. */
	--_words-selection-bg: color-mix(in srgb, var(--_words-accent-solid) 78%, transparent);
	--_words-selection-color: var(--words-selection-color);
	--_words-check-size: calc(var(--_words-button-size) * 0.46);
	--_words-check-mark-width: calc(var(--_words-check-size) * 0.32);
	--_words-check-mark-height: calc(var(--_words-check-size) * 0.56);
	--_words-check-mark-stroke: var(--words-border-width);
	--_words-check-mark-offset: calc(var(--_words-check-size) * -0.05);
	--toolbar-gap-md: var(--words-toolbar-gap);
	--toolbar-padding-inline-sm: var(--_words-toolbar-px);
	--toolbar-padding-inline-md: var(--_words-toolbar-px);
	--toolbar-padding-block-sm: var(--_words-toolbar-py);
	--toolbar-padding-block-md: var(--_words-toolbar-py);
	--toolbar-control-height-sm: var(--_words-button-size);
	--toolbar-control-height-md: var(--_words-button-size);
	--toolbar-control-px-sm: var(--words-command-px);
	--toolbar-control-px-md: var(--words-command-px);
	--toolbar-control-gap-sm: var(--words-command-gap);
	--toolbar-control-gap-md: var(--words-command-gap);
	--toolbar-font-size-sm: var(--_words-font-size);
	--toolbar-font-size-md: var(--_words-font-size);
	--toolbar-bg: var(--words-toolbar-bg);
	--toolbar-border: transparent;
	--toolbar-shadow: none;
	--toolbar-color: var(--words-command-color);
	--toolbar-font-family: var(--words-font-family);
	--toolbar-line-height: var(--words-line-height);
	--toolbar-group-gap: var(--words-command-gap);
	--toolbar-control-border-width: var(--words-border-width);
	--toolbar-control-border: transparent;
	--toolbar-control-radius: var(--words-command-radius);
	--toolbar-control-bg: transparent;
	--toolbar-control-color: var(--words-command-color);
	--toolbar-control-border-hover: var(--words-command-border-hover);
	--toolbar-control-bg-hover: var(--words-command-bg-hover);
	--toolbar-control-color-hover: var(--words-command-color-hover);
	--toolbar-control-border-active: var(--_words-accent-border);
	--toolbar-control-bg-active: var(--_words-accent-track);
	--toolbar-control-color-active: var(--_words-accent-text);
	--toolbar-focus-shadow: var(--words-focus-shadow);
	--toolbar-disabled-opacity: var(--words-disabled-opacity);
	--toolbar-transition-duration: var(--words-transition-duration);
	--toolbar-transition-ease: var(--words-transition-ease);

	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	max-inline-size: var(--words-max-inline-size);
	overflow: hidden;
	border: var(--words-border-width) solid var(--words-border);
	border-radius: var(--_words-radius);
	background: var(--words-bg);
	box-shadow: var(--words-shadow);
	color: var(--words-color);
	font-family: var(--words-font-family);
	font-size: var(--_words-font-size);
	line-height: var(--words-line-height);
	transition:
		border-color var(--words-transition-duration) var(--words-transition-ease),
		box-shadow var(--words-transition-duration) var(--words-transition-ease),
		background var(--words-transition-duration) var(--words-transition-ease);
}

[data-words][data-size='sm'] {
	--_words-gap: var(--words-gap-sm);
	--_words-radius: var(--words-radius-sm);
	--_words-content-px: var(--words-content-px-sm);
	--_words-content-py: var(--words-content-py-sm);
	--_words-content-min-block-size: var(--words-content-min-block-size-sm);
	--_words-toolbar-px: var(--words-toolbar-px-sm);
	--_words-toolbar-py: var(--words-toolbar-py-sm);
	--_words-button-size: var(--words-button-size-sm);
	--_words-font-size: var(--words-font-size-sm);
}

[data-words][data-size='lg'] {
	--_words-gap: var(--words-gap-lg);
	--_words-radius: var(--words-radius-lg);
	--_words-content-px: var(--words-content-px-lg);
	--_words-content-py: var(--words-content-py-lg);
	--_words-content-min-block-size: var(--words-content-min-block-size-lg);
	--_words-toolbar-px: var(--words-toolbar-px-lg);
	--_words-toolbar-py: var(--words-toolbar-py-lg);
	--_words-button-size: var(--words-button-size-lg);
	--_words-font-size: var(--words-font-size-lg);
}

[data-words][data-variant='outline'] {
	background: transparent;
	box-shadow: none;
}

[data-words][data-variant='ghost'] {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

[data-words]:hover:not([data-disabled]):not([data-readonly]) {
	border-color: var(--words-border-hover);
}

[data-words][data-focused] {
	border-color: var(--_words-accent-border);
	box-shadow: var(--words-focus-shadow);
}

[data-words][data-invalid] {
	border-color: var(--words-invalid-border);
}

[data-words][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-rows: auto auto;
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-find-replace]) {
	grid-template-rows: auto auto auto;
}

[data-words-toolbar] {
	/* Horizontal layout: single row with horizontal scroll on narrow
	   viewports. Was previously `flex-wrap: wrap` which produced 2-3
	   line wraps on mobile with orphan icons. The horizontal-scroll
	   pattern is what Google Docs / Word / Notion use on mobile and
	   keeps every command reachable without changing the markup. */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--words-toolbar-gap);
	inline-size: 100%;
	padding-block: var(--_words-toolbar-py);
	padding-inline: var(--_words-toolbar-px);
	border: 0;
	border-block-end: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: 0;
	background: var(--words-toolbar-bg);
	box-shadow: none;
	overflow-x: auto;
	overflow-y: clip;
	scrollbar-width: thin;
	/* Mask a soft fade on the trailing edge when content overflows so
	   the user has a visual cue there's more. The fade lives in a
	   mask-image rather than a real element to keep markup unchanged. */
	mask-image: linear-gradient(
		to inline-end,
		black calc(100% - 1.5rem),
		transparent
	);
	mask-repeat: no-repeat;
}

/* Drop the fade when the toolbar isn't actually overflowing — there's
   no JS hook for that so we approximate with a min-inline-size sentinel:
   if the toolbar's intrinsic content fits, the mask still applies but
   is harmless (it fades empty space). Keeping for simplicity. */

[data-words-toolbar][data-orientation='vertical'] {
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	inline-size: max-content;
	border-block-end: 0;
	border-inline-end: var(--words-border-width) solid var(--words-toolbar-border);
	overflow-x: visible;
	overflow-y: auto;
	mask-image: none;
}

[data-words-toolbar-group] {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--words-command-gap);
	min-inline-size: 0;
	flex-shrink: 0;
}

[data-words-toolbar-group][data-orientation='vertical'] {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

[data-words-bubble-menu] {
	--_words-bubble-offset: var(--words-toolbar-py-md);
	--_words-bubble-y-shift: calc(-100% - var(--_words-bubble-offset));
	--_words-bubble-bg: var(--words-toolbar-bg);

	position: fixed;
	z-index: var(--z-index-popover);
	inset-block-start: var(--_words-bubble-y);
	inset-inline-start: var(--_words-bubble-x);
	display: inline-flex;
	align-items: center;
	gap: var(--words-command-gap);
	max-inline-size: 92vw;
	padding-block: var(--words-toolbar-py-sm);
	padding-inline: var(--words-toolbar-px-sm);
	border: var(--words-border-width) solid var(--_words-accent-border);
	border-radius: var(--words-command-radius);
	background: var(--_words-bubble-bg);
	box-shadow: var(--words-shadow);
	color: var(--words-command-color);
	transform: translate(-50%, var(--_words-bubble-y-shift));
}

[data-words-bubble-menu][data-side='bottom'] {
	--_words-bubble-y-shift: var(--_words-bubble-offset);
}

[data-words-bubble-menu][hidden],
[data-words-bubble-menu]:not([data-open]),
[data-words-bubble-menu]:not([data-positioned]) {
	display: none;
}

[data-words-bubble-menu] [data-words-link-editor] {
	grid-template-columns: minmax(0, 1fr) auto;
}

[data-words-slash-menu] {
	position: fixed;
	z-index: var(--z-index-popover);
	inset-block-start: var(--_words-slash-y);
	inset-inline-start: var(--_words-slash-x);
	display: grid;
	gap: var(--button-gap-xs);
	inline-size: min(calc(var(--_words-button-size) * 7), 92vw);
	max-block-size: min(calc(var(--_words-button-size) * 10), 70vh);
	overflow: auto;
	padding: var(--words-toolbar-py-sm);
	border: var(--words-border-width) solid var(--_words-accent-border);
	border-radius: var(--words-command-radius);
	background: var(--words-toolbar-bg);
	box-shadow: var(--words-shadow);
	color: var(--words-command-color);
	transform: translateY(var(--words-toolbar-py-sm));
}

[data-words-slash-menu][hidden],
[data-words-slash-menu]:not([data-open]) {
	display: none;
}

[data-words-slash-option] {
	display: grid;
	grid-template-columns: var(--_words-button-size) minmax(0, 1fr);
	align-items: center;
	gap: var(--words-command-gap);
	inline-size: 100%;
	min-inline-size: 0;
	padding-block: var(--button-gap-xs);
	padding-inline: var(--words-command-px);
	border: var(--words-border-width) solid transparent;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

[data-words-slash-option]:hover:not(:disabled):not([data-disabled]),
[data-words-slash-option][data-active] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-slash-option]:focus-visible {
	box-shadow: var(--words-focus-shadow);
	outline: none;
}

[data-words-slash-option]:disabled,
[data-words-slash-option][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-slash-icon] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
	color: inherit;
}

[data-words-slash-copy] {
	display: grid;
	gap: var(--words-code-py);
	min-inline-size: 0;
}

[data-words-slash-label],
[data-words-slash-description] {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-words-slash-label] {
	color: inherit;
	font-weight: var(--words-strong-font-weight);
}

[data-words-slash-description] {
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
}

[data-words-slash-option][data-active] [data-words-slash-description] {
	color: inherit;
}

[data-words-command-button] {
	min-inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
}

[data-words-command-button][data-command] {
	display: inline-flex;
	flex-direction: row;
	inline-size: auto;
	border-color: var(--_button-border);
	border-radius: var(--_button-radius);
	background: var(--_button-bg);
	box-shadow: var(--button-shadow);
	overflow: visible;
}

[data-words-command-button][data-active],
[data-words-command-button][data-state='on'] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-command-button][data-command='commit'] {
	border-color: var(--_words-accent-solid);
	background: var(--_words-accent-solid);
	color: var(--words-command-solid-color);
}

[data-words-command-button][data-command='commit']:hover:not(:disabled):not([data-disabled]) {
	border-color: var(--_words-accent-solid-hover);
	background: var(--_words-accent-solid-hover);
	color: var(--words-command-solid-color);
}

[data-words-command-button]:disabled,
[data-words-command-button][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-floating] {
	--_words-toolbar-px: var(--words-toolbar-px-md);
	--_words-toolbar-py: var(--words-toolbar-py-md);
	--_words-button-size: var(--button-height-xs);
	--_words-font-size: var(--words-font-size-md);
	--_words-accent-solid: var(--words-primary-solid);
	--_words-accent-solid-hover: var(--words-primary-solid-hover);
	--_words-accent-track: var(--words-primary-track);
	--_words-accent-border: var(--words-primary-border);
	--_words-accent-text: var(--words-primary-text);
	--toolbar-focus-shadow: var(--words-focus-shadow);
	--toolbar-disabled-opacity: var(--words-disabled-opacity);
}

[data-words-link-editor] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--words-command-gap);
	padding: 0;
	background: transparent;
}

[data-words-link-editor][data-invalid] {
	background: color-mix(in srgb, var(--words-invalid-border) 8%, var(--words-toolbar-bg));
}

[data-words-link-editor][data-disabled] {
	opacity: var(--words-disabled-opacity);
}

[data-words-heading-picker] {
	min-inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
}

[data-words-toolbar-family] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--words-code-py);
	min-inline-size: calc(var(--_words-button-size) + 1rem);
	block-size: var(--_words-button-size);
	padding-inline: var(--button-gap-xs);
	border: var(--words-border-width) solid transparent;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	font: inherit;
	cursor: pointer;
}

[data-words-toolbar-family]:hover:not(:disabled):not([data-disabled]),
[data-words-toolbar-family][data-active],
[data-words-toolbar-family][data-state='open'] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-toolbar-family]:disabled,
[data-words-toolbar-family][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-code-language-picker] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--words-command-gap);
	min-inline-size: calc(var(--_words-button-size) + 3ch);
	block-size: var(--_words-button-size);
	padding-inline: var(--button-gap-xs);
	border: var(--words-border-width) solid transparent;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	font: inherit;
	cursor: pointer;
}

[data-words-code-language-picker]:hover:not(:disabled):not([data-disabled]),
[data-words-code-language-picker][data-active] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-code-language-picker]:disabled,
[data-words-code-language-picker][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-code-language-value] {
	min-inline-size: 2.5ch;
	font-size: var(--words-status-font-size);
	font-variant-numeric: tabular-nums;
	text-align: start;
}

[data-words-find-trigger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	inline-size: var(--_words-button-size);
	min-inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
	padding: 0;
	border: var(--words-border-width) solid transparent;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
}

[data-words-find-trigger]:hover:not(:disabled):not([data-disabled]) {
	border-color: var(--words-command-border-hover);
	background: var(--words-command-bg-hover);
	color: var(--words-command-color-hover);
}

[data-words] > [data-words-find-trigger] {
	margin-block-start: var(--_words-toolbar-py);
	margin-inline-start: var(--_words-toolbar-px);
}

[data-words-find-trigger][data-state='open'],
[data-words-find-trigger][data-has-matches] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-heading-picker-panel] {
	display: grid;
	grid-template-columns: repeat(4, var(--_words-button-size));
	gap: var(--button-gap-xs);
}

[data-words-heading-picker-panel] [data-words-command-button] {
	inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
	justify-self: stretch;
}

[data-words-toolbar-family-panel] {
	display: grid;
	gap: var(--button-gap-xs);
	inline-size: min(12.5rem, calc(100vw - var(--space-4)));
	max-inline-size: calc(100vw - var(--space-4));
}

[data-words-toolbar-family-panel][data-family='table'] {
	inline-size: min(18rem, calc(100vw - var(--space-4)));
	gap: var(--button-gap-xs);
}

[data-words-toolbar-family-panel] [data-toolbar-button],
[data-words-toolbar-family-panel] [data-words-command-button],
[data-words-toolbar-family-panel] [data-words-code-language-picker],
[data-words-toolbar-family-panel] [data-words-find-trigger] {
	justify-content: flex-start;
	inline-size: 100%;
}

[data-words-toolbar-family-panel] [data-words-command-button] {
	min-inline-size: 0;
}

[data-words-toolbar-family-panel] [data-words-command-button] .eidos-button-body {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-words-toolbar-family-panel][data-family='table'] [data-words-command-button] {
	min-block-size: calc(var(--_words-button-size) * 1.08);
	block-size: calc(var(--_words-button-size) * 1.08);
	padding-inline: var(--button-gap-xs);
}

[data-words-toolbar-family-panel][data-family='table']
	[data-words-command-button]
	.eidos-button-body {
	font-size: var(--words-status-font-size);
}

[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-muted'] {
	background: color-mix(in srgb, var(--words-toolbar-bg) 86%, transparent);
}

[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-accent'] {
	background: color-mix(in srgb, var(--_words-accent-solid) 14%, var(--words-bg));
	color: var(--_words-accent-text);
}

[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-default'] {
	background: var(--words-bg);
}

[data-words-toolbar-family-section] {
	display: grid;
	gap: var(--button-gap-xs);
}

[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-section] {
	gap: var(--words-code-py);
}

[data-words-toolbar-family-section] + [data-words-toolbar-family-section] {
	padding-block-start: var(--button-gap-xs);
	border-block-start: var(--words-border-width) solid var(--words-toolbar-border);
}

[data-words-toolbar-family-panel][data-family='table']
	[data-words-toolbar-family-section]
	+ [data-words-toolbar-family-section] {
	padding-block-start: var(--words-code-py);
}

[data-words-toolbar-family-label] {
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-weight: var(--words-strong-font-weight);
	line-height: var(--words-line-height);
}

[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-label] {
	line-height: 1.2;
}

[data-words-toolbar-family-grid] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--button-gap-xs);
}

[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-grid] {
	gap: var(--words-code-py);
}

[data-words-toolbar-family-grid][data-columns='1'] {
	grid-template-columns: minmax(0, 1fr);
}

[data-words-toolbar-family-grid][data-columns='3'] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-words-toolbar-family-grid][data-columns='4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

[data-words-toolbar-family-panel] [data-words-code-language-picker],
[data-words-toolbar-family-panel] [data-words-find-trigger] {
	padding-inline: var(--words-command-px);
}

[data-words-toolbar-family-panel] [data-words-code-language-value] {
	min-inline-size: auto;
}

[data-words-code-language-panel] {
	display: grid;
	grid-template-columns: repeat(2, minmax(8rem, 1fr));
	gap: var(--button-gap-xs);
}

[data-words-code-language-option] {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--words-command-gap);
	min-inline-size: 0;
	block-size: var(--_words-button-size);
	padding-inline: var(--words-command-px);
	border: var(--words-border-width) solid var(--words-command-border-hover);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-command-color);
	font: inherit;
	cursor: pointer;
	text-align: start;
}

[data-words-code-language-option]:hover:not(:disabled):not([data-disabled]) {
	border-color: var(--words-command-border-hover);
	background: var(--words-command-bg-hover);
	color: var(--words-command-color-hover);
}

[data-words-code-language-option]:focus-visible {
	box-shadow: var(--words-focus-shadow);
	outline: none;
}

[data-words-code-language-option][data-active] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-code-language-code] {
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
}

[data-words-code-language-label] {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-words-link-field] {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	gap: var(--words-command-gap);
	inline-size: 100%;
	min-inline-size: 0;
	block-size: var(--_words-button-size);
	padding-inline: var(--words-command-px);
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-content-color);
}

[data-words-link-label] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
}

[data-words-link-field] input[type='text'] {
	flex: 1 1 auto;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	color: var(--words-content-color);
	font: inherit;
	outline: none;
}

[data-words-link-field]:focus-within {
	border-color: var(--_words-accent-border);
	box-shadow: var(--words-focus-shadow);
}

[data-words-link-field]:has(input[aria-invalid='true']) {
	border-color: var(--words-invalid-border);
}

[data-words-link-actions] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--words-command-gap);
}

[data-words-link-actions] button {
	display: inline-flex;
	flex: 0 0 var(--_words-button-size);
	align-items: center;
	justify-content: center;
	inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
	padding: 0;
	border: var(--words-border-width) solid var(--words-command-border-hover);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-command-color);
	font: inherit;
	cursor: pointer;
}

[data-words-link-actions] button[data-words-link-apply] {
	border-color: var(--_words-accent-solid);
	background: var(--_words-accent-solid);
	color: var(--words-command-solid-color);
}

[data-words-link-actions] button:disabled {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-link-error] {
	grid-column: 1 / -1;
	color: var(--words-status-error-color);
	font-size: var(--words-status-font-size);
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-link-editor] {
	grid-template-columns: minmax(0, 1fr) auto;
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-link-editor])
	[data-words-status] {
	grid-row: 3;
}

[data-words-placeholder] {
	display: block;
	padding-block-start: var(--_words-content-py);
	padding-inline: var(--_words-content-px);
	color: var(--words-placeholder-color);
	pointer-events: none;
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-placeholder] {
	grid-column: 2;
	grid-row: 1;
	z-index: 1;
}

[data-words-placeholder][hidden],
[data-words-hidden-input][hidden] {
	display: none;
}

[data-words-content] {
	min-block-size: var(--_words-content-min-block-size);
	padding-block: var(--_words-content-py);
	padding-inline: var(--_words-content-px);
	color: var(--words-content-color);
	outline: none;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	caret-color: var(--_words-accent-solid);
	user-select: text;
	-webkit-user-select: text;
}

[data-words-content] * {
	user-select: text;
	-webkit-user-select: text;
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-content] {
	grid-column: 2;
	grid-row: 1;
}

[data-words-placeholder]:not([hidden]) + [data-words-content] {
	padding-block-start: var(--words-content-py-after-placeholder);
}

[data-words-content]::selection,
[data-words-content] ::selection {
	background: var(--_words-selection-bg);
	color: var(--_words-selection-color);
}

[data-words-content]:focus-visible {
	outline: none;
}

[data-words-content] :where(p, h1, h2, h3, blockquote, pre, ul, ol, table) {
	margin-block: 0 var(--words-block-gap);
}

[data-words-content] :where(p, h1, h2, h3, blockquote, pre, ul, ol, table):last-child {
	margin-block-end: 0;
}

[data-words-content] :where(h1, h2, h3) {
	color: var(--words-heading-color);
	font-size: var(--words-heading-font-size);
	font-weight: var(--words-heading-font-weight);
	line-height: var(--words-heading-line-height);
}

[data-words-content] :where(h1) {
	font-size: var(--words-heading-h1-font-size);
}

[data-words-content] :where(h2) {
	font-size: var(--words-heading-h2-font-size);
}

[data-words-content] :where(h3) {
	font-size: var(--words-heading-h3-font-size);
}

[data-words-content] :where(strong) {
	font-weight: var(--words-strong-font-weight);
}

[data-words-content] [data-words-marks~='bold'] {
	font-weight: var(--words-strong-font-weight);
}

[data-words-content] [data-words-marks~='italic'] {
	font-style: italic;
}

[data-words-content] [data-words-marks~='underline'] {
	text-decoration-line: underline;
}

[data-words-content] [data-words-marks~='strike'] {
	text-decoration-line: line-through;
}

[data-words-content] [data-words-marks~='underline'][data-words-marks~='strike'] {
	text-decoration-line: underline line-through;
}

[data-words-content] :where(code) {
	border-radius: var(--words-code-radius);
	background: var(--words-code-bg);
	color: var(--words-code-color);
	font-family: var(--words-code-font-family);
	padding-block: var(--words-code-py);
	padding-inline: var(--words-code-px);
}

[data-words-content] :where(pre) {
	overflow-x: auto;
	padding-block: var(--words-quote-px);
	padding-inline: var(--words-quote-px);
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-code-radius);
	background: var(--words-code-bg);
	color: var(--words-code-color);
	font-family: var(--words-code-font-family);
	white-space: pre-wrap;
}

[data-words-content] :where(pre code) {
	display: block;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}

[data-words-content] [data-words-code-token] {
	font: inherit;
}

[data-words-content] [data-words-code-token='comment'] {
	color: var(--words-status-color);
	font-style: italic;
}

[data-words-content] [data-words-code-token='keyword'] {
	color: var(--_words-accent-text);
	font-weight: var(--words-strong-font-weight);
}

[data-words-content] [data-words-code-token='string'] {
	color: var(--words-affirm-text);
}

[data-words-content] [data-words-code-token='number'],
[data-words-content] [data-words-code-token='boolean'] {
	color: var(--words-fulfill-text);
}

[data-words-content] [data-words-code-token='function'] {
	color: var(--words-secondary-text);
}

[data-words-content] [data-words-code-token='tag'] {
	color: var(--words-threat-text);
}

[data-words-content] [data-words-code-token='attribute'],
[data-words-content] [data-words-code-token='property'] {
	color: var(--words-risk-text);
}

[data-words-content] [data-words-code-token='operator'],
[data-words-content] [data-words-code-token='punctuation'],
[data-words-content] [data-words-code-token='variable'] {
	color: var(--words-status-color);
}

[data-words-content] [data-words-marks~='code'] {
	border-radius: var(--words-code-radius);
	background: var(--words-code-bg);
	color: var(--words-code-color);
	font-family: var(--words-code-font-family);
	padding-block: var(--words-code-py);
	padding-inline: var(--words-code-px);
}

[data-words-content] :where(blockquote) {
	padding-inline-start: var(--words-quote-px);
	border-inline-start: var(--words-quote-border-width) solid var(--_words-accent-border);
	color: var(--words-quote-color);
}

[data-words-content] :where(ul, ol) {
	padding-inline-start: var(--words-list-padding-inline-start);
}

[data-words-content] :where(table) {
	inline-size: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	overflow: hidden;
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-code-radius);
	background: var(--words-bg);
}

/* Striped rows — bumped from a faint 70%-transparent overlay to a
   solid toolbar-bg tint so the zebra is actually discernible against
   the editor background. */
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) td),
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) th) {
	background: var(--words-toolbar-bg);
}

[data-words-content] :where(table[data-words-table-compact] td),
[data-words-content] :where(table[data-words-table-compact] th) {
	padding-block: calc(var(--words-code-py) * 0.5);
	padding-inline: calc(var(--words-command-px) * 0.75);
}

[data-words-content] :where(td, th) {
	min-inline-size: calc(var(--_words-button-size) * 2);
	padding-block: var(--words-code-py);
	padding-inline: var(--words-command-px);
	border: var(--words-border-width) solid var(--words-toolbar-border);
	vertical-align: top;
	transition: background-color 120ms ease;
}

/* Subtle hover for every body cell — lets the user know cells are
   interactive (clickable to edit). Header rows opt out below. */
[data-words-content] :where(table) tr:hover td:not([data-words-cell-header]) {
	background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent);
}

[data-words-content] :where(th),
[data-words-content] [data-words-cell-header] {
	background: color-mix(in srgb, var(--_words-accent-solid) 12%, var(--words-bg));
	color: var(--words-heading-color);
	font-weight: var(--words-strong-font-weight);
	/* Stronger bottom border under the header row so the divider with
	   the body is unambiguous regardless of striping. */
	border-block-end-width: calc(var(--words-border-width) * 2);
}

[data-words-content] [data-words-cell-tone='muted'] {
	background: color-mix(in srgb, var(--words-toolbar-bg) 82%, transparent);
}

/* Accent tone — was 14% solid with full accent-text recolor, which
   read as "this cell is broken / special-cased random". Toned down to
   8% background and kept the inherited text color so the cell still
   draws the eye without shouting. */
[data-words-content] [data-words-cell-tone='accent'] {
	background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg));
}

[data-words-content] [data-words-cell-vertical='middle'] {
	vertical-align: middle;
}

[data-words-content] [data-words-cell-vertical='bottom'] {
	vertical-align: bottom;
}

[data-words-content] [data-words-node='table-cell']:focus-within {
	background: color-mix(in srgb, var(--_words-accent-solid) 8%, transparent);
}

[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='muted']:focus-within {
	background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-toolbar-bg));
}

[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='accent']:focus-within,
[data-words-content] [data-words-node='table-cell'][data-words-cell-header]:focus-within {
	background: color-mix(in srgb, var(--_words-accent-solid) 20%, var(--words-bg));
}

[data-words-content] [data-words-list-kind='check'] {
	list-style: none;
}

[data-words-content] [data-words-check-toggle] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--_words-check-size);
	block-size: var(--_words-check-size);
	margin-inline-end: var(--words-command-gap);
	border: var(--words-border-width) solid var(--_words-accent-border);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-command-solid-color);
	vertical-align: text-bottom;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

[data-words-content] [data-words-check-toggle]::after {
	content: '';
	display: block;
	inline-size: var(--_words-check-mark-width);
	block-size: var(--_words-check-mark-height);
	border-block-end: var(--_words-check-mark-stroke) solid currentColor;
	border-inline-end: var(--_words-check-mark-stroke) solid currentColor;
	opacity: 0;
	transform: rotate(45deg) translateY(var(--_words-check-mark-offset));
}

[data-words-content] [data-words-check-toggle][data-words-checked='true'] {
	border-color: var(--_words-accent-solid);
	background: var(--_words-accent-solid);
}

[data-words-content] [data-words-check-toggle][data-words-checked='true']::after {
	opacity: 1;
}

[data-words][data-disabled] [data-words-check-toggle],
[data-words][data-readonly] [data-words-check-toggle] {
	cursor: default;
	opacity: var(--words-disabled-opacity);
}

[data-words-content] [data-words-indent] {
	margin-inline-start: calc(var(--words-list-padding-inline-start) * var(--_words-indent, 1));
}

[data-words-content] [data-words-indent='1'] {
	--_words-indent: 1;
}

[data-words-content] [data-words-indent='2'] {
	--_words-indent: 2;
}

[data-words-content] [data-words-indent='3'] {
	--_words-indent: 3;
}

[data-words-content] [data-words-indent='4'] {
	--_words-indent: 4;
}

[data-words-content] [data-words-indent='5'] {
	--_words-indent: 5;
}

[data-words-content] [data-words-indent='6'] {
	--_words-indent: 6;
}

[data-words-content] [data-words-indent='7'] {
	--_words-indent: 7;
}

[data-words-content] [data-words-indent='8'] {
	--_words-indent: 8;
}

[data-words-content] :where(a) {
	color: var(--_words-accent-text);
	text-decoration-color: var(--_words-accent-border);
}

[data-words-status] {
	padding-block: var(--words-status-py);
	padding-inline: var(--_words-content-px);
	border-block-start: var(--words-border-width) solid var(--words-toolbar-border);
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-status] {
	grid-column: 1 / -1;
	grid-row: 2;
}

[data-words-status][data-status='error'] {
	color: var(--words-status-error-color);
}

[data-words-find-replace] {
	display: flex;
	flex-direction: column;
	gap: var(--words-command-gap);
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

[data-words-find-replace][data-disabled],
[data-words-find-replace][data-readonly] {
	color: var(--words-status-color);
}

[data-words-find-replace][data-invalid] [data-words-find-counter] {
	color: var(--words-status-error-color);
}

[data-words-find-replace][data-disabled] {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-find-replace][data-has-matches] [data-words-find-counter] {
	color: var(--_words-accent-text);
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-find-replace] {
	grid-column: 1 / -1;
	grid-row: 2;
}

[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-find-replace])
	[data-words-status] {
	grid-row: 3;
}

[data-words-find-row],
[data-words-replace-row] {
	display: flex;
	align-items: center;
	gap: var(--words-command-gap);
}

[data-words-find-label],
[data-words-replace-label] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
}

[data-words-find-input],
[data-words-replace-input] {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: var(--_words-button-size);
	padding-inline: var(--words-command-px);
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-content-color);
	font: inherit;
	outline: none;
}

[data-words-find-input]:focus,
[data-words-replace-input]:focus {
	border-color: var(--_words-accent-border);
	box-shadow: var(--words-focus-shadow);
}

[data-words-find-input][aria-invalid='true'] {
	border-color: var(--words-invalid-border);
}

[data-words-find-counter] {
	flex: 0 0 auto;
	min-inline-size: 3.5ch;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

[data-words-find-prev],
[data-words-find-next],
[data-words-find-case],
[data-words-find-whole],
[data-words-find-regex],
[data-words-find-selection],
[data-words-replace-preserve],
[data-words-replace-current],
[data-words-replace-all] {
	display: inline-flex;
	flex: 0 0 var(--_words-button-size);
	align-items: center;
	justify-content: center;
	inline-size: var(--_words-button-size);
	block-size: var(--_words-button-size);
	padding: 0;
	border: var(--words-border-width) solid var(--words-command-border-hover);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-command-color);
	font: inherit;
	cursor: pointer;
	outline: none;
}

[data-words-find-prev]:hover:not(:disabled):not([data-disabled]),
[data-words-find-next]:hover:not(:disabled):not([data-disabled]),
[data-words-find-case]:hover:not(:disabled):not([data-disabled]),
[data-words-find-whole]:hover:not(:disabled):not([data-disabled]),
[data-words-find-regex]:hover:not(:disabled):not([data-disabled]),
[data-words-find-selection]:hover:not(:disabled):not([data-disabled]),
[data-words-replace-preserve]:hover:not(:disabled):not([data-disabled]),
[data-words-replace-current]:hover:not(:disabled):not([data-disabled]),
[data-words-replace-all]:hover:not(:disabled):not([data-disabled]) {
	border-color: var(--words-command-border-hover);
	background: var(--words-command-bg-hover);
	color: var(--words-command-color-hover);
}

[data-words-find-prev]:focus-visible,
[data-words-find-next]:focus-visible,
[data-words-find-case]:focus-visible,
[data-words-find-whole]:focus-visible,
[data-words-find-regex]:focus-visible,
[data-words-find-selection]:focus-visible,
[data-words-replace-preserve]:focus-visible,
[data-words-replace-current]:focus-visible,
[data-words-replace-all]:focus-visible {
	box-shadow: var(--words-focus-shadow);
}

[data-words-find-prev]:disabled,
[data-words-find-next]:disabled,
[data-words-find-case]:disabled,
[data-words-find-whole]:disabled,
[data-words-find-regex]:disabled,
[data-words-find-selection]:disabled,
[data-words-replace-preserve]:disabled,
[data-words-replace-current]:disabled,
[data-words-replace-all]:disabled {
	cursor: not-allowed;
	opacity: var(--words-disabled-opacity);
}

[data-words-find-case][data-active],
[data-words-find-whole][data-active],
[data-words-find-regex][data-active],
[data-words-find-selection][data-active],
[data-words-replace-preserve][data-active] {
	border-color: var(--_words-accent-border);
	background: var(--_words-accent-track);
	color: var(--_words-accent-text);
}

[data-words-replace-all] {
	border-color: var(--_words-accent-solid);
	background: var(--_words-accent-solid);
	color: var(--words-command-solid-color);
}

[data-words-replace-all]:hover:not(:disabled):not([data-disabled]) {
	border-color: var(--_words-accent-solid-hover);
	background: var(--_words-accent-solid-hover);
	color: var(--words-command-solid-color);
}

[data-words-content] mark[data-words-find-match] {
	border-radius: var(--words-code-radius);
	background: color-mix(in srgb, var(--_words-accent-solid) 22%, transparent);
	color: var(--_words-accent-text);
	padding-block: var(--words-code-py);
	padding-inline: var(--words-code-px);
}

[data-words-content] mark[data-words-find-match][data-words-find-active] {
	background: color-mix(in srgb, var(--_words-accent-solid) 55%, transparent);
	outline: 1px solid var(--_words-accent-border);
}

@media (prefers-reduced-motion: reduce) {
	[data-words],
	[data-words-command-button] {
		transition: none;
	}
}