/**
 * words.css — eidos visual for the Words editor (content layer).
 *
 * Targets the `data-words-*` attributes the engine's render tree emits
 * (see soma `engine/render.ts`) plus the editor chrome that layers over
 * the content: the left block gutter and the floating selection bubble
 * (their Svelte lives in `words-block-gutter.svelte` /
 * `words-bubble.svelte`; the visuals live here). The settings drawer
 * keeps its own recipe.
 *
 * Tokens are the `--words-*` recipe surface (eidos/lib/recipes/base.ts).
 * The reading typography is deliberately document-grade (generous size +
 * line-height + block rhythm), not the tight UI scale.
 */

/* ── Frame ────────────────────────────────────────────────────────────── */

[data-words] {
	/* size cascade — md is the default; sm / lg override below.
	   content-px is gutter-aware (leaves room for the block handle in the
	   left margin + the settings button in the right margin) with enough
	   clearance that the dashed block outline never crowds the grip. */
	--_words-content-px: 3rem;
	--_words-content-py: var(--words-content-py-md);
	--_words-content-min: var(--words-content-min-block-size-md);
	--_words-content-max: var(--words-content-max-block-size-md);
	--_words-content-font-size: var(--words-font-size-lg);
	--_words-radius: var(--words-radius-md);
	/* Fixed height of the top menu bar — shared so the absolute inspector
	   panels (sidebar / drawer) can offset themselves below it. */
	--_words-bar-h: 2.75rem;

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

[data-words][data-size='sm'] {
	--_words-content-px: 2.5rem;
	--_words-content-py: var(--words-content-py-sm);
	--_words-content-min: var(--words-content-min-block-size-sm);
	--_words-content-max: var(--words-content-max-block-size-sm);
	--_words-content-font-size: var(--words-font-size-md);
	--_words-radius: var(--words-radius-sm);
}

[data-words][data-size='lg'] {
	--_words-content-px: 3.5rem;
	--_words-content-py: var(--words-content-py-lg);
	--_words-content-min: var(--words-content-min-block-size-lg);
	--_words-content-max: var(--words-content-max-block-size-lg);
	--_words-content-font-size: calc(var(--words-font-size-lg) + 2px);
	--_words-radius: var(--words-radius-lg);
}

[data-words]:focus-within {
	border-color: var(--words-border-hover);
	box-shadow: var(--words-focus-shadow);
}

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

[data-words][data-disabled] {
	opacity: var(--words-disabled-opacity);
	pointer-events: none;
}

/* Pre-mount frame (client-only editor — see words.svelte). Holds the
   min height so swapping in the live editor doesn't shift layout. */
[data-words][aria-busy='true'] {
	min-block-size: calc(var(--_words-content-min) + 2 * var(--_words-content-py));
}

/* ── Menu bar (formatting toolbar) ────────────────────────────────────── */

/* A fixed-height top row of formatting controls + view toggles. The frame
   is `flex-direction: column`, so the bar sits above the content naturally;
   the absolute inspector panels offset below it via `--_words-bar-h`. */
[data-words-menubar] {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	flex-wrap: nowrap;
	block-size: var(--_words-bar-h);
	padding-inline: var(--space-2);
	overflow-x: auto;
	overflow-y: hidden;
	border-block-end: var(--words-border-width) solid var(--words-border);
	background: var(--words-bg);
	border-start-start-radius: var(--_words-radius);
	border-start-end-radius: var(--_words-radius);
	scrollbar-width: thin;
}
/* Groups read as clusters separated by hairline dividers. */
[data-words-menubar-group] {
	display: flex;
	align-items: center;
	gap: 1px;
	padding-inline: var(--space-1);
	border-inline-end: 1px solid var(--words-border);
}
[data-words-menubar-group]:last-of-type {
	border-inline-end: none;
}
[data-words-menubar-spacer] {
	flex: 1 1 auto;
}
/* Active formatting button — marks reflect via `aria-pressed` (CommandButton),
   list / align / inspector via `data-active`. Both read as the same accent. */
[data-words-menubar] [data-active],
[data-words-menubar] [aria-pressed='true'] {
	color: var(--color-primary-solid);
	background: color-mix(in srgb, var(--color-primary-solid) var(--words-wash-subtle), transparent);
}
/* Preview is read-only — the surface alone looks identical to edit, so make
   the switch obvious: collapse the formatting groups, leaving the bar as just
   the view controls (inspector toggle + Edit/Preview). */
[data-words][data-mode='preview'] [data-words-menubar-group] {
	display: none;
}

/* Park the docked inspector panels below the bar so they don't cover it. */
[data-words]:has([data-words-menubar]) [data-words-sidebar],
[data-words]:has([data-words-menubar]) [data-words-drawer-panel] {
	inset-block-start: var(--_words-bar-h);
}

/* ── Left gutter — block handle ───────────────────────────────────────── */

[data-words-block-gutter] {
	position: absolute;
	inset-inline-start: 0.35rem;
	z-index: 2;
	/* The script sets `top` to the block's vertical midpoint; this
	   transform pulls the grip up by half its own height so the icon
	   lands ON the midpoint rather than starting from it. Works
	   regardless of block height (paragraph, code, table, image). */
	transform: translateY(-50%);
	/* slide smoothly between blocks as the cursor moves */
	transition: top var(--words-transition-duration) var(--words-transition-ease);
	animation: words-gutter-in var(--words-transition-duration) var(--words-transition-ease);
}
@keyframes words-gutter-in {
	/* `translateY(-50%)` keeps the grip vertically centered against the
	   block midpoint — the keyframe MUST preserve it on both frames, or
	   the end state snaps the grip back to its `top` anchor and the
	   centering is lost the moment the animation completes. */
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}
[data-words-block-gutter] [data-words-block-handle] {
	color: var(--words-placeholder-color);
	cursor: grab;
	transition:
		transform var(--words-transition-duration) var(--words-transition-ease),
		color var(--words-transition-duration) var(--words-transition-ease);
}
/* The grip is AMBIENT — no `:hover` transform. The old `scale(1.18)` grew the
   button under the cursor, which shifted its hitbox and produced a hover↔scale
   jitter ("the grip trembles"). */

/* Fade-in for the active-block gutter rail (the `[data-words-active]::before`
   marker further down). */
@keyframes words-outline-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Drop indicator painted while a block is dragged by its grip. The drag
   controller positions it frame-relative at the nearest inter-block seam;
   the bar spans the target block's width. `pointer-events: none` keeps it
   clear of the drag's own dragover hit-testing. */
[data-words-block-drop-line] {
	position: absolute;
	z-index: 5;
	height: 2px;
	margin-block-start: -1px;
	border-radius: 1px;
	background: var(--color-primary-solid);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-solid) var(--words-wash-strong), transparent);
	pointer-events: none;
}

