/* Lexxy editor overrides to match taupe theme */

:root {
  --lexxy-font-family: "Inter", system-ui, sans-serif;
  --lexxy-font-size: 1rem; /* 16px - prevents iOS auto-zoom on focus */
  --lexxy-line-height: 1.75;
  --lexxy-text-color: oklch(15% 0.006 70);
  --lexxy-placeholder-color: oklch(58% 0.030 70);
  --lexxy-border-color: oklch(15% 0.006 70 / 0.2);
  --lexxy-border-color-focus: oklch(15% 0.006 70);
  --lexxy-toolbar-bg: oklch(97.5% 0.004 70);
  --lexxy-toolbar-border-color: oklch(15% 0.006 70 / 0.1);
  --lexxy-bg: white;
  --lexxy-border-radius: 0.5rem;
}

/* Editor container */
.lexxy-editor-container {
  border-radius: 0.5rem !important;
  border-color: oklch(15% 0.006 70 / 0.2) !important;
  overflow: hidden;
}

.lexxy-editor-container:focus-within {
  border-color: oklch(15% 0.006 70) !important;
}

/* Toolbar */
.lexxy-toolbar {
  background-color: oklch(97.5% 0.004 70) !important;
  border-bottom-color: oklch(15% 0.006 70 / 0.1) !important;
}

.lexxy-toolbar button {
  border-radius: 0.25rem !important;
}

.lexxy-toolbar button:hover {
  background-color: oklch(15% 0.006 70 / 0.05) !important;
}

.lexxy-toolbar button.active,
.lexxy-toolbar button[aria-pressed="true"] {
  background-color: oklch(15% 0.006 70 / 0.1) !important;
}

/* Editor area */
.lexxy-editor {
  font-family: "Inter", system-ui, sans-serif !important;
  color: oklch(15% 0.006 70) !important;
  min-height: 16rem;
  padding: 1rem !important;
}

.lexxy-editor [data-lexical-placeholder] {
  color: oklch(58% 0.030 70) !important;
}

/* ===== Fix Tailwind reset stripping list styles ===== */

/* Unordered lists inside editor and rendered content */
.lexxy-editor ul,
.lexxy-content ul {
  list-style-type: disc;
  padding-inline-start: 1.5em;
  margin-block: 0.25em 0;
}

.lexxy-editor ul ul,
.lexxy-content ul ul {
  list-style-type: circle;
}

.lexxy-editor ul ul ul,
.lexxy-content ul ul ul {
  list-style-type: square;
}

/* Ordered lists */
.lexxy-editor ol,
.lexxy-content ol {
  list-style-type: decimal;
  padding-inline-start: 1.5em;
  margin-block: 0.25em 0;
}

.lexxy-editor ol ol,
.lexxy-content ol ol {
  list-style-type: lower-alpha;
}

.lexxy-editor ol ol ol,
.lexxy-content ol ol ol {
  list-style-type: lower-roman;
}

/* Nested list items (Lexxy's own nesting mechanism) */
.lexxy-editor li.lexxy-nested-listitem,
.lexxy-content li.lexxy-nested-listitem {
  list-style-type: none;
}

/* Ensure list items have proper spacing */
.lexxy-editor li,
.lexxy-content li {
  margin-block: 0.125em;
}

/* ===== Blockquotes ===== */
.lexxy-editor blockquote,
.lexxy-content blockquote {
  border-left: 3px solid oklch(15% 0.006 70 / 0.2);
  padding-left: 1em;
  color: oklch(40% 0.020 70);
  font-style: italic;
}

/* ===== Code blocks ===== */
.lexxy-editor code,
.lexxy-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  background-color: oklch(15% 0.006 70 / 0.05);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
}

.lexxy-editor pre code,
.lexxy-content pre code {
  display: block;
  padding: 0.75em 1em;
  overflow-x: auto;
  background-color: oklch(15% 0.006 70 / 0.05);
  border-radius: 0.375rem;
}

/* ===== Headings inside editor ===== */
.lexxy-editor h1,
.lexxy-content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-block: 0.5em 0.25em;
}

.lexxy-editor h2,
.lexxy-content h2 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.35;
  margin-block: 0.5em 0.25em;
}

.lexxy-editor h3,
.lexxy-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block: 0.5em 0.25em;
}

/* ===== Links ===== */
.lexxy-editor a,
.lexxy-content a {
  color: oklch(40% 0.020 70);
  text-decoration: underline;
  text-decoration-color: oklch(70% 0.025 70);
  text-underline-offset: 2px;
}

