:root {
  --lexxy-popup-background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lexxy-color-ink: #f8fafc;
    --lexxy-color-ink-medium: #cbd5e1;
    --lexxy-color-ink-light: #94a3b8;
    --lexxy-color-ink-lighter: #475569;
    --lexxy-color-ink-lightest: #334155;
    --lexxy-color-ink-inverted: #0f172a;

    --lexxy-popup-background: #1e293b;
    --lexxy-color-text: #f8fafc;
    --lexxy-color-text-subtle: #cbd5e1;
    --lexxy-color-code-bg: #1e293b;

    --lexxy-color-accent-lightest: #334155;
    --lexxy-color-accent-light: #475569;
    --lexxy-color-selected: #334155;
    --lexxy-color-selected-hover: #475569;
    --lexxy-color-selected-dark: #60a5fa;

    --lexxy-color-table-header-bg: #334155;
    --lexxy-color-table-cell-border: #475569;
    --lexxy-color-table-cell-selected-bg: #334155;
    --lexxy-color-code-token-att: #fca5a5;
    --lexxy-color-code-token-comment: #94a3b8;
    --lexxy-color-code-token-function: #c4b5fd;
    --lexxy-color-code-token-operator: #fca5a5;
    --lexxy-color-code-token-property: #93c5fd;
    --lexxy-color-code-token-punctuation: #e2e8f0;
    --lexxy-color-code-token-selector: #86efac;
    --lexxy-color-code-token-variable: #fdba74;
  }
}

.dark {
  --lexxy-color-ink: #f8fafc;
  --lexxy-color-ink-medium: #cbd5e1;
  --lexxy-color-ink-light: #94a3b8;
  --lexxy-color-ink-lighter: #475569;
  --lexxy-color-ink-lightest: #334155;
  --lexxy-color-ink-inverted: #0f172a;

  --lexxy-popup-background: #1e293b;
  --lexxy-color-text: #f8fafc;
  --lexxy-color-text-subtle: #cbd5e1;
  --lexxy-color-code-bg: #1e293b;

  --lexxy-color-accent-lightest: #334155;
  --lexxy-color-accent-light: #475569;
  --lexxy-color-selected: #334155;
  --lexxy-color-selected-hover: #475569;
  --lexxy-color-selected-dark: #60a5fa;

  --lexxy-color-table-header-bg: #334155;
  --lexxy-color-table-cell-border: #475569;
  --lexxy-color-table-cell-selected-bg: #334155;
  --lexxy-color-code-token-att: #fca5a5;
  --lexxy-color-code-token-comment: #94a3b8;
  --lexxy-color-code-token-function: #c4b5fd;
  --lexxy-color-code-token-operator: #fca5a5;
  --lexxy-color-code-token-property: #93c5fd;
  --lexxy-color-code-token-punctuation: #e2e8f0;
  --lexxy-color-code-token-selector: #86efac;
  --lexxy-color-code-token-variable: #fdba74;
}

/* Editor toolbar — fixed rem sizes so prose-xl line-height doesn't inflate buttons. */
lexxy-editor {
  --lexxy-color-canvas: transparent;
  --lexxy-toolbar-button-size: 2rem;
  --lexxy-toolbar-icon-size: 1.125rem;

  border: none;
  border-radius: 0;
  background-color: transparent;
}

lexxy-editor [data-dropdown-panel],
lexxy-editor .lexxy-prompt-menu {
  background-color: var(--lexxy-popup-background);
}