/* ── Selection bubble toolbar ─────────────────────────────────────────── */

/* Floating card, viewport-anchored (the soma BubbleMenu writes
   --_words-bubble-x / -y from the selection's client rect, so position
   is fixed). Centred horizontally on the selection; sits above it for
   side='top', below for side='bottom'. */
[data-words-bubble-menu] {
	position: fixed;
	inset-block-start: var(--_words-bubble-y, 0);
	inset-inline-start: var(--_words-bubble-x, 0);
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--words-command-gap);
	padding: var(--space-1);
	background: var(--words-bg);
	border: var(--words-border-width) solid var(--words-border);
	border-radius: var(--words-radius-md);
	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
	animation: words-bubble-in var(--words-transition-duration) var(--words-transition-ease);
}
[data-words-bubble-menu][data-side='top'] {
	transform: translate(-50%, calc(-100% - 0.5rem));
}
[data-words-bubble-menu][data-side='bottom'] {
	transform: translate(-50%, 0.5rem);
}
[data-words-bubble-menu][hidden] {
	display: none;
}
/* Opacity-only so the keyframe doesn't fight the data-side transform. */
@keyframes words-bubble-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Active mark — the soma CommandButton stamps data-active / aria-pressed
   on the composed eidos Button; tint it to read as "on". (The Button
   recipe owns every other state: hover, focus, disabled, sizing.) */
[data-words-bubble-menu] [data-button][data-active] {
	background: var(--words-primary-solid);
	color: var(--words-command-solid-color);
}

/* Thin vertical rule between groups. */
[data-words-bubble-menu] [data-words-bubble-divider] {
	flex: 0 0 auto;
	inline-size: 1px;
	block-size: 1.15rem;
	margin-inline: var(--space-0-5);
	background: var(--words-border);
}

/* Turn-into trigger (an eidos Button) — keep it slim in the bubble. */
[data-words-bubble-menu] [data-words-bubble-trigger] {
	white-space: nowrap;
}

/* Inline link editor row (replaces the toolbar while editing a link). */
[data-words-bubble-menu] [data-words-bubble-link] {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
[data-words-bubble-menu] [data-words-bubble-link] input {
	inline-size: 15rem;
	padding: var(--space-1) var(--space-2);
	border: var(--words-border-width) solid var(--words-border);
	border-radius: var(--words-command-radius);
	background: var(--words-bg);
	color: var(--words-content-color);
	font-family: inherit;
	font-size: var(--words-font-size-md);
	outline: none;
}
[data-words-bubble-menu] [data-words-bubble-link] input:focus {
	border-color: var(--words-border-hover);
}

/* Bubble colour menu — Text + Background swatch grids. The dropdown content
   carries `data-words-bubble-color`; each `[data-words-bubble-swatch]` paints
   its hue from the inline `--words-swatch` custom property. */
[data-words-bubble-color] {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-2);
}
[data-words-bubble-color-section] {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
[data-words-bubble-color-label] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--words-font-size-sm);
	color: var(--words-command-color);
	--icon-size: 13px;
}
[data-words-bubble-swatches] {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
}
[data-words-bubble-swatch] {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--words-content-color) var(--words-wash-soft), transparent);
	border-radius: var(--words-radius-xs);
	background: var(--words-swatch, var(--words-bg));
	cursor: pointer;
	transition: box-shadow var(--words-transition-duration) var(--words-transition-ease, ease);
}
[data-words-bubble-swatch]:hover,
[data-words-bubble-swatch]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) var(--words-wash-strong), transparent);
}
/* "Default / none" chip — a diagonal strike over the surface tone. */
[data-words-bubble-swatch][data-clear] {
	background:
		linear-gradient(
			to bottom right,
			transparent calc(50% - 1px),
			color-mix(in srgb, var(--words-content-color) var(--words-wash-strong), transparent) calc(50% - 1px),
			color-mix(in srgb, var(--words-content-color) var(--words-wash-strong), transparent) calc(50% + 1px),
			transparent calc(50% + 1px)
		),
		var(--words-bg);
}

/* Turn-into menu item — label + trailing active tick. */
[data-words-bubble-into-item] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
/* trailing active tick (eidos Icon) */
[data-words-bubble-into-item] [data-icon] {
	color: var(--words-primary-text);
}

/* ── Block inspector ──────────────────────────────────────────────────── */

/* Shared body — a vertical stack of labelled property rows. Reused by
   every inspector presentation (sidebar / drawer / popover). The vertical
   layout gives each control a full-width row, so nothing crowds. */
/* The inspector body lives inside a soma `Words.Drawer` (for live provider
   reactivity); that host adds no layout — only the inner panel does. */
[data-words-inspector-host] {
	display: contents;
}
[data-words-inspector] {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	/* Tightened from space-4 → space-2 (16px → 8px) — the sidebar is narrow
	   and the previous padding ate ~20% of the usable inline width. */
	padding: var(--space-2);
}

/* ── Chrome typeface — ONE sans across every panel ─────────────────────────
   The editor CONTENT may be themed serif (`--words-font-family`), but every
   piece of CHROME (toolbar · bubble · slash · drawer · inspector · gutter
   menus) must render in a single UI sans (`--words-chrome-font`) or controls
   show mixed faces. Shipped components impose their own `font-family`, and the
   "content" archetype (Accordion content, etc.) maps to the READING serif —
   which leaked into the inspector labels (Lora). `[scope] *` is only (0,1,0),
   EQUAL to a component's `[data-x]` font rule, so post-code-split LOAD ORDER
   decided the winner. DOUBLING the scope attribute → (0,2,0) beats any
   single-attribute component font regardless of order, on the root AND every
   descendant. */
