[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);
	/* Gutter reserved for the block-handle grip + inserter "+" overlay.
	   Rendered as a SEPARATE column outside the editor box (its own
	   background + dot pattern), with a small gap before the editor.
	   The grip + "+" are positioned by JS at viewport coordinates that
	   land inside this column. */
	--_words-rail-px: 2rem;
	--_words-rail-gap: 0.5rem;
	--_words-rail-bg: color-mix(in srgb, var(--words-toolbar-border) 35%, transparent);
	--_words-rail-dot: color-mix(in srgb, var(--words-status-color) 65%, transparent);
	--_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);
}

/* ── Layout ──────────────────────────────────────────────────────────────
   The editor host is a grid: rail | gap | (toolbar/content/status) |
   drawer. The rail is a dedicated column OUTSIDE the editor card that
   visually holds the block-handle grip + inserter "+" overlays — with
   its own grey background and dotted pattern, separated from the
   editor by a small gap mirroring the drawer's gap on the other side.
   When `<Words.Drawer side="left">` the columns flip. Children without
   a grid-area placement (BubbleMenu / SlashMenu / HiddenInput /
   find-replace) are absolute-positioned and don't participate. */
[data-words]:has([data-words-drawer]) {
	display: grid;
	grid-template-columns:
		var(--_words-rail-px)
		var(--_words-rail-gap)
		minmax(0, 1fr)
		max-content;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		'rail . toolbar drawer'
		'rail . content drawer'
		'rail . status  drawer';
	column-gap: 0;
}

/* Left-side drawer — drawer first, then rail at the END mirroring
   the right-side layout (rail is on the SAME side as the grip,
   opposite to the drawer). */
[data-words]:has([data-words-drawer][data-side='left']) {
	grid-template-columns:
		max-content
		minmax(0, 1fr)
		var(--_words-rail-gap)
		var(--_words-rail-px);
	grid-template-areas:
		'drawer toolbar . rail'
		'drawer content . rail'
		'drawer status  . rail';
}

/* Rail visual — pseudo-element on the editor host that fills the
   `rail` grid area with the dotted grey band. The grip + "+" overlays
   are JS-positioned via viewport coordinates that land here. */
[data-words]:has([data-words-drawer])::before {
	content: '';
	grid-area: rail;
	background-color: var(--_words-rail-bg);
	background-image: radial-gradient(
		circle 1px,
		var(--_words-rail-dot) 99%,
		transparent 100%
	);
	background-size: 5px 5px;
	background-position: 50% 50%;
	background-repeat: repeat;
	border-radius: var(--_words-radius);
	pointer-events: none;
}

[data-words]:has([data-words-drawer]) > [data-words-toolbar] {
	grid-area: toolbar;
}
[data-words]:has([data-words-drawer]) > [data-words-content],
[data-words]:has([data-words-drawer]) > [data-words-placeholder] {
	grid-area: content;
}
[data-words]:has([data-words-drawer]) > [data-words-status] {
	grid-area: status;
}
[data-words]:has([data-words-drawer]) > [data-words-drawer] {
	grid-area: drawer;
}

[data-words-drawer] {
	display: flex;
	flex-direction: column;
	inline-size: 14rem;
	max-inline-size: 18rem;
	block-size: 100%;
	min-block-size: 100%;
	padding: 0;
	border-inline-start: var(--words-border-width) solid var(--words-toolbar-border);
	background: var(--words-toolbar-bg);
	color: var(--words-command-color);
	font-size: var(--words-status-font-size);
	overflow: hidden;
	transition: inline-size 160ms ease;
}

/* Left-side drawer: the visual seam goes on the inline-end edge
   (toward the editor content) instead of inline-start. */
[data-words-drawer][data-side='left'] {
	border-inline-start: 0;
	border-inline-end: var(--words-border-width) solid var(--words-toolbar-border);
}

[data-words-drawer]:not([data-open]) {
	inline-size: 2.25rem;
	max-inline-size: 2.25rem;
}

[data-words-drawer-header] {
	display: flex;
	align-items: center;
	gap: var(--words-command-gap);
	padding-block: var(--words-toolbar-py-sm);
	padding-inline: var(--words-toolbar-px-sm);
	border-block-end: var(--words-border-width) solid var(--words-toolbar-border);
	background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent);
}

