/* ==========================================================================
   Rich Text Editor — Simple WYSIWYG for text memories
   ========================================================================== */

.rich-text-editor {
	border: var(--sc-border-width) solid var(--sc-border);
	border-radius: var(--sc-radius-md);
	background: var(--sc-surface);
	overflow: hidden;
	transition: border-color var(--sc-transition-normal) var(--sc-ease-default);
}

.rich-text-editor:focus-within {
	border-color: var(--sc-accent);
	box-shadow: var(--sc-focus-ring);
}

.rich-text-editor-readonly {
	border: none;
	background: transparent;
	box-shadow: none;
}

.rich-text-editor-readonly:focus-within {
	border-color: transparent;
	box-shadow: none;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.rich-text-toolbar {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	padding: var(--sc-space-xs) var(--sc-space-sm);
	border-bottom: var(--sc-border-width) solid var(--sc-border-subtle);
	background: var(--sc-bg);
}

.rich-text-toolbar-btn {
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sc-text-secondary);
	font-size: var(--sc-text-sm);
	transition: background var(--sc-transition-fast) var(--sc-ease-default),
		color var(--sc-transition-fast) var(--sc-ease-default);
}

.rich-text-toolbar-btn:hover {
	background: var(--sc-accent-subtle);
	color: var(--sc-text-primary);
}

.rich-text-toolbar-btn.active {
	background: var(--sc-accent-subtle);
	color: var(--sc-accent);
}

.rich-text-toolbar-btn:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
}

.rich-text-toolbar-sep {
	width: var(--sc-border-width);
	height: 1.25rem;
	background: var(--sc-border-subtle);
	margin: 0 var(--sc-space-xs);
}

/* ── Editor Content ──────────────────────────────────────────────────── */

.rich-text-editor-container {
	min-height: 8rem;
}

.rich-text-editor-content {
	padding: var(--sc-space-md);
	font-family: var(--sc-font-body);
	font-size: var(--sc-text-base);
	line-height: var(--sc-leading-normal);
	color: var(--sc-text-primary);
	outline: none;
	min-height: 8rem;
}

.rich-text-editor-content p {
	margin: 0 0 var(--sc-space-sm);
}

.rich-text-editor-content p:last-child {
	margin-bottom: 0;
}

.rich-text-editor-content ul,
.rich-text-editor-content ol {
	padding-left: var(--sc-space-lg);
	margin: 0 0 var(--sc-space-sm);
}

.rich-text-editor-content ul {
	list-style-type: disc;
}

.rich-text-editor-content ol {
	list-style-type: decimal;
}

.rich-text-editor-content li {
	margin-bottom: var(--sc-space-xs);
}

.rich-text-editor-content h2 {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-lg);
	font-weight: var(--sc-weight-semibold);
	margin: var(--sc-space-md) 0 var(--sc-space-sm);
}

.rich-text-editor-content h3 {
	font-size: var(--sc-text-base);
	font-weight: var(--sc-weight-semibold);
	margin: var(--sc-space-sm) 0 var(--sc-space-xs);
}

/* Placeholder */
.rich-text-editor-content p.is-editor-empty:first-child::before {
	content: attr(data-placeholder);
	float: left;
	color: var(--sc-text-tertiary);
	pointer-events: none;
	height: 0;
}

/* Read-only mode */
.rich-text-editor-readonly .rich-text-editor-content {
	padding: 0;
	min-height: auto;
}