[data-words-menubar][data-words-menubar],
[data-words-menubar][data-words-menubar] *,
[data-words-bubble-menu][data-words-bubble-menu],
[data-words-bubble-menu][data-words-bubble-menu] *,
[data-words-slash-menu][data-words-slash-menu],
[data-words-slash-menu][data-words-slash-menu] *,
[data-words-drawer][data-words-drawer],
[data-words-drawer][data-words-drawer] *,
[data-words-inspector][data-words-inspector],
[data-words-inspector][data-words-inspector] *,
[data-words-block-handle-menu][data-words-block-handle-menu],
[data-words-block-handle-menu][data-words-block-handle-menu] *,
[data-words-block-inserter-menu][data-words-block-inserter-menu],
[data-words-block-inserter-menu][data-words-block-inserter-menu] * {
	font-family: var(--words-chrome-font);
}
/* Depth accent — the active node's nesting level (1 = top-level block,
   2 = column, 3 = block-inside-a-column, …) is stamped on the inspector
   root. The header mark + wash pick up the SAME doctrinal palette the
   canvas paints on the active-block dotted outline, so both surfaces read
   in agreement. Routed through the global `--color-*-solid` tokens (set on
   `:root`) so the accent is theme-aware AND inherits across the popover
   portal, where `--words-*` set on `[data-words]` would not reach. */
[data-words-inspector] {
	--_words-accent: var(--color-primary-solid);
}
[data-words-inspector][data-words-inspector-depth='2'] {
	--_words-accent: var(--color-affirm-solid); /* teal — column level */
}
[data-words-inspector][data-words-inspector-depth='3'] {
	--_words-accent: var(--color-loss-solid); /* violet — block in a column */
}
[data-words-inspector][data-words-inspector-depth='4'] {
	--_words-accent: var(--color-risk-solid); /* amber — deeper nesting */
}
/* Header — breadcrumb trail + title, bled to the panel edges with a
   hairline divider and a barely-there accent wash. */
[data-words-inspector-head] {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
	margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
	padding: var(--space-2-5) var(--space-3);
	border-block-end: 1px solid var(--words-border);
	background: color-mix(in srgb, var(--_words-accent) var(--words-wash-faint), var(--words-bg));
}
[data-words-inspector-title] {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-inline-size: 0;
	font-size: var(--words-font-size-md);
	font-weight: var(--words-strong-font-weight);
	letter-spacing: -0.01em;
	color: var(--words-content-color);
}
[data-words-inspector-title-mark] {
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 2px;
	background: var(--_words-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_words-accent) var(--words-wash-subtle), transparent);
}
[data-words-inspector-title-text] {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Delete-block button — pinned to the right edge of the inspector title row. */
[data-words-inspector-delete] {
	flex: none;
	margin-inline-start: auto;
	color: var(--color-threat-solid);
}
/* Invalid free-text input (column width / gap / image URL) — a red ring
   that does not shift layout. Set imperatively by the panel's commit
   helpers when a value fails validation; cleared on the next valid commit
   or while the user edits. */
[data-words-inspector-text][data-invalid] {
	border-color: var(--color-threat-solid);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-threat-solid) var(--words-wash-strong), transparent);
}

/* Breadcrumb trail (shown from depth ≥ 2). A single, non-wrapping row of
   muted crumbs that scrolls rather than reflowing the header — without
   this rule the raw <nav> wrapped and broke the columns layout. The last
   (active) crumb lives in the title below, so every crumb here is an
   ancestor link except the non-clickable document root. */
[data-words-inspector-breadcrumb] {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1px;
	min-inline-size: 0;
	overflow-x: auto;
	scrollbar-width: none;
	font-size: var(--words-font-size-xs, 0.6875rem);
	line-height: 1.4;
	color: var(--words-placeholder-color);
}
[data-words-inspector-breadcrumb]::-webkit-scrollbar {
	display: none;
}
[data-words-breadcrumb-crumb] {
	flex: 0 0 auto;
	max-inline-size: 8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	padding: 1px 5px;
	border: 0;
	border-radius: var(--words-radius-xs);
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: 0.01em;
}
button[data-words-breadcrumb-crumb] {
	cursor: pointer;
	transition:
		background var(--words-transition-duration) var(--words-transition-ease, ease),
		color var(--words-transition-duration) var(--words-transition-ease, ease);
}
button[data-words-breadcrumb-crumb]:hover {
	background: color-mix(in srgb, var(--_words-accent) var(--words-wash-subtle), transparent);
	color: var(--words-content-color);
}
button[data-words-breadcrumb-crumb]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) var(--words-wash-strong), transparent);
}
[data-words-breadcrumb-crumb][data-root] {
	font-weight: 600;
	opacity: 0.7;
}
[data-words-breadcrumb-sep] {
	flex: 0 0 auto;
	opacity: 0.45;
	user-select: none;
}

[data-words-inspector-section] {
	display: flex;
	flex-direction: column;
	gap: var(--space-2-5);
}
[data-words-inspector-section-title] {
	font-size: var(--words-font-size-sm);
	font-weight: var(--words-strong-font-weight);
	color: var(--words-placeholder-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Accordion sections — the ghost accordion renders flat (no separation
   between Typography / Color / Layout / Spacing / Border). Give each
   section a hairline top divider and a header that reads as a section
   label (uppercase, tracked, muted → solid when open) so the inspector
   has clear structure instead of one undifferentiated stack. */
[data-words-inspector] [data-accordion-item] + [data-accordion-item] {
	border-block-start: 1px solid var(--words-border);
}
[data-words-inspector] [data-accordion-trigger] {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--words-font-size-xs, 0.6875rem);
	font-weight: 600;
	color: var(--words-command-color);
}
[data-words-inspector] [data-accordion-trigger][data-state='open'] {
	color: var(--words-content-color);
}
[data-words-inspector] [data-accordion-content] {
	padding-block-end: var(--space-2-5);
}

[data-words-inspector-row] {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
}
/* Inspector row gated by a sibling toggle (e.g. image Width / Height /
   Align gated by Fullwidth). Reduce contrast + block pointer events so
   the user sees the field is dimmed but not removed (gives context for
   what Fullwidth controls). The actual controls inside still set
   `disabled`/`aria-disabled`; this is the visual sugar. */
[data-words-inspector-row][data-disabled] {
	opacity: 0.45;
	pointer-events: none;
}
/* Image src field shares its row with an inline `Upload` button. The
   wrapping group is the row's "value" slot — `data-inline` gives it
   `justify-content: space-between` against the label, and the inner
   flex distributes input (stretch) + button (auto) along the row. */
[data-words-inspector-src-group] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-1);
	flex: 1;
	min-inline-size: 0;
}
[data-words-inspector-src-group] input[data-words-inspector-text] {
	flex: 1;
	min-inline-size: 0;
}
/* Single-line row variant — label on the left, control on the right.
   Used by `WordsColorRow` (each color = `Label  [Picker]` per the
   inspector's compact spec). Sliders / toggle groups keep the stacked
   layout (label above, control below) because the control is wider. */