.lexxy-editor a:hover,
.lexxy-content a:hover {
  color: oklch(15% 0.006 70);
  text-decoration-color: oklch(15% 0.006 70);
}

/* ===== Tables ===== */
.lexxy-editor table,
.lexxy-content table {
  border-collapse: collapse;
  width: 100%;
  margin-block: 0.5em;
}

.lexxy-editor th,
.lexxy-editor td,
.lexxy-content th,
.lexxy-content td {
  border: 1px solid oklch(15% 0.006 70 / 0.15);
  padding: 0.5em 0.75em;
  text-align: left;
}

.lexxy-editor th,
.lexxy-content th {
  background-color: oklch(15% 0.006 70 / 0.03);
  font-weight: 600;
}

/* ===== Horizontal rule ===== */
.lexxy-editor hr,
.lexxy-content hr {
  border: none;
  border-top: 1px solid oklch(15% 0.006 70 / 0.15);
  margin-block: 1em;
}

/* ===== Attachments ===== */
.lexxy-editor .attachment {
  margin-block: 0.5em;
}

.lexxy-editor .attachment img {
  max-width: 100%;
  border-radius: 0.375rem;
}

/* Rendered content */
.lexxy-content {
  font-family: "Inter", system-ui, sans-serif;
  color: oklch(15% 0.006 70);
  line-height: 1.75;
}

/* ===== Dark mode overrides ===== */
.dark {
  --lexxy-text-color: oklch(95% 0.008 70);
  --lexxy-placeholder-color: oklch(48% 0.025 70);
  --lexxy-border-color: oklch(95% 0.008 70 / 0.2);
  --lexxy-border-color-focus: oklch(95% 0.008 70);
  --lexxy-toolbar-bg: oklch(22% 0.010 70);
  --lexxy-toolbar-border-color: oklch(95% 0.008 70 / 0.1);
  --lexxy-bg: oklch(18% 0.008 70);
}

.dark .lexxy-editor-container {
  border-color: oklch(95% 0.008 70 / 0.2) !important;
}

.dark .lexxy-editor-container:focus-within {
  border-color: oklch(95% 0.008 70) !important;
}

.dark .lexxy-toolbar {
  background-color: oklch(22% 0.010 70) !important;
  border-bottom-color: oklch(95% 0.008 70 / 0.1) !important;
}

.dark .lexxy-toolbar button:hover {
  background-color: oklch(95% 0.008 70 / 0.1) !important;
}

.dark .lexxy-toolbar button.active,
.dark .lexxy-toolbar button[aria-pressed="true"] {
  background-color: oklch(95% 0.008 70 / 0.15) !important;
}

.dark .lexxy-editor {
  color: oklch(95% 0.008 70) !important;
  background-color: oklch(18% 0.008 70) !important;
}

.dark .lexxy-editor [data-lexical-placeholder] {
  color: oklch(48% 0.025 70) !important;
}

.dark .lexxy-editor blockquote,
.dark .lexxy-content blockquote {
  border-left-color: oklch(95% 0.008 70 / 0.2);
  color: oklch(70% 0.025 70);
}

.dark .lexxy-editor code,
.dark .lexxy-content code {
  background-color: oklch(95% 0.008 70 / 0.1);
}

.dark .lexxy-editor pre code,
.dark .lexxy-content pre code {
  background-color: oklch(95% 0.008 70 / 0.1);
}

.dark .lexxy-editor th,
.dark .lexxy-content th {
  background-color: oklch(95% 0.008 70 / 0.05);
}

.dark .lexxy-editor th,
.dark .lexxy-editor td,
.dark .lexxy-content th,
.dark .lexxy-content td {
  border-color: oklch(95% 0.008 70 / 0.15);
}

.dark .lexxy-editor hr,
.dark .lexxy-content hr {
  border-top-color: oklch(95% 0.008 70 / 0.15);
}

.dark .lexxy-editor a,
.dark .lexxy-content a {
  color: oklch(70% 0.025 70);
  text-decoration-color: oklch(48% 0.025 70);
}

.dark .lexxy-editor a:hover,
.dark .lexxy-content a:hover {
  color: oklch(95% 0.008 70);
  text-decoration-color: oklch(95% 0.008 70);
}

.dark .lexxy-content {
  color: oklch(95% 0.008 70);
}