[data-words-drawer-collapse] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	cursor: pointer;
}

[data-words-drawer-collapse]:hover {
	background: color-mix(in srgb, var(--_words-accent-solid) 12%, transparent);
}

/* Document-overview toggle in the drawer header. Sits on the far
   right (margin-inline-start: auto). Active when the document panel
   is in the stack. */
[data-words-drawer-document-toggle] {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-status-color);
	cursor: pointer;
	opacity: 0.7;
	transition:
		background-color 120ms ease,
		color 120ms ease,
		opacity 120ms ease;
}

[data-words-drawer-document-toggle]:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--_words-accent-solid) 12%, transparent);
	color: var(--words-command-color);
}

[data-words-drawer-document-toggle][data-active] {
	opacity: 1;
	background: var(--_words-accent-solid);
	color: var(--_words-accent-on);
}

/* Insert panel — catalog of block constructors. Two columns on the
   default drawer width so the labels fit comfortably; falls back to
   single column on narrow drawers. */
[data-words-drawer-insert] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
}

[data-words-drawer-insert-item] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.55rem;
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-command-radius);
	background: var(--words-toolbar-bg);
	color: var(--words-command-color);
	font: inherit;
	font-size: var(--words-font-size-sm);
	cursor: pointer;
	text-align: start;
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

[data-words-drawer-insert-item]:hover {
	border-color: var(--_words-accent-border);
	background: color-mix(in srgb, var(--_words-accent-solid) 8%, transparent);
	color: var(--_words-accent-text);
}

[data-words-drawer-insert-item-label] {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-words-drawer-title] {
	font-weight: var(--words-strong-font-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: var(--words-status-font-size);
	color: var(--words-status-color);
}

[data-words-drawer-body] {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
}

[data-words-drawer-section] {
	padding-block: var(--words-toolbar-py-sm);
	padding-inline: var(--words-toolbar-px-sm);
	border-block-end: var(--words-border-width) solid
		color-mix(in srgb, var(--words-toolbar-border) 60%, transparent);
}

[data-words-drawer-section]:last-child {
	border-block-end: 0;
}

[data-words-drawer-section][data-flush]:not(:last-child) {
	margin-block-end: var(--words-toolbar-py-sm);
}

[data-words-drawer-section][data-flush]:first-child {
	padding-block-start: 0;
}

/* Hierarchical panels (HIER) — each scope in the modes[] stack is a
   collapsible <section> with its own header + body. Default heuristic:
   the topmost (most-specific) panel is open, the rest collapsed but
   accessible by tapping the header chevron. */

[data-words-drawer-panel] {
	display: flex;
	flex-direction: column;
	border-block-end: var(--words-border-width) solid
		color-mix(in srgb, var(--words-toolbar-border) 60%, transparent);
}

[data-words-drawer-panel]:last-child {
	border-block-end: 0;
}

[data-words-drawer-panel-header] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--words-command-gap);
	padding-block: 0.35rem;
	padding-inline: var(--words-toolbar-px-sm);
	border: 0;
	background: transparent;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-weight: var(--words-strong-font-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: start;
	cursor: pointer;
}

[data-words-drawer-panel-header]:hover {
	background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent);
	color: var(--_words-accent-text);
}

[data-words-drawer-panel][data-open] [data-words-drawer-panel-header] {
	background: color-mix(in srgb, var(--_words-accent-solid) 4%, transparent);
	color: var(--words-command-color);
}

/* Per-scope accent — each category of scope gets a distinct hue so
   the user can read the panel's *kind* at a glance:
   - Text scopes (format, block) → primary (project accent)
   - Structure scopes (cell, row, table, list, list-item) → secondary
   - Media scopes (image, code) → fulfill (tealish)
   - Default (document) → neutral
   Variables here resolve from the eidos color tokens, so themes
   re-tint everything coherently. */