[data-words-inspector-row][data-inline] {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
/* The eidos ColorPicker root declares `inline-size: 100%` (so it fills
   form rows by default). Inside an inline inspector row that override
   collapses the label-to-picker distribution because the picker stretches
   to the full remaining width. Pin to auto here so `justify-content:
   space-between` actually pushes the picker's trigger to the right edge. */
[data-words-inspector-row][data-inline] [data-color-picker] {
	inline-size: auto;
}
/* Pin the trigger to a fixed inline size so every color row's picker has
   the same visual width regardless of the hex string length (6 chars vs
   8 chars with alpha). `tabular-nums` keeps the hex characters at a
   consistent advance width so the text doesn't jitter while the picker
   value oscillates during drag. */
[data-words-inspector-row][data-inline] [data-color-picker-trigger] {
	inline-size: 7.5rem;
	justify-content: flex-start;
	font-variant-numeric: tabular-nums;
}
[data-words-inspector-rowhead] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
[data-words-inspector-label] {
	font-size: var(--words-font-size-sm);
	color: var(--words-command-color);
	/* Font-family is inherited from `[data-words-inspector]` (forced sans
	   at the container level). */
}
[data-words-inspector-value] {
	font-size: var(--words-font-size-sm);
	color: var(--words-content-color);
	font-variant-numeric: tabular-nums;
}
/* Compact numeric input in `WordsNumRow` rowhead — pins width so the
   label / slider layout doesn't shift as the user types longer numbers.
   `tabular-nums` keeps the digits at uniform advance width. */
[data-words-inspector-rowhead] [data-number-field] {
	/* Wide enough for −  1.6  + (decimals + both steppers). The old 4.5rem
	   clipped the value and hid decimals on line-height / font-size. */
	inline-size: 6.75rem;
	flex: 0 0 auto;
}
/* Inline rows (label left, control right) that host a NumberField — pin the
   field to the SAME fixed width as the rowhead fields. A `data-inline` row
   distributes leftover space via `space-between`, so a longer label (e.g.
   "Ancho") left a narrower field than a shorter one ("Alto") — the image
   Width / Height fields came out visibly different widths. Pinning makes
   every inline numeric field identical. */
[data-words-inspector-row][data-inline] [data-number-field] {
	inline-size: 6.75rem;
	flex: 0 0 auto;
}

/* ── Unified inspector field frame ─────────────────────────────────────
   Every inspector NumberField reads as ONE bordered box — the same chrome
   as the plain text inputs — regardless of the `variant` the row component
   passes (`ghost` rendered borderless, `outline` drew its own; that mix is
   the "some ring, some black border, some nothing" inconsistency). The
   extra [data-size] bumps specificity to 0,3,0 so this beats the recipe's
   per-variant rules (0,2,0) without touching the components. The steppers
   sit INSIDE the box (borderless), the value centers, focus is one accent
   ring shared with the text inputs. */
[data-words-inspector] [data-number-field][data-size] {
	border: 1px solid var(--words-border);
	border-radius: var(--words-radius-xs);
	background: var(--words-bg);
	padding-inline: 2px;
	block-size: 1.75rem;
	transition:
		border-color var(--words-transition-duration) var(--words-transition-ease, ease),
		box-shadow var(--words-transition-duration) var(--words-transition-ease, ease);
}
[data-words-inspector] [data-number-field][data-size]:hover:not([data-focused]) {
	border-color: var(--words-border-hover);
}
[data-words-inspector] [data-number-field][data-size][data-focused] {
	/* Single focus frame — one accent ring; the border stays structural so a
	   focused field shows ONE highlight, not an accent border AND a ring. */
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) var(--words-wash-strong), transparent);
}
/* Eidos TextArea (image alt) shares the inspector input chrome. Retokenise it
   to the WORDS palette so it reads identically to the plain text inputs —
   same fill + border + radius + size — instead of the global neutral skin
   (transparent fill, lighter border) that made it look unframed and odd. */
[data-words-inspector] [data-textarea] {
	--_textarea-border: var(--words-border);
	--_textarea-border-hover: var(--words-border-hover);
	--_textarea-bg: var(--words-bg);
	--_textarea-radius: var(--words-radius-xs);
	--_textarea-font-size: var(--words-font-size-sm);
}
[data-words-inspector] [data-textarea][data-focused] [data-textarea-input] {
	/* Same single-ring focus as every other inspector field. */
	border-color: var(--words-border);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) var(--words-wash-strong), transparent);
}
[data-words-inspector] [data-number-field-input] {
	inline-size: 100%;
	min-inline-size: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: var(--words-font-size-sm);
}
[data-words-inspector] [data-number-field-increment-trigger],
[data-words-inspector] [data-number-field-decrement-trigger] {
	flex: 0 0 auto;
	inline-size: 1.15rem;
	min-inline-size: 1.15rem;
	block-size: 1.4rem;
	border-color: transparent;
	background: transparent;
	color: var(--words-command-color);
	border-radius: var(--words-radius-xs);
}
[data-words-inspector] [data-number-field-increment-trigger]:hover:not([data-disabled]),
[data-words-inspector] [data-number-field-decrement-trigger]:hover:not([data-disabled]) {
	background: color-mix(in srgb, var(--words-content-color) var(--words-wash-subtle), transparent);
	color: var(--words-content-color);
}

