/* -- Editor.js integration ------------------------------------------------ */
/* The holder Editor.js mounts into, in the theme's tokens: a shimmer until */
/* the editor is ready, the tools' own classes (ce-*, cdx-*) themed, a      */
/* readonly look, the inline marks a comment column adds.                   */
@layer components {
  .editorjs {
    --editorjs-measure: 44rem;
    --editorjs-min-height: 12rem;

    position: relative;
    display: block;
    min-block-size: var(--editorjs-min-height);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;

    & > script { display: none; }
    & > .editorjs-holder { max-inline-size: var(--editorjs-measure); margin-inline: auto; }

    /* until the editor mounted: a quiet shimmer where the document will be */
    &:not([data-ready]) > .editorjs-holder,
    &:not([data-ready]):not(:has(> .editorjs-holder))::before {
      content: "";
      display: block;
      min-block-size: var(--editorjs-min-height);
      border-radius: var(--radius-lg);
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 6%, transparent), transparent);
      background-size: 200% 100%;
    }
    &[data-error]::after {
      content: "The editor could not be loaded.";
      display: block;
      color: var(--destructive);
      font-size: 0.875rem;
    }

    /* Editor.js's own structure, in tokens: the block, its content, the tools */
    & .codex-editor__redactor { padding-block-end: 2rem !important; }
    & .ce-block__content, & .ce-toolbar__content { max-inline-size: none; margin: 0; }
    & .ce-paragraph { line-height: inherit; }
    & .ce-header { margin-block: 1.25em 0.4em; font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
    & h1.ce-header { font-size: 2rem; }
    & h2.ce-header { font-size: 1.5rem; }
    & h3.ce-header { font-size: 1.25rem; }
    & h4.ce-header { font-size: 1.0625rem; }
    & .cdx-block { padding-block: 0.3em; }
    & .cdx-quote { padding-inline-start: 1rem; border-inline-start: 3px solid var(--primary); color: var(--muted-foreground); font-style: italic; }
    & .cdx-quote__text, & .cdx-quote__caption { border: 0; box-shadow: none; background: none; padding: 0; min-block-size: 0; }
    & .cdx-quote__caption { font-size: 0.875rem; font-style: normal; }
    & .ce-code__textarea { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); font-family: var(--font-mono); font-size: 0.875rem; }
    & .ce-delimiter::before { color: var(--muted-foreground); }
    & .cdx-list { padding-inline-start: 0; }
    & .cdx-list__item { padding-block: 0.2em; }
    & .cdx-marker, & mark.cdx-marker { padding: 0.05em 0.1em; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--chart-4) 45%, transparent); color: inherit; }
    & code.inline-code { padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--muted); color: var(--foreground); font-family: var(--font-mono); font-size: 0.875em; }
    & .tc-table, & .tc-wrap { --color-border: var(--border); --color-background: var(--card); }
    & .tc-table .tc-cell { border-color: var(--border); }
    & .tc-row--heading .tc-cell { font-weight: 600; background: var(--muted); }

    /* Editor.js paints its popovers, toolbars and the table's popover from its own custom
       properties, declared on those elements - redeclare them from the theme tokens (two
       classes beat its one), so dark mode and every preset reach them.
       VERIFIED: (editorjs.e2e "dark mode") no light surface or light-on-light text inside
       the editor with the + popover open on a .dark page. */
    & .ce-popover, & .ce-toolbar, & .ce-inline-toolbar, & .ce-conversion-toolbar, & .ce-settings, & .tc-popover, & .tc-toolbox, & .tc-wrap {
      --color-background: var(--popover) !important;
      --color-background-hover: var(--accent) !important;
      --color-background-item-hover: var(--accent) !important;
      --color-background-item-focus: var(--accent) !important;
      --color-background-icon-active: var(--accent) !important;
      --color-background-item-confirm: var(--destructive) !important;
      --color-background-item-confirm-hover: color-mix(in oklab, var(--destructive) 85%, var(--foreground)) !important;
      --color-background-confirm: var(--destructive) !important;
      --color-background-confirm-hover: color-mix(in oklab, var(--destructive) 85%, var(--foreground)) !important;
      --color-text-primary: var(--popover-foreground) !important;
      --color-text-secondary: var(--muted-foreground) !important;
      --color-text-icon-active: var(--accent-foreground) !important;
      --color-text-confirm: var(--destructive-foreground) !important;
      --color-border: var(--border) !important;
      --color-border-icon: var(--border) !important;
      --color-shadow: color-mix(in oklab, var(--foreground) 12%, transparent) !important;
      --color-shadow-item-focus: color-mix(in oklab, var(--ring) 35%, transparent) !important;
      --color-dark: var(--foreground) !important;
      --color-active-icon: var(--primary) !important;
      color-scheme: inherit;
    }
    & .ce-popover__container, & .ce-popover__search, & .cdx-search-field { background: var(--popover) !important; color: var(--popover-foreground) !important; border-color: var(--border) !important; }
    & .cdx-search-field__input { color: var(--popover-foreground) !important; }
    & .cdx-search-field__input::placeholder { color: var(--muted-foreground) !important; }
    & .ce-popover-item__icon, & .ce-popover-item__icon svg, & .tc-toolbox__toggler svg { background: transparent !important; color: var(--popover-foreground) !important; }
    & .cdx-list__checkbox-check { --checkbox-background: var(--card) !important; --color-border: var(--border) !important; --color-bg-checked: var(--primary) !important; }
    & .cdx-list__checkbox--checked .cdx-list__checkbox-check svg { stroke: var(--primary-foreground) !important; }
    & .tc-add-column, & .tc-add-row { background: var(--card) !important; color: var(--muted-foreground) !important; }
    & .tc-add-column:hover, & .tc-add-row:hover { background: var(--accent) !important; color: var(--accent-foreground) !important; }
    & .tc-table { --color-background: var(--card) !important; }

    /* the toolbars Editor.js shows: the + and the settings handle, the inline toolbar */
    & .ce-toolbar__plus, & .ce-toolbar__settings-btn { color: var(--muted-foreground) !important; background: var(--card) !important; border: 1px solid var(--border); border-radius: var(--radius-md); }
    & .ce-toolbar__plus:hover, & .ce-toolbar__settings-btn:hover { background: var(--accent) !important; color: var(--accent-foreground) !important; }
    & .ce-popover__container, & .ce-inline-toolbar, & .ce-conversion-toolbar { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
    & .ce-popover-item:hover, & .ce-inline-tool:hover, & .ce-conversion-tool:hover { background: var(--accent); color: var(--accent-foreground); }
    & .ce-popover-item--active, & .ce-inline-tool--active { background: var(--accent); color: var(--accent-foreground); }
    & .ce-popover-item__icon, & .ce-conversion-tool__icon { background: var(--muted); border: 0; box-shadow: none; }
    & .cdx-search-field { background: var(--muted); border-color: var(--border); color: var(--foreground); }
    & .ce-block--selected .ce-block__content { background: color-mix(in oklab, var(--primary) 10%, transparent); border-radius: var(--radius-md); }

    &[data-readonly] {
      & .ce-toolbar { display: none; }
      & .codex-editor__redactor { cursor: default; }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .editorjs:not([data-ready]) > .editorjs-holder,
    .editorjs:not([data-ready]):not(:has(> .editorjs-holder))::before {
      animation: editorjs-shimmer 1.4s linear infinite;
    }
  }
  @keyframes editorjs-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Editor.js fades every block in (its own .ce-block animation) and transitions its toolbars */
    .editorjs .ce-block, .editorjs .ce-toolbar, .editorjs .ce-inline-toolbar, .editorjs .ce-popover { animation: none; transition: none; }
  }
  @media (prefers-contrast: more) {
    .editorjs .ce-code__textarea, .editorjs .ce-toolbar__plus, .editorjs .ce-toolbar__settings-btn { border-color: var(--foreground); }
  }
  @media (forced-colors: active) {
    .editorjs .cdx-marker { background: Mark; color: MarkText; }
    .editorjs .ce-block--selected .ce-block__content { outline: 2px solid Highlight; background: none; }
  }
}