[data-words-drawer-panel][data-mode='default'] {
	--_drawer-scope-accent: var(--words-toolbar-border);
	--_drawer-scope-tint: var(--words-toolbar-bg);
}
[data-words-drawer-panel][data-mode='format'],
[data-words-drawer-panel][data-mode='block'] {
	--_drawer-scope-accent: var(--_words-accent-border);
	--_drawer-scope-tint: color-mix(in srgb, var(--_words-accent-solid) 6%, transparent);
}
[data-words-drawer-panel][data-mode='cell'],
[data-words-drawer-panel][data-mode='row'],
[data-words-drawer-panel][data-mode='table'],
[data-words-drawer-panel][data-mode='list'],
[data-words-drawer-panel][data-mode='list-item'] {
	--_drawer-scope-accent: var(--words-secondary-text);
	--_drawer-scope-tint: color-mix(in srgb, var(--words-secondary-text) 6%, transparent);
}
[data-words-drawer-panel][data-mode='image'],
[data-words-drawer-panel][data-mode='code'] {
	--_drawer-scope-accent: var(--words-fulfill-text);
	--_drawer-scope-tint: color-mix(in srgb, var(--words-fulfill-text) 6%, transparent);
}

/* Depth indicator — leaf panel is full-strength scope accent; deeper
   panels render the same hue at decreasing alpha so the precedence is
   readable visually. */
[data-words-drawer-panel][data-depth='0'] {
	border-inline-start: 3px solid var(--_drawer-scope-accent);
}
[data-words-drawer-panel][data-depth='1'] {
	border-inline-start: 3px solid
		color-mix(in srgb, var(--_drawer-scope-accent) 65%, transparent);
}
[data-words-drawer-panel][data-depth='2'] {
	border-inline-start: 3px solid
		color-mix(in srgb, var(--_drawer-scope-accent) 40%, transparent);
}
[data-words-drawer-panel][data-depth='3'] {
	border-inline-start: 3px solid
		color-mix(in srgb, var(--_drawer-scope-accent) 25%, transparent);
}

/* When the panel is open, paint its header with the scope tint so the
   active scope reads at a glance. */
[data-words-drawer-panel][data-open] [data-words-drawer-panel-header] {
	background: var(--_drawer-scope-tint);
	color: var(--_drawer-scope-accent);
}

/* Action chip active state — inherit the scope accent so the
   selected variant matches the panel's color identity. */
[data-words-drawer-panel] [data-words-drawer-action][data-active] {
	background: color-mix(in srgb, var(--_drawer-scope-accent, var(--_words-accent-solid)) 20%, var(--words-bg));
	border-color: var(--_drawer-scope-accent, var(--_words-accent-border));
	color: var(--_drawer-scope-accent, var(--_words-accent-text));
}

[data-words-drawer-panel-title] {
	flex: 1;
}

[data-words-drawer-panel-body] {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-block-end: var(--words-toolbar-py-sm);
	padding-inline: var(--words-toolbar-px-sm);
}

[data-words-drawer-section-subtitle] {
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-weight: var(--words-strong-font-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Drawer-scoped Editable — Notion/Linear-style inline edit.
   Resting state shows the preview with a faded pencil to its right
   (revealed on hover or focus-within). Edit mode swaps to a textarea
   (alt/caption can run long) with icon-only Submit (✓) and Cancel (✕)
   beneath, right-aligned. Per the user's reference design. */
[data-editable][data-words-drawer-editable] {
	display: flex;
	inline-size: 100%;
	max-inline-size: 100%;
	align-items: center;
	gap: 0.25rem;
}

[data-editable][data-words-drawer-editable] [data-editable-area] {
	flex: 1 1 auto;
	min-inline-size: 0;
}

[data-editable][data-words-drawer-editable] [data-editable-preview] {
	inline-size: 100%;
	min-block-size: auto;
	white-space: normal;
	line-height: 1.35;
	color: var(--words-command-color);
}

[data-editable][data-words-drawer-editable] [data-editable-preview][data-placeholder-shown] {
	color: var(--words-status-color);
	font-style: italic;
}

/* Pencil hides until the user signals intent (hover anywhere on the
   editable row, focus-within, or focus on the preview itself). */
[data-editable][data-words-drawer-editable] [data-editable-edit-trigger] {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	min-inline-size: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--words-status-color);
	opacity: 0;
	transition:
		opacity 120ms ease,
		background-color 120ms ease,
		color 120ms ease;
}

[data-editable][data-words-drawer-editable]:hover [data-editable-edit-trigger],
[data-editable][data-words-drawer-editable]:focus-within [data-editable-edit-trigger] {
	opacity: 0.7;
}

[data-editable][data-words-drawer-editable] [data-editable-edit-trigger]:hover {
	opacity: 1;
	background: var(--words-command-bg-hover);
	color: var(--words-command-color-hover);
}

/* Edit mode: stack vertically. Textarea fills the row, action chips
   sit beneath right-aligned. */
[data-editable][data-words-drawer-editable][data-editing] {
	flex-direction: column;
	align-items: stretch;
}

[data-editable][data-words-drawer-editable][data-editing] [data-editable-area] {
	inline-size: 100%;
}

[data-editable][data-words-drawer-editable] textarea[data-editable-input] {
	inline-size: 100%;
	min-block-size: 4.5rem;
	resize: vertical;
	padding: 0.4rem 0.5rem;
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-command-radius);
	background: var(--words-bg, var(--words-toolbar-bg));
	color: var(--words-command-color);
	font: inherit;
	line-height: 1.35;
	outline: none;
}