/* WordsSpacingRow — 4-side editor with PAIR chain.
   Layout: a vertical stack of TWO pair rows. Each pair holds two cells
   (label-above-input) plus its OWN link toggle. The two pairs are
   independent — chaining one does not chain the other. This makes the
   pair semantics unmistakable visually. */
[data-words-inspector-spacing] {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
[data-words-inspector-spacing-head] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
[data-words-inspector-spacing-grid] {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
[data-words-inspector-spacing-pair] {
	display: grid;
	/* Two equal-width inputs + a small fixed slot for the link toggle. */
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: var(--space-1);
	/* Bump icon size in this scope so the link/unlink chip is visible at
	   the Toggle xs size (default `--icon-size` is too small here). */
	--icon-size: 14px;
}
[data-words-inspector-spacing-cell] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}
[data-words-inspector-spacing-cell-label] {
	font-size: var(--words-font-size-xs, 0.75rem);
	color: var(--words-content-color);
	opacity: 0.7;
	letter-spacing: 0.02em;
}
[data-words-inspector-spacing-cell] [data-number-field] {
	inline-size: 100%;
	min-inline-size: 0;
}
[data-words-inspector-spacing-cell] [data-number-field-input] {
	inline-size: 100%;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: var(--words-font-size-sm);
}

/* Block panel — bare text inputs (code language, image alt + caption).
   Styled to match the inspector chrome (sans, sm size, ghost
   background) so they sit among the ToggleGroups without visual noise.
   `<datalist>` suggestions render natively on focus. The shared
   `[data-words-inspector-text]` selector is for plain text edits;
   `[data-words-inspector-code-language]` keeps the original selector
   for backward compatibility — both inherit the same base rules. */
[data-words-inspector-text],
[data-words-inspector-code-language] {
	flex: 1 1 0;
	min-inline-size: 0;
	min-block-size: 1.75rem;
	font: inherit;
	font-size: var(--words-font-size-sm);
	padding: 4px 8px;
	border: 1px solid var(--words-border);
	border-radius: var(--words-radius-xs);
	background: var(--words-bg);
	color: var(--words-content-color);
	transition:
		border-color var(--words-transition-duration) var(--words-transition-ease, ease),
		box-shadow var(--words-transition-duration) var(--words-transition-ease, ease);
}
[data-words-inspector-text]:hover:not(:focus),
[data-words-inspector-code-language]:hover:not(:focus) {
	border-color: var(--words-border-hover);
}
/* Single focus frame — ONE accent ring (box-shadow), NOT an inset `outline`
   and NOT also recolouring the border to accent. A field that drew an accent
   border AND a ring read as two stacked frames; the ring alone is the focus
   signal, the border stays structural. Shared by every inspector field. */
[data-words-inspector-text]:focus-visible,
[data-words-inspector-code-language]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) var(--words-wash-strong), transparent);
}

/* Callout intent swatch — small color dot rendered INSIDE the
   ToggleGroup chip alongside its localized label. Color comes from
   the doctrinal palette token for each intent (so a `risk` swatch
   matches the actual `risk` callout's accent). Lives in the chip
   button's flex flow; sits at the inline-start. */
[data-words-intent-swatch] {
	display: inline-block;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border-radius: 50%;
	margin-inline-end: 4px;
	vertical-align: -1px;
	background: var(--color-neutral-solid);
}
[data-words-intent-swatch][data-intent='neutral'] {
	background: var(--color-neutral-solid);
}
[data-words-intent-swatch][data-intent='affirm'] {
	background: var(--color-affirm-solid);
}
[data-words-intent-swatch][data-intent='fulfill'] {
	background: var(--color-fulfill-solid);
}
[data-words-intent-swatch][data-intent='risk'] {
	background: var(--color-risk-solid);
}
[data-words-intent-swatch][data-intent='threat'] {
	background: var(--color-threat-solid);
}
[data-words-intent-swatch][data-intent='loss'] {
	background: var(--color-loss-solid);
}

/* Border-style swatch — the chip IS the line preview. No lucide icon
   for solid/dashed/dotted is fitting, so we render a short top border
   in the current ink. The swatch line scales with the chip width so
   bigger sizes show a longer sample. */
[data-words-border-style-swatch] {
	display: inline-block;
	inline-size: 1.25rem;
	block-size: 0;
	border-block-start-width: 2px;
	border-block-start-color: currentColor;
}
[data-words-border-style-swatch='solid'] {
	border-block-start-style: solid;
}
[data-words-border-style-swatch='dashed'] {
	border-block-start-style: dashed;
}
[data-words-border-style-swatch='dotted'] {
	border-block-start-style: dotted;
}

/* WordsBlockPanel hierarchical subsections (table cell + table).
   Sits inside `data-words-inspector-section` and groups related rows
   under a small label. Keeps the visual separation between scopes
   (cell-level vs table-level) without the heaviness of a second
   accordion item. */
[data-words-inspector-subsection] {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-1);
}
[data-words-inspector-subsection] + [data-words-inspector-subsection] {
	border-block-start: 1px dashed var(--words-border);
	padding-block-start: var(--space-2);
}
[data-words-inspector-subsection-title] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-block-size: 1.5rem;
	font-size: var(--words-font-size-xs, 0.75rem);
	color: var(--words-content-color);
	opacity: 0.75;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
/* Per-column child-block list (columns panel). Each item: a flexible
   selectable label + a trailing delete button. Lists the column's
   contents so the user can select (→ that block's panel) or delete
   any block from the inspector. */
