/* Lexxy, the blog's editor (dashboard/blogs/_form, docs/prd.admin-blogging.md
   decision 11), in the app's own light-dark tokens. Scoped to the editor so
   nothing else on the site changes; its own stylesheet loads on that form only. */
lexxy-editor.blog-prose {
  --lexxy-color-canvas: var(--surface-elevated);
  --lexxy-color-text: var(--page-text);
  --lexxy-color-text-subtle: var(--text-muted);
  --lexxy-color-ink: var(--page-text);
  --lexxy-color-ink-medium: var(--text-muted);
  --lexxy-color-ink-light: var(--text-muted);
  --lexxy-color-ink-lighter: var(--border);
  --lexxy-color-ink-lightest: var(--surface);
  --lexxy-color-ink-inverted: var(--surface-elevated);
  --lexxy-color-link: var(--admin-inline-link);
  --lexxy-color-accent-dark: var(--pill-blue-text);
  --lexxy-color-accent-light: var(--pill-blue-bg);
  --lexxy-color-accent-lightest: var(--pill-blue-bg);
  --lexxy-color-selected: var(--pill-blue-bg);
  --lexxy-color-selected-hover: var(--pill-blue-bg);
  --lexxy-color-code-bg: var(--surface);
  --lexxy-color-table-header-bg: var(--surface);
  --lexxy-color-table-cell-border: var(--border);
  --lexxy-font-base: inherit;
  --lexxy-shadow: var(--card-shadow);

  display: block;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-elevated);
  box-shadow: var(--dashboard-filter-shadow);

  &:focus-within {
    border-color: var(--pill-blue-text);
    box-shadow: 0 0 0 3px var(--input-ring-default);
  }

  /* The toolbar is a <lexxy-toolbar> element (it has no class), kept in view
     while a long post scrolls. Below md the app's own top bar is sticky
     (shared/_app_sidebar), so it sits under that bar. */
  & lexxy-toolbar {
    position: sticky;
    top: 3.5rem;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    border-radius: 0.75rem 0.75rem 0 0;
    background: var(--surface-elevated);

    @media (min-width: 768px) {
      top: 0;
    }
  }

  & .lexxy-editor__content {
    min-height: 24rem;
    padding: 1.25rem 1rem 2rem;
    outline: none;

    @media (min-width: 640px) {
      padding: 2rem 2.5rem 3rem;
    }
  }

  /* Coloured text needs a style attribute, which posts do not keep
     (config/initializers/action_text.rb), and underline reads as a link. */
  & .lexxy-editor__toolbar-dropdown--highlight,
  & button[name="underline"] {
    display: none;
  }
}