/* -- 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;
    }
  }
}