lexxy-editor .lexxy-editor__toolbar-dropdown-list button {
  background-color: transparent;
  border-radius: var(--lexxy-radius);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--link input[type="url"],
lexxy-editor lexxy-code-language-picker select {
  background-color: var(--lexxy-popup-background);
}

/* Lexxy 0.9 exports semantic tags; class-based rules live in gem CSS. */
.lexxy-content s,
.lexxy-content del,
.lexxy-content .lexxy-content__strikethrough {
  text-decoration: line-through;
}

.lexxy-content u,
.lexxy-content .lexxy-content__underline {
  text-decoration: underline;
}

.lexxy-content s u,
.lexxy-content u s,
.lexxy-content del u,
.lexxy-content u del,
.lexxy-content .lexxy-content__strikethrough.lexxy-content__underline {
  text-decoration: line-through underline;
}

/* Near-white mark backgrounds become solid white blobs in dark mode.
   Remap them to Lexxy's default yellow wash; leave real colored highlights alone. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .lexxy-content mark[style*="rgb(255, 255, 255)"],
  :root:not(.light) .lexxy-content mark[style*="rgb(255,255,255)"],
  :root:not(.light) .lexxy-content mark[style*="#fff"],
  :root:not(.light) .prose mark[style*="rgb(255, 255, 255)"],
  :root:not(.light) .prose mark[style*="rgb(255,255,255)"],
  :root:not(.light) .prose mark[style*="#fff"] {
    background-color: rgba(229, 223, 6, 0.3) !important;
  }
}

.dark .lexxy-content mark[style*="rgb(255, 255, 255)"],
.dark .lexxy-content mark[style*="rgb(255,255,255)"],
.dark .lexxy-content mark[style*="#fff"],
.dark .prose mark[style*="rgb(255, 255, 255)"],
.dark .prose mark[style*="rgb(255,255,255)"],
.dark .prose mark[style*="#fff"] {
  background-color: rgba(229, 223, 6, 0.3) !important;
}

/* Quiet craft toolbar — light surface, mild presence, no heavy fills */
lexxy-editor lexxy-toolbar {
  position: sticky;
  top: 0.25rem;
  font-size: 1rem;
  inline-size: max-content;
  max-inline-size: 100%;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  margin-block: 0 1rem;
  border-block-end: none;
  background-color: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  z-index: 10;
  overflow: visible;
}

.dark lexxy-editor lexxy-toolbar {
  background-color: rgb(30 41 59 / 0.75);
  border-color: rgb(51 65 85 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor lexxy-toolbar {
    background-color: rgb(30 41 59 / 0.75);
    border-color: rgb(51 65 85 / 0.7);
  }
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
  aspect-ratio: 1;
  block-size: var(--lexxy-toolbar-button-size);
  inline-size: var(--lexxy-toolbar-button-size);
  min-inline-size: var(--lexxy-toolbar-button-size);
  max-inline-size: var(--lexxy-toolbar-button-size);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  flex: none;
  background-color: transparent;
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button:hover,
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button:hover,
lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button:hover {
  background-color: rgb(241 245 249 / 0.9);
}

.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
.dark lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
  background-color: transparent;
}

.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button:hover,
.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button:hover,
.dark lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button:hover {
  background-color: rgb(51 65 85 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
  :root:not(.light) lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
    background-color: transparent;
  }

  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button:hover,
  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button:hover,
  :root:not(.light) lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button:hover {
    background-color: rgb(51 65 85 / 0.7);
  }
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button[aria-pressed="true"],
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-color-selected);
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button--chevron,
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button--chevron {
  aspect-ratio: unset;
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: calc(var(--lexxy-toolbar-button-size) + 0.75rem);
  padding-inline: 0.5rem;
}

lexxy-editor [data-dropdown-panel]:not(.lexxy-editor__toolbar-overflow-menu) .lexxy-editor__toolbar-button {
  aspect-ratio: unset;
  block-size: auto;
  min-block-size: var(--lexxy-toolbar-button-size);
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
  padding-inline: 2ch;
  border-radius: var(--lexxy-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 1;
  background-color: var(--lexxy-color-ink-lightest);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="link"] {
  background-color: var(--lexxy-color-accent-dark);
  color: var(--lexxy-color-ink-inverted);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--highlight [data-dropdown-panel] .lexxy-editor__toolbar-dropdown-reset {
  flex: none;
  inline-size: 100%;
  white-space: nowrap;
}

lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-dropdown {
  flex: none;
}

lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu {
  background-color: var(--lexxy-popup-background);
  backdrop-filter: blur(16px);
  border-radius: 0.5rem;
  padding: 0.5rem;
  z-index: 10;
}

/* Shortcode slash-menu cards — match former publish-rail shortcode cards */
lexxy-editor .lexxy-prompt-menu {
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  max-block-size: 24rem;
  min-inline-size: 18rem;
  padding: 0.75rem;
  overflow-y: auto;
}

.dark lexxy-editor .lexxy-prompt-menu {
  border-color: rgb(51 65 85 / 0.6);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor .lexxy-prompt-menu {
    border-color: rgb(51 65 85 / 0.6);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  }
}

lexxy-editor .lexxy-prompt-menu__item {
  align-items: stretch;
  background-color: rgb(255 255 255 / 0.9);
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: 0.5rem;
  color: #0f172a;
  flex-direction: column;
  margin-top: 0.375rem;
  padding: 0.75rem;
  white-space: normal;
}

lexxy-editor .lexxy-prompt-menu__item:first-child {
  margin-top: 0;
}

lexxy-editor .lexxy-prompt-menu__item:hover,
lexxy-editor .lexxy-prompt-menu__item[aria-selected="true"] {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.dark lexxy-editor .lexxy-prompt-menu__item {
  background-color: rgb(30 41 59 / 0.5);
  border-color: rgb(51 65 85 / 0.6);
  color: #f8fafc;
}

.dark lexxy-editor .lexxy-prompt-menu__item:hover,
.dark lexxy-editor .lexxy-prompt-menu__item[aria-selected="true"] {
  background-color: #1e293b;
  border-color: #475569;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor .lexxy-prompt-menu__item {
    background-color: rgb(30 41 59 / 0.5);
    border-color: rgb(51 65 85 / 0.6);
    color: #f8fafc;
  }

  :root:not(.light) lexxy-editor .lexxy-prompt-menu__item:hover,
  :root:not(.light) lexxy-editor .lexxy-prompt-menu__item[aria-selected="true"] {
    background-color: #1e293b;
    border-color: #475569;
  }
}

.shortcode-prompt-item__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.shortcode-prompt-item__name {
  font-weight: 500;
  color: inherit;
}

.shortcode-prompt-item__tag {
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: #f1f5f9;
  color: #475569;
  font-family: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
}

.dark .shortcode-prompt-item__tag {
  background-color: #334155;
  color: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .shortcode-prompt-item__tag {
    background-color: #334155;
    color: #cbd5e1;
  }
}

.shortcode-prompt-item__desc {
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
  color: #64748b;
}

.dark .shortcode-prompt-item__desc {
  color: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .shortcode-prompt-item__desc {
    color: #94a3b8;
  }
}

.shortcode-prompt-item__example {
  display: block;
  max-width: 100%;
  font-size: 0.75rem;
  margin: 0.375rem 0 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #f8fafc;
  color: #475569;
  font-family: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  overflow-x: auto;
  white-space: nowrap;
}

.dark .shortcode-prompt-item__example {
  background-color: rgb(15 23 42 / 0.5);
  color: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .shortcode-prompt-item__example {
    background-color: rgb(15 23 42 / 0.5);
    color: #cbd5e1;
  }
}