svelte-kit-vice/src/uix/eidos/components/palabras/palabras.css

/**
 * `<palabras>` — editor-specific styles.
 *
 * Layout shell is composed from our components (Flex). This file styles what
 * those don't: the editing surface, the active-block selection marker, and the
 * FLOATING inspector panel (its own overlay surface — deliberately distinct from
 * the docked Words inspector). Content reading styles stay minimal — `scheme-style`
 * will own the per-element look next.
 */

[data-palabras] {
	display: block;
}
[data-palabras-shell] {
	inline-size: 100%;
}
/* The breadcrumb wrapper only delegates clicks — transparent to layout. */
[data-palabras-breadcrumb-wrap] {
	display: contents;
}

/* ── Stage: document full-width, panel floats over the frame's top-right ──── */
[data-palabras-stage] {
	/* not positioned: the seam line (painted by Words' block-drag controller) is
	   calculated frame-relative; the inspector panel becomes frame-anchored too
	   via the rules below. */
}
[data-palabras-doc-card] {
	min-block-size: 20rem;
}
/* Make the Words frame the positioned ancestor for the drop-line seam (and the
   inspector panel below). The Words.Provider stamps `data-words` on the SAME
   div palabras stamps `data-palabras`, so the compound attribute selector
   targets this exact element only; standalone <Words> is untouched. */
[data-palabras][data-words] {
	position: relative;
}
[data-palabras-doc] {
	/* Two real columns: the grip RAIL (its own div with width) + the canvas. */
	display: flex;
	align-items: stretch;
}
/* Left RAIL — a real column with its OWN width (not padding). Holds the block
   grip; `position: relative` so the grip slot positions against it. Same width
   on mobile + desktop (option A). */
[data-palabras-rail] {
	flex: 0 0 var(--palabras-rail, 32px);
	position: relative;
	/* Bullet-proof containing block for the absolutely-positioned grip slot. If
	   `position: relative` alone ever fails to register the rail as the slot's
	   offsetParent, the slot jumps past DOC + CARD (both static — they can't be CBs
	   without breaking the Words drop-line seam's frame anchor) straight to the outer
	   frame, landing the grip ~25px LEFT at the card edge. A transform establishes
	   the containing block via a second, independent mechanism so it can't fall through. */
	transform: translateZ(0);
}
/* Canvas — the editing column. `min-inline-size: 0` lets it shrink within the
   flex row instead of overflowing. NOT positioned: the drop-line seam painted by
   Words' block-drag controller is calculated frame-relative ([data-words]); any
   positioned ancestor between the seam and the frame breaks the anchor. */
[data-palabras-canvas] {
	flex: 1 1 auto;
	min-inline-size: 0;
}
/* Block-grip SLOT — owns the gutter placement. The grip sits at the visited
   block's mid-height (PalabrasHandle sets inline `top` = block centre) and
   GLIDES between blocks via the `top` transition. The vertical centring
   (translateY(-50%)) lives on the slot, NOT the Button, so the Button's
   `:active { translateY(1px) }` press transform never fights it. Scoped under
   [data-palabras-doc] (0,2,0) to beat the Button recipe's `position`. */
[data-palabras-doc] [data-palabras-handle-slot] {
	position: absolute;
	/* `left` is set INLINE per-block by PalabrasHandle: 0 for a top-level block
	   (flush in the rail), or the block's own left edge for a NESTED block (the
	   handle floating out of the rail into the canvas — the rail has no overflow
	   clip). Only `top` glides; `left` snaps so a rail↔inline jump isn't a fly. */
	transform: translateY(-50%);
	z-index: 5;
	transition: top var(--duration-fast, 0.12s) var(--ease-default, ease);
}
/* Action-menu entrance — pin ONE animation. The menu gets TWO competing entrance
   animations on open: the sema/motion `present-rise` (applied WHILE the
   `data-event` hold is up, ~240ms, because the `open` event is family `emerge`)
   and the dropdown recipe's `dropdown-menu-enter` (on `data-state=open`). When
   the hold ends the `animation-name` switches → the browser RESTARTS the
   animation, snapping opacity back to 0 for a frame. This menu is rendered
   in-place (position:fixed but DOM-nested in the rail, NOT portaled), so that
   transparent frame reveals the editor blocks behind it — the "block background
   flashing over the menu" flicker. Pin the recipe animation with `!important`
   so the name never switches and opacity never resets to 0. */