[data-editable][data-words-drawer-editable] textarea[data-editable-input]:focus-visible {
	border-color: var(--_words-accent-border);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent-solid) 22%, transparent);
}

[data-editable][data-words-drawer-editable][data-editing] [data-editable-control] {
	display: inline-flex;
	justify-content: flex-end;
	gap: 0.25rem;
	margin-block-start: 0.35rem;
}

/* Icon-only submit / cancel chips. Square, compact. */
[data-editable][data-words-drawer-editable] [data-editable-submit-trigger],
[data-editable][data-words-drawer-editable] [data-editable-cancel-trigger] {
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	min-inline-size: 1.75rem;
	padding: 0;
	border-radius: var(--words-command-radius);
}

[data-editable][data-words-drawer-editable] [data-editable-submit-trigger] {
	border: 0;
	background: var(--_words-accent-solid);
	color: var(--_words-accent-on);
}

[data-editable][data-words-drawer-editable] [data-editable-submit-trigger]:hover {
	background: color-mix(in srgb, var(--_words-accent-solid) 85%, white 0%);
	filter: brightness(0.95);
}

[data-editable][data-words-drawer-editable] [data-editable-cancel-trigger] {
	border: var(--words-border-width) solid var(--words-toolbar-border);
	background: transparent;
	color: var(--words-status-color);
}

[data-editable][data-words-drawer-editable] [data-editable-cancel-trigger]:hover {
	border-color: var(--words-threat-text);
	color: var(--words-threat-text);
}

/* Drawer header trail — shows the breadcrumb of stacked modes after
   the leaf so the user knows what scopes are stacked underneath. */
[data-words-drawer-trail] {
	display: inline-flex;
	gap: 0.2rem;
	margin-inline-start: 0.4rem;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
}

[data-words-drawer-trail-sep] {
	opacity: 0.5;
}

[data-words-drawer-actions][data-flush] {
	margin-block-start: 0.4rem;
}

/* Color picker — palette of swatches + a native <input type=color> for
   free-pick + a clear button when a value is set. */
[data-words-drawer-color-picker] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
}

[data-words-drawer-color-swatch] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--words-toolbar-border) 60%, transparent);
	border-radius: 999px;
	cursor: pointer;
	transition: transform 80ms ease, box-shadow 80ms ease;
}

[data-words-drawer-color-swatch]:hover {
	transform: scale(1.15);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent-solid) 30%, transparent);
}

[data-words-drawer-color-swatch][data-active] {
	box-shadow:
		0 0 0 2px var(--words-bg),
		0 0 0 4px var(--_words-accent-solid);
}

[data-words-drawer-color-input] {
	inline-size: 1.6rem;
	block-size: 1.4rem;
	padding: 0;
	border: 1px dashed color-mix(in srgb, var(--words-toolbar-border) 80%, transparent);
	border-radius: var(--words-command-radius);
	background: transparent;
	cursor: pointer;
}

[data-words-drawer-color-input]:hover {
	border-style: solid;
	border-color: var(--_words-accent-border);
}