[data-words-inspector-block-list] {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
[data-words-inspector-sublabel] {
	font-size: var(--words-font-size-xs, 0.6875rem);
	font-weight: 600;
	color: var(--words-content-color);
	opacity: 0.55;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
[data-words-inspector-block-item] {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
[data-words-inspector-block-select] {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
	padding: var(--space-1) var(--space-2);
	font-size: var(--words-font-size-sm, 0.8125rem);
	color: var(--words-content-color);
	background: color-mix(in srgb, var(--words-content-color) var(--words-wash-faint), transparent);
	border: 1px solid var(--words-border);
	border-radius: var(--words-radius-xs);
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
[data-words-inspector-block-select]:hover {
	background: color-mix(in srgb, var(--words-content-color) var(--words-wash-faint), transparent);
}

/* Table insert/delete ops row — 3 small buttons in a horizontal flex
   group (above/below/delete for rows; left/right/delete for columns).
   Sits below the count display so the user reads "Rows: 3" then sees
   the actions, mirroring Notion/Word table panels. */
[data-words-inspector-table-ops] {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
}

[data-words-inspector-empty] {
	padding: var(--space-2) 0;
	font-size: var(--words-font-size-sm);
	color: var(--words-placeholder-color);
}

/* Sidebar — docked, always visible (builder-style). The rail reserves a
   right gutter; the sidebar itself is absolutely positioned so the frame's
   height follows the CONTENT, not the (usually taller) inspector. A flex
   row would stretch the frame to the inspector's height and leave dead
   space below the text — the inspector instead scrolls within the content
   height. */
[data-words][data-inspector='sidebar'] {
	padding-inline-end: 16rem;
}
[data-words-sidebar] {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 16rem;
	overflow-y: auto;
	border-inline-start: var(--words-border-width) solid var(--words-border);
	border-start-end-radius: var(--_words-radius);
	border-end-end-radius: var(--_words-radius);
	background: var(--words-bg);
}

/* Drawer — slide-in panel from the right edge + a fixed toggle. */
/* Clip the frame on the X axis so the closed panel — parked off the right
   edge via translateX(100%) — is genuinely HIDDEN and the open panel appears
   to emerge from the edge. Without this the frame's overflow stays visible,
   so the closed panel just sits outside the right border (visible, "only
   shifts"). `clip` on X only (not `overflow: hidden`): the block-gutter grip
   lives in the left margin INSIDE the frame, and the bubble toolbar overflows
   vertically — both must stay visible, so the Y axis is left untouched. */
[data-words][data-inspector='drawer'] {
	overflow-x: clip;
}
[data-words-drawer-toggle] {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	z-index: 21;
}
[data-words-drawer-panel] {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 20;
	inline-size: 16rem;
	max-inline-size: 85%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--words-bg);
	border-inline-start: var(--words-border-width) solid var(--words-border);
	border-start-end-radius: var(--_words-radius);
	border-end-end-radius: var(--_words-radius);
	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
	transform: translateX(100%);
	transition: transform var(--words-transition-duration) var(--words-transition-ease);
}
[data-words-drawer-panel][data-open] {
	transform: translateX(0);
}
[data-words-drawer-panel-head] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
	border-block-end: var(--words-border-width) solid var(--words-border);
	font-size: var(--words-font-size-md);
	font-weight: var(--words-strong-font-weight);
	color: var(--words-content-color);
}

/* Popover — a corner toggle floats the inspector. */
[data-words-popover-anchor] {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	z-index: 21;
}
[data-words-inspector-popover] {
	inline-size: 16rem;
	padding: 0;
}

/* ── Content surface (the contenteditable) ───────────────────────────── */

[data-words-content] {
	position: relative;
	flex: 1 1 auto;
	min-block-size: var(--_words-content-min);
	max-block-size: var(--_words-content-max);
	overflow-y: auto;
	padding: var(--_words-content-py) var(--_words-content-px);
	font-size: var(--_words-content-font-size);
	line-height: 1.7;
	color: var(--words-content-color);
	outline: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Soft line breaks: Shift+Enter inserts a literal `\n` into the text
	   model (`insertLineBreak`). With the default `white-space: normal` the
	   browser collapses that `\n` to a space — the break is invisible.
	   `pre-wrap` preserves newlines AND still wraps long lines; this is the
	   canonical editable-surface rule (ProseMirror / Lexical / TipTap all
	   set it on the editor root). Code blocks render as `<pre>` whose UA
	   `white-space: pre` overrides this inherited value, so they keep their
	   own behaviour. */
	white-space: pre-wrap;
}

/* Active-block marker. `words-activate.svelte` stamps `data-words-active`
   + a nesting-depth index (`data-words-depth`) on the active block's DOM
   node — imperatively, NOT via the document model, so it never re-renders
   the contenteditable (which would fight the caret). A dotted OUTLINE
   (not border → zero reflow) shows the inspector's current target on the
   canvas. The hue shifts by depth so nested structure reads at a glance:
   blue at top level, then teal / violet / amber descending into columns. */
/* Active-block rail — a single vertical bar in the GUTTER (left margin), at a
   FIXED column (frame-relative, so it never shifts right for nested blocks),
   one fixed colour. Its top/height track the active block; the rail element is
   rendered by `words-active-rail.svelte` and positioned here. */
[data-words-active-rail] {
	position: absolute;
	inset-inline-start: calc(var(--_words-content-px) - 1.4rem);
	z-index: 1;
	inline-size: 3px;
	border-radius: 2px;
	background: var(--color-primary-solid);
	pointer-events: none;
	transition:
		top var(--words-transition-duration) var(--words-transition-ease),
		height var(--words-transition-duration) var(--words-transition-ease);
}

[data-words-content] :where([data-words-node='block']):first-child {
	margin-block-start: 0;
}
[data-words-content] :where([data-words-node='block']):last-child {
	margin-block-end: 0;
}

/* ── Placeholder ──────────────────────────────────────────────────────── */

[data-words-placeholder] {
	position: absolute;
	inset-block-start: var(--_words-content-py);
	inset-inline-start: var(--_words-content-px);
	font-size: var(--_words-content-font-size);
	line-height: 1.7;
	color: var(--words-placeholder-color);
	pointer-events: none;
	user-select: none;
}
[data-words-placeholder][data-hidden] {
	display: none;
}

/* ── Block rhythm ─────────────────────────────────────────────────────── */

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

/* Columns block — flex layout for side-by-side content. Each child
   `[data-words-column]` is a flex item; the engine sets `flex: <user-
   chosen value or 1>` inline so equal-width is the default and the
   user can resize via the inspector. Gap reuses the block-gap token
   so columns breathe the same vertical rhythm as the surrounding
   content. Each column is also a flex container itself (column
   direction) so its nested blocks stack vertically. */
[data-words-content] [data-words-block='columns'] {
	display: flex;
	flex-direction: row;
	gap: var(--words-block-gap);
	margin-block: var(--words-block-gap) 0;
	align-items: stretch;
}
[data-words-content] [data-words-block='columns'] [data-words-column] {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	/* Visual cue while editing — without this, an empty columns block
	   collapses to 0 height and the user can't see where the layout is.
	   The dashed outline + breathing min-height make the structure
	   discoverable; the soft tone fades into the background once the
	   user fills the columns with real content. No padding — child
	   blocks own their own padding via the inspector's Spacing section
	   so the column dashed border traces exactly the content edge. */
	min-block-size: 3em;
	padding: 0;
	border: 1px dashed var(--words-border);
	border-radius: var(--words-radius-xs);
	transition: border-color var(--words-transition-duration) var(--words-transition-ease);
}
[data-words-content] [data-words-block='columns'] [data-words-column]:hover,
[data-words-content] [data-words-block='columns'] [data-words-column]:focus-within {
	border-color: var(--words-content-color);
}
/* Preview is read-only — the dashed border + min-height are editing
   affordances; an empty column shouldn't advertise itself. Hide them. */
[data-words][data-mode='preview'] [data-words-block='columns'] [data-words-column] {
	border-color: transparent;
	min-block-size: 0;
}
/* Reset the universal block-rhythm `margin-block` for the FIRST nested
   block of each column — otherwise that extra gap pushes the column
   contents down relative to the column's frame, breaking vertical
   alignment with siblings. */
[data-words-content] [data-words-block='columns'] [data-words-column] > *:first-child {
	margin-block-start: 0;
}


/* ── Paragraph ────────────────────────────────────────────────────────── */

[data-words-block='paragraph'] {
	margin-block: var(--words-block-gap) 0;
}

/* ── Headings ─────────────────────────────────────────────────────────── */

[data-words-block='heading'] {
	margin-block: calc(var(--words-block-gap) * 1.5) 0;
	color: var(--words-heading-color);
	font-weight: var(--words-heading-font-weight);
	line-height: var(--words-heading-line-height);
	letter-spacing: -0.01em;
}
h1[data-words-block='heading'] {
	font-size: var(--words-heading-h1-font-size);
}
h2[data-words-block='heading'] {
	font-size: var(--words-heading-h2-font-size);
}
h3[data-words-block='heading'] {
	font-size: var(--words-heading-h3-font-size);
}

/* ── Quote ────────────────────────────────────────────────────────────── */

blockquote[data-words-block='quote'] {
	padding-inline-start: var(--words-quote-px);
	border-inline-start: var(--words-quote-border-width) solid var(--words-primary-border);
	color: var(--words-quote-color);
	font-style: italic;
}

/* ── Code block ───────────────────────────────────────────────────────── */

pre[data-words-block='code'] {
	padding: calc(var(--words-code-py) * 3) calc(var(--words-code-px) * 3);
	border-radius: var(--words-radius-sm);
	background: var(--words-code-bg);
	color: var(--words-code-color);
	font-family: var(--words-code-font-family);
	font-size: 0.9em;
	line-height: 1.6;
	overflow-x: auto;
	tab-size: 2;
}
pre[data-words-block='code'] code {
	font-family: inherit;
	white-space: pre;
}

/* syntax tokens (highlightWordsCode) */
[data-words-code-token='keyword'] {
	color: var(--words-primary-text);
	font-weight: var(--words-strong-font-weight);
}
[data-words-code-token='string'] {
	color: var(--words-affirm-text);
}
[data-words-code-token='number'] {
	color: var(--words-fulfill-text);
}
[data-words-code-token='comment'] {
	color: var(--words-content-color);
	opacity: 0.6;
	font-style: italic;
}
[data-words-code-token='function'] {
	color: var(--words-secondary-text);
}

/* ── Lists ────────────────────────────────────────────────────────────── */

[data-words-block='list'] {
	padding-inline-start: var(--words-list-padding-inline-start);
}
[data-words-block='list'][data-words-list-kind='check'] {
	padding-inline-start: 0;
	list-style: none;
}
li[data-words-node='list-item'] {
	margin-block: 0.25em;
}
li[data-words-node='list-item'][data-words-indent='1'] {
	margin-inline-start: var(--words-list-padding-inline-start);
}
li[data-words-node='list-item'][data-words-indent='2'] {
	margin-inline-start: calc(var(--words-list-padding-inline-start) * 2);
}

/* check toggle */
[data-words-list-kind='check'] li[data-words-node='list-item'] {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}
[data-words-check-toggle] {
	flex: 0 0 auto;
	inline-size: 1.1em;
	block-size: 1.1em;
	margin-block-start: 0.3em;
	border: 1.5px solid var(--words-border-hover);
	border-radius: var(--words-radius-sm);
	background: var(--words-bg);
	cursor: pointer;
	transition:
		background var(--words-transition-duration) var(--words-transition-ease),
		border-color var(--words-transition-duration) var(--words-transition-ease);
}
[data-words-check-toggle][data-words-checked='true'] {
	border-color: var(--words-primary-solid);
	background: var(--words-primary-solid)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")
		center / 70% no-repeat;
}
[data-words-checked='true'] :where(span[data-words-node='text']) {
	color: var(--words-content-color);
	opacity: 0.55;
	text-decoration: line-through;
}

/* ── Table ────────────────────────────────────────────────────────────── */

table[data-words-block='table'] {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}
table[data-words-block='table'] :where(td, th) {
	padding: var(--space-1-5) var(--space-2-5);
	border: var(--words-border-width) solid var(--words-border);
	text-align: start;
	vertical-align: top;
}
table[data-words-block='table'] th {
	background: var(--words-code-bg);
	font-weight: var(--words-strong-font-weight);
}
[data-words-node='table-cell'][data-words-cell-align='center'] {
	text-align: center;
}
[data-words-node='table-cell'][data-words-cell-align='right'] {
	text-align: end;
}
[data-words-node='table-cell'][data-words-cell-vertical='middle'] {
	vertical-align: middle;
}
[data-words-node='table-cell'][data-words-cell-vertical='bottom'] {
	vertical-align: bottom;
}

/* ── Image ────────────────────────────────────────────────────────────── */

figure[data-words-block='image'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	/* Browser default for <figure> is `margin-inline: 40px` — it eats
	   ~80px from every column / container the figure sits in. Reset to 0
	   so the image can use the full content area of its parent (the
	   block-gap-aware margin-block reset above only touched the vertical
	   axis). */
	margin-inline: 0;
}
/* When no explicit width attr is set, cap at the container so the image
   doesn't break layout. When the user typed an explicit width in the
   inspector (renders as `<img width="X">`), let that win — including
   values LARGER than the natural / container size (intentional upscale
   for hero use-cases). */
figure[data-words-block='image'] img:not([width]) {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--words-radius-sm);
}
figure[data-words-block='image'] img[width] {
	block-size: auto;
	border-radius: var(--words-radius-sm);
}
figure[data-words-block='image'][data-words-image-align='left'] {
	align-items: flex-start;
}
figure[data-words-block='image'][data-words-image-align='right'] {
	align-items: flex-end;
}
/* Fullwidth: drop the figure's flex layout (which sized it to its
   content + caused overflow on `inline-size: 100%` chains with the
   column's flex parent) and force the figure to fill its container.
   The column is `display: flex; align-items: normal` and its child
   flex items default to `flex: 0 1 auto` — that auto basis collapses
   block-level children to their intrinsic content (= the img's natural
   width). Setting `inline-size: 100%` explicitly + `box-sizing:
   border-box` is what makes the figure fill the column's content area
   without overflowing past its padding. The img inside then stretches
   inside the figure. */
figure[data-words-block='image'][data-words-image-full-width] {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
}
figure[data-words-block='image'][data-words-image-full-width] img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	box-sizing: border-box;
}
figure[data-words-block='image'] figcaption {
	font-size: 0.85em;
	color: var(--words-quote-color);
	text-align: center;
}
figure[data-words-block='image'][data-words-block-selected] {
	outline: 2px solid var(--words-primary-solid);
	outline-offset: 3px;
	border-radius: var(--words-radius-sm);
}
figure[data-words-block='image'][data-words-image-status='uploading'] {
	opacity: 0.6;
}
figure[data-words-block='image'][data-words-image-status='error'] {
	outline: 2px solid var(--words-threat-solid);
	outline-offset: 3px;
}