[data-palabras-handle-menu][data-state='open'] {
	animation: dropdown-menu-enter var(--duration-fast, 0.12s) var(--ease-out, ease) !important;
}
/* Every menu item (main actions + insert tiles + the submenu trigger) is an
   icon + label row. The label grows so any trailing chevron (on the "Insertar
   bloque" sub-trigger) is pushed to the right edge. */
[data-palabras-handle-menu] [role='menuitem'] {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
[data-palabras-handle-menu] [role='menuitem'] > span {
	flex: 1 1 auto;
}
[data-palabras-handle-menu] [role='menuitem'] svg {
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	opacity: 0.85;
}
/* "Insertar bloque" submenu — a compact 2-column grid of type tiles. Keyboard
   arrow-nav stays vertical over DOM order (mouse-first for now). */
[data-palabras-insert-grid] {
	display: grid;
	grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
	gap: 2px;
}
/* Unified round tool button — the block-action grip (⋮) AND the column "+"
   inserter share ONE elevated, bordered, fully-round chrome (overriding the ghost
   Button's transparent look). Scoped under [data-palabras-doc] (0,2,0) so it beats
   the Button recipe. */
[data-palabras-doc] [data-palabras-handle],
[data-palabras-canvas] [data-palabras-column-inserter] [data-palabras-column-inserter-button] {
	background: var(--color-surface-default);
	border: 1px solid var(--color-neutral-border);
	border-radius: 999px;
	box-shadow:
		0 4px 12px -2px rgb(0 0 0 / 0.22),
		0 2px 4px -1px rgb(0 0 0 / 0.16);
	color: var(--color-content-muted);
}
/* Hover — the arm carries `[data-button]` + `:not([data-disabled])` so it (0,5,0)
   beats the eidos ghost-Button hover `[data-button]:hover:not()…` (0,4,0), which
   for ghost forces bg + border to transparent. `background` is re-asserted because
   the ghost hover would otherwise blank the round chip's surface. */
[data-palabras-doc] [data-button][data-palabras-handle]:hover:not([data-disabled]),
[data-palabras-canvas]
	[data-palabras-column-inserter]
	[data-button][data-palabras-column-inserter-button]:hover:not([data-disabled]) {
	background: var(--color-surface-default);
	border-color: var(--color-content-primary);
	color: var(--color-content-primary);
}
/* The grip is also a drag source. */
[data-palabras-doc] [data-palabras-handle] {
	cursor: grab;
}
[data-palabras-doc] [data-palabras-handle]:active {
	cursor: grabbing;
}
/* A block NESTED inside a column gets a slightly smaller grip than the
   rail/top-level one (`scale` is independent of the recipe's `:active` transform,
   so the press nudge still composes). */
[data-palabras-doc] [data-palabras-handle][data-nested] {
	scale: 0.8;
}
[data-palabras-doc] [data-words-content] {
	display: block;
	outline: none;
}

/* Drop indicator painted by Words' block-drag controller while a block is being
   dragged by its grip. The controller positions it frame-relative ([data-words])
   at the nearest inter-block seam; the bar spans the target block's width. We
   restyle here (Words' own recipe is not loaded under palabras). */
[data-palabras-canvas] [data-words-block-drop-line] {
	position: absolute;
	z-index: 5;
	block-size: 2px;
	margin-block-start: -1px;
	border-radius: 1px;
	background: var(--color-primary-solid);
	pointer-events: none;
}
/* Kill the archetype focus ring (box-shadow) on the editing surface — the caret
   is the focus indicator; otherwise the whole document gets boxed in violet. */
[data-palabras-doc] [data-words-content][data-archetype]:focus-visible {
	box-shadow: none;
}
[data-palabras-doc] [data-words-content] :where(h1, h2, h3, p) {
	margin-block: 0 0.6em;
}
/* Selection marker for the active/selected block — dotted (NOT the solid focus
   ring, which is suppressed above). Stamped by WordsActivate on the active
   block element. */
[data-palabras-doc] [data-words-active] {
	outline: 1.5px dashed var(--color-primary-border);
	outline-offset: 6px;
	border-radius: var(--radius-sm);
}
/* A block nested inside a column (or a table cell) must keep its selection ring
   WITHIN the container's own dashed border. The top-level 6px offset would spill
   past it; a tighter 3px offset fits inside the container's inner padding
   (`--space-2`), so the ring reads as "contained by" the structure, not bleeding
   over it. */
[data-palabras-doc] :is([data-words-column], [data-words-node='table-cell']) [data-words-active] {
	outline-offset: 3px;
}

/* Columns block — flex layout, MIRRORED FROM Words' `words.css` (palabras does
   NOT load Words' recipe, so without this the block gets no layout or height).
   An empty columns block otherwise collapses to 0px: invisible AND it breaks the
   grip — a zero-height block makes the rail's vertical block-targeting bands
   (`blockAtY`, Voronoi-on-Y) DEGENERATE, so the grip jumps and the block can't
   be selected or targeted, and inserts land off-by-one. `min-block-size` + the
   dashed per-column outline give it real, discoverable, clickable structure. */
[data-palabras-doc] [data-words-block='columns'] {
	display: flex;
	flex-direction: row;
	/* Wide enough for a block's inline grip handle to sit in the inter-column
	   gutter WITHOUT overlapping the previous column (an overlap re-anchors the
	   grip on hover). Tied to HANDLE_REACH in palabras-handle.svelte. */
	gap: 2.5rem;
	margin-block: var(--space-3) 0;
	align-items: stretch;
}
[data-palabras-doc] [data-words-block='columns'] [data-words-column] {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 3em;
	/* Inner padding so a nested block is NOT flush with the column border. This
	   gives the active-block selection ring (an `outline` drawn OUTSIDE the block
	   box) room to sit INSIDE the column instead of spilling past its dashed
	   border. Must be >= the ring's reach (offset + width) — see the nested
	   `[data-words-active]` rule below. */
	padding: var(--space-2);
	border: 1px dashed var(--color-neutral-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--duration-fast, 0.12s) var(--ease-default, ease);
}
[data-palabras-doc] [data-words-block='columns'] [data-words-column]:hover,
[data-palabras-doc] [data-words-block='columns'] [data-words-column]:focus-within {
	border-color: var(--color-content-primary);
}
/* Reset the universal block-rhythm margin on each column's first nested block. */
[data-palabras-doc] [data-words-block='columns'] [data-words-column] > *:first-child {
	margin-block-start: 0;
}
/* Per-column "+" inserter — an overlay centred over each EMPTY column. Absolute
   so it anchors to the FRAME (not the canvas — a positioned canvas breaks the
   drop-line seam's frame-relative anchor); the inline left/top are
   frame-relative. The menu is portaled, so the centring transform here doesn't
   become the menu's containing block. */
[data-palabras-canvas] [data-palabras-column-inserter] {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 4;
	/* Hidden until the cursor is over its column (set via `data-visible` by the
	   inserter's hover effect). */
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-fast, 0.12s) var(--ease-default, ease);
}
[data-palabras-canvas] [data-palabras-column-inserter][data-visible] {
	opacity: 1;
	pointer-events: auto;
}
/* ── Image ─────────────────────────────────────────────────────────────────
   palabras does NOT load Words' recipe, so the <figure> gets none of its layout
   (and keeps the UA default `margin-inline: 40px`, and the engine's
   `data-words-image-full-width` / `data-words-image-align` attrs have nothing to
   react to). Mirror the essential figure rules here, scoped to the doc. */