[data-words-drawer-color-clear] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--words-toolbar-border) 60%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--words-status-color);
	font-size: var(--words-font-size-md);
	line-height: 1;
	cursor: pointer;
}

[data-words-drawer-color-clear]:hover {
	border-color: var(--words-threat-text);
	color: var(--words-threat-text);
}

/* Image float bar — floats above the selected image with quick
   actions (align L/C/R, delete, dismiss). Positioned via inline
   `top` / `left` set by the component from getBoundingClientRect. */
[data-words-image-float-bar] {
	position: fixed;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem;
	border-radius: var(--words-command-radius);
	background: var(--words-toolbar-bg);
	border: var(--words-border-width) solid var(--_words-accent-border);
	box-shadow: var(--words-shadow);
	z-index: var(--z-index-popover);
	white-space: nowrap;
}

[data-words-image-float-action] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	cursor: pointer;
}

[data-words-image-float-action]:hover {
	background: color-mix(in srgb, var(--_words-accent-solid) 12%, transparent);
	color: var(--_words-accent-text);
}

[data-words-image-float-action][data-active] {
	background: var(--_words-accent-solid);
	color: var(--_words-accent-on);
}

[data-words-image-float-action][data-tone='risk']:hover {
	background: color-mix(in srgb, var(--words-threat-text) 15%, transparent);
	color: var(--words-threat-text);
}

[data-words-image-float-action][data-tone='ghost'] {
	color: var(--words-status-color);
}

[data-words-image-float-divider] {
	inline-size: 1px;
	block-size: 1.25rem;
	background: var(--words-toolbar-border);
	margin-inline: 0.15rem;
}

/* Block handle — Notion-style drag grip rendered to the left of the
   hovered block. Hidden by default (`opacity: 0`) and fades in on
   hover via opacity transition. Click reveals an action menu
   (Move up / Move down / Duplicate / Delete). The button itself is
   positioned via inline `top` / `left` set from getBoundingClientRect. */
[data-words-block-handle] {
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Hit area: 28×28 — comfortably above the WCAG 2.5.5 target-size
	   minimum (24×24) and easier to land than the previous 24×24 in
	   the narrow gutter. The visible icon stays small via `size="sm"`. */
	inline-size: 1.75rem;
	block-size: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--words-command-radius);
	background: transparent;
	/* Distinct color against the dotted rail. Accent on hover. */
	color: var(--words-command-color);
	cursor: grab;
	opacity: 0.75;
	transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
	z-index: var(--z-index-popover);
}

[data-words-block-handle]:hover,
[data-words-block-handle][data-open] {
	opacity: 1;
	background: var(--words-toolbar-bg);
	color: var(--_words-accent-text);
	box-shadow: 0 0 0 var(--words-border-width) var(--_words-accent-border);
}

[data-words-block-handle]:active {
	cursor: grabbing;
}

/* Drag in flight: the bar STAYS fixed in the gutter (visual anchor);
 * only the browser's default drag-ghost of the grip travels with the
 * cursor. Fade the static anchor so it doesn't compete with the
 * floating ghost — the user reads "this is where it left from" while
 * the cursor carries the moving icon. */
[data-words-block-handle][data-dragging] {
	opacity: 0.35;
	background: var(--words-toolbar-bg);
	cursor: grabbing;
}

[data-words-block-handle-menu] {
	position: fixed;
	display: flex;
	flex-direction: column;
	min-inline-size: 9rem;
	padding: 0.25rem;
	border-radius: var(--words-command-radius);
	background: var(--words-toolbar-bg);
	border: var(--words-border-width) solid var(--_words-accent-border);
	box-shadow: var(--words-shadow);
	z-index: var(--z-index-popover);
}

[data-words-block-handle-menu] button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	border: 0;
	border-radius: var(--words-command-radius);
	background: transparent;
	color: var(--words-command-color);
	text-align: start;
	font: inherit;
	cursor: pointer;
}

[data-words-block-handle-menu] button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--_words-accent-solid) 12%, transparent);
	color: var(--_words-accent-text);
}

[data-words-block-handle-menu] button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