/* ── Divider ──────────────────────────────────────────────────────────── */

hr[data-words-block='divider'] {
	block-size: 0;
	border: none;
	border-block-start: var(--words-border-width) solid var(--words-border);
	margin-block: calc(var(--words-block-gap) * 1.25) 0;
}
hr[data-words-block='divider'][data-words-block-selected] {
	border-block-start-color: var(--words-primary-solid);
	border-block-start-width: 2px;
}

/* ── Callout ──────────────────────────────────────────────────────────── */

[data-words-block='callout'] {
	padding: var(--space-3) var(--space-4);
	border: var(--words-border-width) solid var(--words-neutral-border);
	border-inline-start-width: 3px;
	border-radius: var(--words-radius-sm);
	background: var(--words-neutral-track);
}
[data-words-callout-title] {
	margin-block-end: var(--space-1);
	font-weight: var(--words-strong-font-weight);
}
[data-words-block='callout'] :where([data-words-node='block']):first-child {
	margin-block-start: 0;
}
[data-words-callout-intent='affirm'] {
	border-color: var(--words-affirm-border);
	background: var(--words-affirm-track);
}
[data-words-callout-intent='affirm'] [data-words-callout-title] {
	color: var(--words-affirm-text);
}
[data-words-callout-intent='fulfill'] {
	border-color: var(--words-fulfill-border);
	background: var(--words-fulfill-track);
}
[data-words-callout-intent='fulfill'] [data-words-callout-title] {
	color: var(--words-fulfill-text);
}
[data-words-callout-intent='risk'] {
	border-color: var(--words-risk-border);
	background: var(--words-risk-track);
}
[data-words-callout-intent='risk'] [data-words-callout-title] {
	color: var(--words-risk-text);
}
[data-words-callout-intent='threat'] {
	border-color: var(--words-threat-border);
	background: var(--words-threat-track);
}
[data-words-callout-intent='threat'] [data-words-callout-title] {
	color: var(--words-threat-text);
}
[data-words-callout-intent='loss'] {
	border-color: var(--words-loss-border);
	background: var(--words-loss-track);
}
[data-words-callout-intent='loss'] [data-words-callout-title] {
	color: var(--words-loss-text);
}