[data-palabras-doc] figure[data-words-block='image'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: 0;
	margin-block: var(--space-4) 0;
	/* The image is an ATOMIC block (the figure is contenteditable=false). Without
	   this, clicking it inside the contenteditable SELECTS the image and the browser
	   paints its native SOLID selection outline over our dashed active marker.
	   `user-select` inherits, so this covers the img / tile / placeholder / caption. */
	user-select: none;
}
[data-palabras-doc] figure[data-words-block='image'] img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-sm);
}
/* Float intent — only emitted by the engine when NOT full width. */
[data-palabras-doc] figure[data-words-block='image'][data-words-image-align='left'] {
	align-items: flex-start;
}
[data-palabras-doc] figure[data-words-block='image'][data-words-image-align='right'] {
	align-items: flex-end;
}
/* Full width — span the whole content column (the default for new images). */
[data-palabras-doc] figure[data-words-block='image'][data-words-image-full-width] {
	display: block;
	inline-size: 100%;
}
[data-palabras-doc] figure[data-words-block='image'][data-words-image-full-width] img {
	inline-size: 100%;
}
[data-palabras-doc] figure[data-words-block='image'] figcaption {
	margin-block-start: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-content-muted);
	text-align: center;
}
/* ── Image fit modes (Fill / Fit / Crop / Tile) ───────────────────────────────
   The FRAME (fixed 16:9 + overflow clip) lives on the IMG / tile, NOT the figure,
   so the figcaption stays OUTSIDE the clip and remains visible below it. */