[data-words-block-handle-menu] button[data-tone='risk']:hover:not(:disabled) {
	background: color-mix(in srgb, var(--words-threat-text) 15%, transparent);
	color: var(--words-threat-text);
}

[data-words-block-handle-menu-divider] {
	block-size: 1px;
	margin-block: 0.25rem;
	background: var(--words-toolbar-border);
}

/* Block inserter — hover-zone between blocks. Solves the wedge case
   where two atomic blocks (image, table, code) are back-to-back and
   no caret position exists between them. The wrapper is a thin
   horizontal strip anchored at the seam between two blocks; it
   carries a faint line and a left-margin "+" button. Click → insert
   a paragraph at that position. */
[data-words-block-inserter] {
	position: fixed;
	pointer-events: none;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	z-index: var(--z-index-popover);
}

[data-words-block-inserter-button] {
	pointer-events: auto;
	position: absolute;
	/* Land the "+" centered in the dedicated rail column to the left
	   of the editor box. Same metrics as the block-handle's positioning:
	   block.rect.left − content-px − rail-gap − rail-px/2 − 12 (button half).
	   The inserter wrapper sits at block.rect.left, so we offset by
	   −(content-px + rail-gap + rail-px/2 + 12). */
	left: calc(
		-1 * (var(--_words-content-px) + var(--_words-rail-gap) + var(--_words-rail-px) / 2) - 12px
	);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: 999px;
	background: var(--words-toolbar-bg);
	color: var(--words-status-color);
	cursor: pointer;
	box-shadow: var(--words-shadow);
	transition:
		background 120ms ease,
		color 120ms ease,
		border-color 120ms ease;
}

[data-words-block-inserter-button]:hover {
	background: var(--_words-accent-solid);
	border-color: var(--_words-accent-solid);
	color: var(--_words-accent-on);
}

/* When the drawer is on the LEFT side, flip the "+" button so it
   lands in the rail column on the editor's RIGHT side. Same metric
   math as the right-drawer case, just on the inline-end side. */
[data-words-block-inserter][data-side='left'] [data-words-block-inserter-button] {
	left: auto;
	right: calc(
		-1 * (var(--_words-content-px) + var(--_words-rail-gap) + var(--_words-rail-px) / 2) - 12px
	);
}

[data-words-block-inserter-line] {
	pointer-events: auto;
	flex: 1 1 auto;
	block-size: 2px;
	border-radius: 1px;
	background: color-mix(in srgb, var(--_words-accent-solid) 35%, transparent);
	opacity: 0;
	transition: opacity 120ms ease;
}

[data-words-block-inserter]:hover [data-words-block-inserter-line] {
	opacity: 1;
}

/* Drop-target mode: while a block is being dragged the inserter
   doubles as the drop indicator. The line stays prominent (no hover
   needed) and grows a touch so the user can see exactly where the
   block will land. */
[data-words-block-inserter][data-mode='drop'] [data-words-block-inserter-line] {
	opacity: 1;
	block-size: 3px;
	background: var(--_words-accent-solid);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent-solid) 25%, transparent);
}

/* Grabbed state on the block-handle grip — visible when the user has
   pressed Space on the focused grip to enter keyboard-grab mode. */
[data-words-block-handle][data-grabbed] {
	opacity: 1;
	background: var(--_words-accent-solid);
	color: var(--_words-accent-on);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent-solid) 25%, transparent);
}

[data-words-drawer-section-title] {
	display: flex;
	align-items: baseline;
	gap: var(--words-command-gap);
	margin: 0 0 var(--words-toolbar-py-sm) 0;
	font-size: var(--words-status-font-size);
	font-weight: var(--words-strong-font-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--words-status-color);
}

[data-words-drawer-section-count] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.25rem;
	padding-block: 0;
	padding-inline: 0.3rem;
	border-radius: 999px;
	background: var(--_words-accent-solid);
	color: var(--_words-accent-on);
	font-size: var(--words-status-font-size);
}

[data-words-drawer-empty] {
	margin: 0;
	color: var(--words-status-color);
	font-style: italic;
	font-size: var(--words-font-size-sm);
}

[data-words-drawer-empty][data-tone='affirm'] {
	color: var(--words-affirm-text);
	font-style: normal;
}