/* ── Inline marks ─────────────────────────────────────────────────────── */

[data-words-marks~='bold'] {
	font-weight: var(--words-strong-font-weight);
}
[data-words-marks~='italic'] {
	font-style: italic;
}
[data-words-marks~='underline'] {
	text-decoration-line: underline;
	text-underline-offset: 0.18em;
}
[data-words-marks~='strike'] {
	text-decoration-line: line-through;
}
[data-words-marks~='underline'][data-words-marks~='strike'] {
	text-decoration-line: underline line-through;
}
[data-words-marks~='code'] {
	padding: var(--words-code-py) var(--words-code-px);
	border-radius: var(--words-code-radius);
	background: var(--words-code-bg);
	font-family: var(--words-code-font-family);
	font-size: 0.9em;
}

/* ── Link ─────────────────────────────────────────────────────────────── */

a[data-words-node='link'] {
	color: var(--words-primary-text);
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	cursor: pointer;
}
a[data-words-node='link']:hover {
	text-decoration-thickness: 2px;
}

/* ── Find/replace matches ─────────────────────────────────────────────── */

mark[data-words-find-match] {
	border-radius: 2px;
	background: var(--words-fulfill-track);
	color: inherit;
}
mark[data-words-find-match][data-words-find-active] {
	background: var(--words-fulfill-solid);
	color: var(--words-fulfill-text);
}

/* ── Selection ────────────────────────────────────────────────────────── */

[data-words-content] ::selection {
	background: color-mix(in srgb, var(--words-primary-solid) var(--words-wash-soft), transparent);
}