[data-palabras-doc] figure[data-words-block='image'][data-words-image-fit] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	inline-size: 100%;
}
[data-palabras-doc]
	figure[data-words-block='image'][data-words-image-fit]
	:where(img, [data-words-image-tile]) {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	block-size: auto;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
	/* fill / crop default to cover; fit / tile override below. */
	object-fit: cover;
}
[data-palabras-doc] figure[data-words-image-fit='fit'] img {
	object-fit: contain;
}
/* Tile — the image is a repeated background on a div that fills the frame. */
[data-palabras-doc] figure[data-words-image-fit='tile'] [data-words-image-tile] {
	background-repeat: repeat;
	background-size: auto;
	background-position: center;
}

/* ── Image placeholder ────────────────────────────────────────────────────
   Empty-src state (`{ type: 'image', src: '' }`): the engine renders
   `[data-words-image-placeholder]` (a div + two label spans). palabras shows ONLY
   a large default image SVG — a clean full-width drop-zone card; the URL is filled
   from the inspector, so the engine's label/hint text spans are hidden. */
[data-palabras-doc] [data-words-image-placeholder] {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 11rem;
	padding: var(--space-6) var(--space-4);
	border: 1.5px dashed var(--color-neutral-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
	color: var(--color-content-muted);
	user-select: none;
}
/* The icon ONLY — larger (lucide `image`, muted grey). */
[data-palabras-doc] [data-words-image-placeholder]::before {
	content: '';
	inline-size: 4.5rem;
	block-size: 4.5rem;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa0aa'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='3'%20rx='2'%20ry='2'/%3E%3Ccircle%20cx='9'%20cy='9'%20r='2'/%3E%3Cpath%20d='m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021'/%3E%3C/svg%3E")
		center / contain no-repeat;
}
/* The engine's placeholder text is hidden — palabras keeps just the icon. */
[data-palabras-doc] [data-words-image-placeholder-label],
[data-palabras-doc] [data-words-image-placeholder-hint] {
	display: none;
}

/* ── Floating inspector panel ─────────────────────────────────────────────── */
/* The floating surface IS a framework `<Popover.Content>` — positioning (side /
   align / flip / shift / fit-to-viewport), the portal, dismissal AND the surface
   (border / bg / shadow / max-height) all come from the popover recipe. Here we
   only RE-SHAPE the content's inner layout into a flex column with a pinned
   header, a scrollable body and a pinned footer — overriding the popover recipe's
   `display: grid` / padding / gap / `overflow: auto`. Doubled attribute (0,2,0)
   beats `[data-popover-content]` (0,1,0) regardless of stylesheet load order. */
[data-palabras-panel-card][data-palabras-panel-card] {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	font-family: var(--font-ui);
}
/* Force the UI SANS across the whole panel + every descendant. The framework
   Accordion's content archetype maps to the READING serif (Lora), which would
   leak into the field labels. A DOUBLED scope attribute = (0,2,0) beats any
   single-attribute component font rule regardless of code-split load order —
   same technique as Words' chrome typeface guard. */
[data-palabras-panel-card][data-palabras-panel-card],
[data-palabras-panel-card][data-palabras-panel-card] * {
	font-family: var(--font-ui);
}

/* Header: block-defining icon · title (grows) · trash */
[data-palabras-panel-head] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-4) var(--space-3);
	/* The header is the drag handle (PalabrasPanel). */
	cursor: move;
	user-select: none;
	touch-action: none;
}
/* Body — header + footer stay pinned, this holds the scrollable region. It CLIPS
   (overflow hidden) rather than scrolls: the panel is compact (single open
   accordion) and clipping means NO scrollbar ever flaps in/out during a collapse
   animation (which momentarily measures the full content height) — that flap was
   the "trigger shifts right" glitch — and NO gutter is reserved (no wasted width). */