[data-words-drawer-outline] {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-words-drawer-outline-item] {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding-inline-start: 0;
	font-size: var(--words-font-size-sm);
	line-height: 1.3;
}

[data-words-drawer-outline-item][data-level='2'] {
	padding-inline-start: 0.75rem;
}

[data-words-drawer-outline-item][data-level='3'] {
	padding-inline-start: 1.5rem;
}

[data-words-drawer-outline-bullet] {
	flex-shrink: 0;
	min-inline-size: 1.5rem;
	color: var(--_words-accent-text);
	font-size: var(--words-status-font-size);
	font-weight: var(--words-strong-font-weight);
	letter-spacing: 0.04em;
}

[data-words-drawer-outline-text] {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

[data-words-drawer-stats] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem 0.5rem;
	margin: 0;
}

[data-words-drawer-stats] > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-size: var(--words-font-size-sm);
}

[data-words-drawer-stats] dt {
	margin: 0;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

[data-words-drawer-stats] dd {
	margin: 0;
	font-weight: var(--words-strong-font-weight);
}

[data-words-drawer-warnings] {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-words-drawer-warnings] li {
	padding-block: 0.35rem;
	padding-inline: 0.5rem;
	border-radius: var(--words-command-radius);
	background: color-mix(in srgb, var(--words-toolbar-border) 30%, transparent);
	font-size: var(--words-font-size-sm);
	line-height: 1.35;
}

[data-words-drawer-warnings] li[data-severity='warn'] {
	background: color-mix(in srgb, var(--words-risk-text) 12%, transparent);
	color: var(--words-risk-text);
}

/* Contextual panel actions (DRAWER-2) ---------------------------------- */

[data-words-drawer-actions] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

[data-words-drawer-action] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2rem;
	padding-block: 0.3rem;
	padding-inline: 0.55rem;
	border: var(--words-border-width) solid
		color-mix(in srgb, var(--words-toolbar-border) 80%, transparent);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-command-color);
	font-size: var(--words-font-size-sm);
	font-weight: var(--words-strong-font-weight);
	cursor: pointer;
	transition:
		background-color 100ms ease,
		border-color 100ms ease;
}

[data-words-drawer-action]:hover {
	background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg));
	border-color: var(--_words-accent-border);
}

[data-words-drawer-action][data-active] {
	background: color-mix(in srgb, var(--_words-accent-solid) 18%, var(--words-bg));
	border-color: var(--_words-accent-border);
	color: var(--_words-accent-text);
}

[data-words-drawer-action][data-tone='full'] {
	background: var(--_words-accent-solid);
	border-color: var(--_words-accent-solid);
	color: var(--_words-accent-on);
}

[data-words-drawer-action][data-tone='ghost'] {
	background: transparent;
	border-style: dashed;
}

[data-words-drawer-action][data-tone='risk']:hover {
	background: color-mix(in srgb, var(--words-risk-text) 15%, var(--words-bg));
	border-color: var(--words-risk-text);
	color: var(--words-risk-text);
}

[data-words-drawer-readonly-text] {
	margin: 0;
	padding-block: 0.3rem;
	padding-inline: 0.5rem;
	border-radius: var(--words-command-radius);
	background: color-mix(in srgb, var(--words-toolbar-border) 30%, transparent);
	color: var(--words-command-color);
	font-size: var(--words-font-size-sm);
	line-height: 1.35;
	word-break: break-all;
}

[data-words-drawer-readonly-text][data-empty='true'] {
	color: var(--words-status-color);
	font-style: italic;
}

[data-words-drawer-readonly-text][data-tone='pending'] {
	background: color-mix(in srgb, var(--_words-accent-solid) 10%, transparent);
	color: var(--_words-accent-text);
}

[data-words-drawer-readonly-text][data-tone='error'] {
	background: color-mix(in srgb, var(--words-threat-text) 12%, transparent);
	color: var(--words-threat-text);
}

[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-group] {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--words-command-gap);
	min-inline-size: 0;
	flex-shrink: 0;
}

[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);
	/* Widened from 7× to 10× button-size so option descriptions ("Large
	   section heading", "Blockquote callout") fit instead of clipping
	   with ellipsis. Still capped at 92vw for mobile. */
	inline-size: min(calc(var(--_words-button-size) * 10), 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] {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	font-weight: var(--words-strong-font-weight);
}

