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;
}
/* 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;
	/* Grip sits flush with the rail's left edge (no left padding). */
	inset-inline-start: 0;
	transform: translateY(-50%);
	z-index: 5;
	transition: top var(--duration-fast, 0.12s) var(--ease-default, ease);
}
/* Block grip — the framework <Button> (variant="ghost" size="xs" iconOnly),
   copied from Words' gutter grip. The Button recipe owns ALL chrome (padding,
   radius, colour, hover, focus ring, press transform) — we add ONLY the drag
   affordance cursor, since this Button is primarily a drag handle. Scoped under
   [data-palabras-doc] (0,2,0) so it beats the Button recipe's `pointer` cursor
   (0,1,0). */
[data-palabras-doc] [data-palabras-handle] {
	cursor: grab;
}
[data-palabras-doc] [data-palabras-handle]:active {
	cursor: grabbing;
}
[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);
}

/* ── Floating inspector panel ─────────────────────────────────────────────── */
[data-palabras-panel-card] {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-end: var(--space-4);
	inline-size: 17rem;
	z-index: 10;
	padding: var(--space-4);
	border: 1px solid var(--color-neutral-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-overlay);
	/* Elevation = it reads as a floating window, not a docked sidebar. */
	box-shadow: var(--shadow-lg, 0 16px 40px -12px rgb(0 0 0 / 0.6));
	font-family: var(--font-ui);
}

/* Header: dot · title (grows) · trash */
[data-palabras-panel-head] {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-2);
	/* The header is the drag handle (PalabrasPanel). */
	cursor: move;
	user-select: none;
	touch-action: none;
}
[data-palabras-panel-dot] {
	flex: 0 0 auto;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
}
[data-palabras-panel-title] {
	flex: 1 1 auto;
	font-size: var(--font-size-md);
	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);
}

/* 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-sm);
	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);
}

/* Footer: themed-appearance line */
[data-palabras-panel-foot] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--color-neutral-border);
	font-size: var(--font-size-sm);
	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;
	font-size: var(--font-size-sm);
	color: var(--color-content-muted);
}

/* ── Appearance popover (2nd window, opened by "Editar") ───────────────────── */
[data-palabras-appearance] {
	position: absolute;
	inset-block-start: var(--space-4);
	/* Sits just left of the main panel (17rem wide). */
	inset-inline-end: calc(17rem + var(--space-3));
	inline-size: 16rem;
	z-index: 11;
	padding: var(--space-4);
	border: 1px solid var(--color-neutral-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-overlay);
	box-shadow: var(--shadow-lg, 0 16px 40px -12px rgb(0 0 0 / 0.6));
	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 floating panels become bottom drawers ────────────────────── */
@media (max-width: 40rem) {
	/* The rail + grip stay identical to desktop (option A). Only the floating
	   panels change to bottom drawers below. */
	[data-palabras-panel-card],
	[data-palabras-appearance] {
		position: fixed;
		inset: auto 0 0 0;
		inline-size: auto;
		max-block-size: 70vh;
		overflow-y: auto;
		border-inline: none;
		border-block-end: none;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		/* Anchored bottom drawer — ignore any drag offset from the desktop float. */
		transform: none !important;
	}
	/* Appearance drawer sits above the main one. */
	[data-palabras-appearance] {
		z-index: 12;
	}
}