[data-palabras-panel-body] {
	flex: 1 1 auto;
	min-block-size: 0;
	/* Scrolls within the floating-ui height cap (`--_palabras-float-max-h`) when
	   the panel can't fit fully on screen — header + footer stay pinned. */
	overflow-y: auto;
	padding: 0 var(--space-4) var(--space-4);
}
/* The block's defining icon, tinted by the schema's dotToken (via currentColor). */
[data-palabras-panel-icon] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
[data-palabras-panel-icon] svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}
[data-palabras-panel-title] {
	flex: 1 1 auto;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-content-primary);
}

/* Section: collapsible title + fields */
[data-palabras-panel-section] {
	margin-block-start: var(--space-3);
}
[data-palabras-panel-section-title] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-content-muted);
}
[data-palabras-panel-section-title] svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	opacity: 0.7;
}
[data-palabras-panel-fields] {
	margin-block-start: var(--space-3);
}
/* Pinned header section — always visible, no toggle; sits flush at the top. */
[data-palabras-panel-section][data-pinned] {
	margin-block-start: 0;
}
[data-palabras-panel-section][data-pinned] [data-palabras-panel-fields] {
	margin-block-start: 0;
}
/* URL + upload-button row (the image `src` field). */
[data-palabras-src-group] {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	inline-size: 100%;
}
[data-palabras-src-group] [data-palabras-text] {
	flex: 1 1 auto;
}
/* Slider field — label + value ABOVE, the slider full-width BELOW (photo-app).
   Compact (Apariencia stacks 7 in a row): tight label line-height + reduced gaps. */
[data-palabras-field][data-slider] {
	gap: var(--space-0-5);
}
[data-palabras-field][data-slider] + [data-palabras-field][data-slider] {
	margin-block-start: var(--space-2);
}
[data-palabras-field][data-slider] [data-palabras-slider-head] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
}
[data-palabras-field][data-slider] [data-palabras-field-label],
[data-palabras-field][data-slider] [data-palabras-slider-value] {
	line-height: 1.1;
}
[data-palabras-field][data-slider] [data-palabras-slider-value] {
	font-size: var(--font-size-xs);
	color: var(--color-content-muted);
	font-variant-numeric: tabular-nums;
}
[data-palabras-panel-accordion] {
	margin-block-start: var(--space-2);
}
/* The OPEN (active) accordion group gets a distinct surface so it stands out. */
[data-palabras-panel-accordion] [data-accordion-item][data-state='open'] {
	background: var(--color-surface-muted);
	border-radius: var(--radius-sm);
}

/* Fields */
[data-palabras-field] {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
}
[data-palabras-field] + [data-palabras-field] {
	margin-block-start: var(--space-3);
}
/* Inline fields (toggle · anchor · colour · number): a 2-column grid so the
   label is one column and the control the other — every control's right edge
   lines up across rows. */