/* Description wraps to up to 2 lines instead of single-line ellipsis so
   the user sees the full "Plain text block" / "Large section heading"
   description rather than a truncated tail. line-clamp keeps the menu
   compact regardless of unusually long custom descriptions. */
[data-words-slash-description] {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-inline-size: 0;
	overflow: hidden;
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	line-height: 1.3;
}

[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-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-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-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;
}

/* Headings need more breathing room above than between body blocks
   so the document gets a visible rhythm. The :not(:first-child) gate
   keeps a heading at the top of the editor flush against the toolbar
   instead of opening a blank top margin. */
[data-words-content] :where(h1, h2, h3):not(:first-child) {
	margin-block-start: calc(var(--words-block-gap) * 1.5);
}

[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: calc(var(--words-quote-px) * 1.25);
	padding-inline: calc(var(--words-quote-px) * 1.25);
	border: var(--words-border-width) solid
		color-mix(in srgb, var(--_words-accent-border) 60%, 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-block: calc(var(--words-quote-px) * 0.5);
	padding-inline-start: var(--words-quote-px);
	border-inline-start: calc(var(--words-quote-border-width) * 1.5) solid
		var(--_words-accent-border);
	background: color-mix(in srgb, var(--_words-accent-solid) 4%, transparent);
	color: var(--words-quote-color);
	font-style: italic;
}

[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));
}

/* ── Image (F3) ──────────────────────────────────────────────────────── */

[data-words-content] :where(figure[data-words-block='image']) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--words-code-py);
	margin-inline: 0;
	padding: var(--words-code-py);
	border: var(--words-border-width) solid var(--words-toolbar-border);
	border-radius: var(--words-code-radius);
	background: var(--words-bg);
}

[data-words-content] :where(figure[data-words-block='image']) img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--words-code-radius);
	user-select: none;
}

[data-words-content] :where(figure[data-words-block='image']) figcaption {
	max-inline-size: 100%;
	color: var(--words-quote-color);
	font-size: var(--words-status-font-size);
	font-style: italic;
	text-align: center;
}

[data-words-content] [data-words-block='image'][data-words-image-align='left'] {
	align-items: flex-start;
	margin-inline-end: auto;
}

[data-words-content] [data-words-block='image'][data-words-image-align='right'] {
	align-items: flex-end;
	margin-inline-start: auto;
}

[data-words-content] [data-words-block='image'][data-words-image-status='pending'] img {
	opacity: var(--words-disabled-opacity);
	filter: grayscale(0.4);
}

[data-words-content] [data-words-block='image'][data-words-image-status='pending']::after {
	content: 'Uploading…';
	color: var(--words-status-color);
	font-size: var(--words-status-font-size);
	font-style: italic;
}

[data-words-content] [data-words-block='image'][data-words-image-status='error'] {
	border-color: var(--words-threat-text);
}

[data-words-content] [data-words-block='image'][data-words-image-status='error']::after {
	content: 'Upload failed';
	color: var(--words-threat-text);
	font-size: var(--words-status-font-size);
}

[data-words-content] :focus-within > figure[data-words-block='image'],
[data-words-content] figure[data-words-block='image']:focus,
[data-words-content] figure[data-words-block='image']:focus-within {
	outline: 2px solid var(--_words-accent-border);
	outline-offset: 2px;
}

/* Atomic block selection — when the user clicks an image the provider
   flags it as the visually-selected atomic block (selectedBlockIndex).
   The render decorates the figure with data-words-block-selected so we
   can paint a strong accent border + soft glow. The drawer enters
   image mode in parallel. */
[data-words-content] figure[data-words-block='image'][data-words-block-selected] {
	outline: 3px solid var(--_words-accent-solid);
	outline-offset: 3px;
	box-shadow:
		0 0 0 6px color-mix(in srgb, var(--_words-accent-solid) 18%, transparent),
		0 0 24px color-mix(in srgb, var(--_words-accent-solid) 25%, transparent);
}

[data-words-content] figure[data-words-block='image'] {
	cursor: pointer;
}

[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-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-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;
	}
}