[data-palabras-field][data-inline] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
}
/* The control column right-aligns its content (colour swatch / number field). */
[data-palabras-field][data-inline] > :not([data-palabras-field-label]) {
	justify-self: end;
}
[data-palabras-field-label] {
	font-size: var(--font-size-xs);
	color: var(--color-content-primary);
}
[data-palabras-field-todo] {
	font-size: var(--font-size-xs);
	font-style: italic;
	color: var(--color-content-muted);
}
/* Anchor "chip" — monospace slug, compact, right-aligned. */
[data-palabras-text] {
	inline-size: 7rem;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-neutral-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-default);
	color: var(--color-content-primary);
	font: inherit;
	font-size: var(--font-size-xs);
	font-family: var(--font-mono);
	text-align: end;
}
[data-palabras-text]:focus-visible {
	outline: none;
	border-color: var(--color-focus-ring);
}
/* Wide variant (URL / path) — full-width, left-aligned, normal font. */
[data-palabras-text][data-wide] {
	inline-size: 100%;
	font-family: inherit;
	text-align: start;
}
/* Rejected value (bad URL / bad CSS length) — red ring, value not committed. */
[data-palabras-text][data-invalid] {
	border-color: var(--color-threat-border, var(--color-danger-border, crimson));
}
/* CSS-length field (Ancho / Alto) — the framework <CssField> (its own border /
   bg / invalid ring / xs size) with −/+ steppers, kept compact in the inline row. */
[data-palabras-field][data-inline] [data-css-field] {
	inline-size: 9rem;
}
/* Number field (width / height) — compact input + unit suffix, right-aligned. */
[data-palabras-number] {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
[data-palabras-number-input] {
	inline-size: 4rem;
	min-inline-size: 0;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-neutral-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-default);
	color: var(--color-content-primary);
	font: inherit;
	font-size: var(--font-size-xs);
	text-align: end;
}
[data-palabras-number-input]:focus-visible {
	outline: none;
	border-color: var(--color-focus-ring);
}
[data-palabras-number-unit] {
	font-size: var(--font-size-xs);
	color: var(--color-content-muted);
}
/* A gated field (width / height / align under "Ancho completo") dims + locks. */
[data-palabras-field][data-disabled] {
	opacity: 0.45;
	pointer-events: none;
}

/* Footer: themed-appearance line */
/* Footer — pinned band at the card bottom (full width, muted surface, rounded
   bottom corners). A flex child of the card, so it always spans edge-to-edge
   regardless of the body's scrollbar. */
[data-palabras-panel-foot] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2-5) var(--space-4);
	border-block-start: 1px solid var(--color-neutral-border);
	border-end-start-radius: var(--radius-lg);
	border-end-end-radius: var(--radius-lg);
	background: var(--color-surface-muted);
	font-size: var(--font-size-xs);
	color: var(--color-content-muted);
}
[data-palabras-panel-edit] {
	border: none;
	background: none;
	color: var(--color-primary-text);
	font: inherit;
	font-size: var(--font-size-sm);
	cursor: pointer;
}
[data-palabras-panel-edit][disabled] {
	opacity: 0.6;
	cursor: default;
}
[data-palabras-panel-empty] {
	margin: 0;
	padding: var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-content-muted);
}

/* ── Appearance popover (2nd window, opened by "Editar") ───────────────────── */
/* Also a framework `<Popover.Content>` (positioning + surface from the recipe);
   we only force the UI sans across it + its descendants (the popover's content
   archetype would otherwise leak the reading serif into the field labels). */
[data-palabras-appearance][data-palabras-appearance],
[data-palabras-appearance][data-palabras-appearance] * {
	font-family: var(--font-ui);
}
/* NumberField in the appearance popover — compact, fixed width so the grid's
   control column stays tidy. */
[data-palabras-appearance] [data-number-field] {
	inline-size: 6rem;
}

/* ── Help line ────────────────────────────────────────────────────────────── */
[data-palabras-help] {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-content-muted);
}
[data-palabras-help] kbd {
	font: inherit;
	padding-inline: var(--space-1);
	border: 1px solid var(--color-neutral-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
}

/* Mobile: the panels stay framework `<Popover>`s — the popover recipe already
   keeps them within `calc(100vw - …)` and floating-ui shifts them on screen, so
   no bespoke bottom-drawer layer is needed. */