:root {
  /* Colors */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: oklch(57% 0.19 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(88% 0.026 254);
  --lexxy-color-accent-lightest: oklch(92% 0.026 254);

  --lexxy-color-red: oklch(60% 0.15 27);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: oklch(66% 0.196 258);
  --lexxy-color-purple: oklch(60% 0.15 305);

  --lexxy-color-code-token-att: #d73a49;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #6f42c1;
  --lexxy-color-code-token-operator: #d73a49;
  --lexxy-color-code-token-property: #005cc5;
  --lexxy-color-code-token-punctuation: #24292e;
  --lexxy-color-code-token-selector: #22863a;
  --lexxy-color-code-token-variable: #e36209;

  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: oklch(97% 0 0); /* neutral-100 */
  --lexxy-color-selected-hover: oklch(92.2% 0 0); /* neutral-200 */
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-border: rgb(0 0 0 / 10%);

  /* Text colors: 600 (light) · Background highlights: 300 (light) */
  --highlight-1: oklch(43.8% 0.032 50);   /* taupe-600 */
  --highlight-2: oklch(64.6% 0.222 41.116);   /* orange-600 */
  --highlight-3: oklch(58.6% 0.253 17.585);   /* red-600 */
  --highlight-4: oklch(59.1% 0.293 322.896);  /* fuchsia-600 */
  --highlight-5: oklch(55.8% 0.288 302.321);  /* purple-600 */
  --highlight-6: oklch(54.6% 0.245 262.881);  /* blue-600 */
  --highlight-7: oklch(62.7% 0.194 149.214);  /* green-600 */
  --highlight-8: oklch(66.6% 0.179 58.318);   /* amber-600 */
  --highlight-9: oklch(43.9% 0 0);            /* neutral-600 */

  --highlight-bg-1: oklch(86.8% 0.016 50 / 0.45);     /* taupe-300 */
  --highlight-bg-2: oklch(83.7% 0.128 66.29 / 0.45);   /* orange-300 */
  --highlight-bg-3: oklch(81% 0.117 11.638 / 0.45);    /* red-300 */
  --highlight-bg-4: oklch(83.3% 0.145 321.434 / 0.45); /* fuchsia-300 */
  --highlight-bg-5: oklch(82.7% 0.119 306.383 / 0.45); /* purple-300 */
  --highlight-bg-6: oklch(80.9% 0.105 251.813 / 0.45); /* blue-300 */
  --highlight-bg-7: oklch(87.1% 0.15 154.449 / 0.45);  /* green-300 */
  --highlight-bg-8: oklch(87.9% 0.169 91.605 / 0.45);  /* amber-300 */
  --highlight-bg-9: oklch(87% 0 0 / 0.45);             /* neutral-300 */

  /* Callout borders: 500 (light) */
  --callout-border-1: oklch(54.7% 0.038 50);    /* taupe-500 */
  --callout-border-2: oklch(70.5% 0.213 47.6);   /* orange-500 */
  --callout-border-3: oklch(63.7% 0.237 25.3);  /* red-500 */
  --callout-border-4: oklch(66.7% 0.259 322.1); /* fuchsia-500 */
  --callout-border-5: oklch(62.7% 0.265 304);  /* purple-500 */
  --callout-border-6: oklch(62.3% 0.214 260);   /* blue-500 */
  --callout-border-7: oklch(69.6% 0.17 162.5);   /* green-500 */
  --callout-border-8: oklch(76.9% 0.188 70.1);  /* amber-500 */
  --callout-border-9: oklch(55.6% 0 0);          /* neutral-500 */

  /* Callout backgrounds: 500 hue, more transparent than text highlights */
  --callout-bg-1: oklch(54.7% 0.038 50 / 0.12);
  --callout-bg-2: oklch(70.5% 0.213 47.6 / 0.12);
  --callout-bg-3: oklch(63.7% 0.237 25.3 / 0.12);
  --callout-bg-4: oklch(66.7% 0.259 322.1 / 0.12);
  --callout-bg-5: oklch(62.7% 0.265 304 / 0.12);
  --callout-bg-6: oklch(62.3% 0.214 260 / 0.12);
  --callout-bg-7: oklch(69.6% 0.17 162.5 / 0.12);
  --callout-bg-8: oklch(76.9% 0.188 70.1 / 0.12);
  --callout-bg-9: oklch(55.6% 0 0 / 0.12);

  /* Tables */
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
  --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
  --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
  --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
  --lexxy-table-cell-add-size: 4px;

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: -2px;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-toolbar-button-size: 2lh;
  --lexxy-radius: 0.5ch;
  --lexxy-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --lexxy-z-popup: 1000;
}

:root.dark,
.dark {
  --lexxy-color-border: rgb(255 255 255 / 15%);

  /* Text colors: 400 (dark) · Background highlights: 700 (dark) */
  --highlight-1: oklch(71.4% 0.028 50);    /* taupe-400 */
  --highlight-2: oklch(75% 0.183 55.934);     /* orange-400 */
  --highlight-3: oklch(71.2% 0.194 13.428);  /* red-400 */
  --highlight-4: oklch(74% 0.238 322.16);    /* fuchsia-400 */
  --highlight-5: oklch(71.4% 0.203 305.504);   /* purple-400 */
  --highlight-6: oklch(70.7% 0.165 254.624);  /* blue-400 */
  --highlight-7: oklch(79.2% 0.209 151.711);  /* green-400 */
  --highlight-8: oklch(82.8% 0.189 84.429);   /* amber-400 */
  --highlight-9: oklch(70.8% 0 0);            /* neutral-400 */

  --highlight-bg-1: oklch(36.7% 0.028 48 / 0.5);   /* taupe-700 */
  --highlight-bg-2: oklch(55.3% 0.195 38.402 / 0.5); /* orange-700 */
  --highlight-bg-3: oklch(50.5% 0.213 27.518 / 0.5); /* red-700 */
  --highlight-bg-4: oklch(51.8% 0.253 323.949 / 0.5); /* fuchsia-700 */
  --highlight-bg-5: oklch(49.6% 0.265 301.924 / 0.5); /* purple-700 */
  --highlight-bg-6: oklch(48.8% 0.243 264.376 / 0.5); /* blue-700 */
  --highlight-bg-7: oklch(52.7% 0.154 150.069 / 0.5); /* green-700 */
  --highlight-bg-8: oklch(55.5% 0.163 48.998 / 0.5); /* amber-700 */
  --highlight-bg-9: oklch(37.1% 0 0 / 0.5);          /* neutral-700 */

  /* Callout borders: 500 (dark) */
  --callout-border-1: oklch(71.4% 0.028 50);    /* taupe-400 */
  --callout-border-2: oklch(75.8% 0.176 56);   /* orange-500 */
  --callout-border-3: oklch(70.4% 0.191 22.2); /* red-500 */
  --callout-border-4: oklch(72.5% 0.219 322.5); /* fuchsia-500 */
  --callout-border-5: oklch(71.4% 0.203 305.5); /* purple-500 */
  --callout-border-6: oklch(70.7% 0.165 254.6); /* blue-500 */
  --callout-border-7: oklch(76.5% 0.177 163.2); /* green-500 */
  --callout-border-8: oklch(79.5% 0.164 73.7);  /* amber-500 */
  --callout-border-9: oklch(70.8% 0 0);         /* neutral-500 */

  /* Tables */
  --lexxy-color-table-header-bg: rgb(255 255 255 / 0.06);
  --lexxy-color-table-cell-border: rgb(255 255 255 / 15%);
  --lexxy-color-table-cell-selected-border: #60a5fa;
  --lexxy-color-table-cell-selected-bg: rgba(96, 165, 250, 0.16);
  --lexxy-color-table-cell-add: rgba(96, 165, 250, 0.55);
  --lexxy-color-table-cell-toggle: rgb(255 255 255 / 0.08);
  --lexxy-color-table-cell-remove: oklch(71% 0.19 13 / 0.22);

  /* Callout backgrounds: more transparent in dark mode */
  --callout-bg-1: oklch(71.4% 0.028 50 / 0.18);
  --callout-bg-2: oklch(75.8% 0.176 56 / 0.18);
  --callout-bg-3: oklch(70.4% 0.191 22.2 / 0.18);
  --callout-bg-4: oklch(72.5% 0.219 322.5 / 0.18);
  --callout-bg-5: oklch(71.4% 0.203 305.5 / 0.18);
  --callout-bg-6: oklch(70.7% 0.165 254.6 / 0.18);
  --callout-bg-7: oklch(76.5% 0.177 163.2 / 0.18);
  --callout-bg-8: oklch(79.5% 0.164 73.7 / 0.18);
  --callout-bg-9: oklch(70.8% 0 0 / 0.18);
}
/* Text styles
/* -------------------------------------------------------------------------- */

.lexxy-content {
  color: var(--lexxy-color-ink);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    display: block;
    hyphens: auto;
    margin-block: 0 var(--lexxy-content-margin);
    overflow-wrap: break-word;
  }

  lexxy-editor & h1,
  lexxy-editor & h2,
  lexxy-editor & h3,
  lexxy-editor & h4,
  lexxy-editor & h5,
  lexxy-editor & h6 {
    text-wrap: wrap;
  }

  h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
  }

  h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  lexxy-editor & h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  lexxy-editor & h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  lexxy-editor & h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  lexxy-editor & h4 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  h5 {
    font-size: 0.875rem;
    font-weight: bold;
  }

  h6 {
    font-size: 0.75rem;
    font-weight: bold;
  }

  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  .attachment,
  .attachment-gallery {
    margin-block: 0 var(--lexxy-content-margin);
    position: relative;

    &:not(lexxy-editor &) {
      overflow-wrap: break-word;

      @supports (text-wrap: pretty) {
        text-wrap: pretty;
      }
    }
  }

  /* Read-only rendered content only — not the live editor (lexxy-editor carries lexxy-content too). */
  &:not(lexxy-editor) {
    > :first-child,
    > .trix-content > :first-child {
      margin-block-start: 0;
    }

    > :last-child,
    > .trix-content > :last-child {
      margin-block-end: 0;
    }

    :where(p, ul, ol, dl, blockquote, figure, .attachment, .attachment-gallery) {
      margin-block-end: 1.25em;
    }

    :where(h1, h2, h3, h4, h5, h6) {
      margin-block-start: 1.5em;
      margin-block-end: 0.75em;
    }

    :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6) {
      margin-block-start: 1em;
    }

    :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, dl, blockquote, figure, .attachment, .attachment-gallery) {
      margin-block-start: 0;
    }

    .lexxy-callout > :where(.lexxy-callout__icon, .lexxy-callout__icon-trigger) + :where(h1, h2, h3, h4, h5, h6),
    .lexxy-callout > :where(h1, h2, h3, h4, h5, h6):first-child {
      margin-block-start: 0;
    }

    .lexxy-callout > :where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0;
    }

    .lexxy-callout > :where(ul, ol, dl, blockquote) + :where(ul, ol, dl, blockquote) {
      margin-block-start: 0.75em;
    }

    a :where(strong, b),
    a:where(:has(strong), :has(b)) {
      font-weight: 600;
    }
  }

  .lexxy-content__italic {
    font-style: italic;
  }

  .lexxy-content__bold {
    font-weight: bold;
  }

  .lexxy-content__strikethrough {
    text-decoration: line-through;
  }

  .lexxy-content__underline {
    text-decoration: underline;
  }

  .lexxy-content__strikethrough.lexxy-content__underline {
    text-decoration: line-through underline;
  }

  mark,
  .lexxy-content__highlight {
    background-color: transparent;
    color: inherit;
  }

  blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed):not(.fb-xfbml-parse-ignore) {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    margin: var(--lexxy-content-margin) 0;
    padding: 0.5lh 2ch;

    p:last-child {
      margin-block-end: 0;
    }
  }

  p:empty {
    display: none;
  }

  a:not(.button-primary, .button-secondary, .attachment__name) {
    color: var(--lexxy-color-link);
    text-decoration: underline;
  }

  img,
  video,
  embed,
  object {
    inline-size: auto;
    margin-inline: auto;
    max-block-size: 32rem;
    object-fit: contain;

    a:has(&) {
      display: inline-block;
    }
  }

  audio {
    display: block;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 100%;
    min-block-size: 2.75rem;
  }

  code,
  pre {
    background-color: var(--lexxy-color-ink-lightest);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-mono);
    font-size: 0.9em;
    padding: 0.25ch 0.5ch;

    &:is(pre),
    &[data-language] {
      border-radius: var(--lexxy-radius);
      border: 1px solid var(--lexxy-color-border);
      display: block;
      hyphens: none;
      margin-block: 0 var(--lexxy-content-margin);
      overflow-x: auto;
      overflow-wrap: break-word;
      padding: 1ch;
      tab-size: 2;
      white-space: pre;

      @supports (text-wrap: nowrap) {
        text-wrap: nowrap;
      }
    }
  }

  .lexxy-code-block {
    margin-block: 0 var(--lexxy-content-margin);
    position: relative;

    pre {
      margin-block: 0;
    }
  }

  .lexxy-code-block__copy {
    align-items: center;
    background: var(--lexxy-color-code-bg, var(--lexxy-color-ink-lightest));
    border: 1px solid var(--lexxy-color-border);
    border-radius: calc(var(--lexxy-radius) * 0.75);
    color: var(--lexxy-color-ink);
    cursor: pointer;
    display: inline-flex;
    height: 1.75rem;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      opacity 0.15s ease;
    width: 1.75rem;
    z-index: 1;

    svg {
      block-size: 1rem;
      inline-size: 1rem;
    }

    [data-clipboard-target="copiedContent"] {
      color: oklch(52% 0.24 145);
    }

    &:hover {
      background: white;
    }

    :root.dark &,
    .dark & {
      [data-clipboard-target="copiedContent"] {
        color: oklch(72% 0.24 145);
      }

      &:hover {
        background: color-mix(in oklch, white 8%, var(--lexxy-color-code-bg, var(--lexxy-color-ink-lightest)));
      }
    }

    &:focus-visible {
      opacity: 1;
      outline: 2px solid var(--lexxy-focus-ring-color, var(--lexxy-color-accent-dark));
      outline-offset: 2px;
    }
  }

  .lexxy-code-block:hover .lexxy-code-block__copy,
  .lexxy-code-block:focus-within .lexxy-code-block__copy {
    opacity: 1;
  }

  ol,
  ul:not(.lexxy-prompt-menu) {
    margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
    padding: 0;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  ul:not(.lexxy-prompt-menu) > li:not([role="checkbox"]) + li:not([role="checkbox"]),
  ol > li + li {
    margin-block-start: 0.6em;
  }

  li.lexxy-nested-listitem {
    list-style-type: none;

    ol,
    ul {
      margin-block-end: 0;
    }
  }

  hr {
    border: 0;
    border-block-end: 1px solid currentColor;
    inline-size: 20%;
    margin: calc(0.5em + var(--lexxy-content-margin)) 0;
  }

  .horizontal-divider {
    margin: 0;
    padding: calc(0.5em + var(--lexxy-content-margin)) 0;

    hr {
      margin: 0;
    }
  }

  *:has(+ .horizontal-divider) {
    margin-block-end: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  /* Tables */
  :where(.lexxy-content__table-wrapper) {
    margin: 0;
    margin-block: 1ch;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: calc(100% - 0.5ch);
    margin: 0.25ch;

    th,
    td {
      border: 1px solid var(--lexxy-color-table-cell-border);
      min-width: 5ch;
      max-width: 50ch;
      padding: 1ch;
      text-align: start;
      word-break: normal;

      *:last-child {
        margin-block-end: 0;
      }

      &.lexxy-content__table-cell--header {
        background-color: var(--lexxy-color-table-header-bg);
        font-weight: bold;
      }

      *:is(code, pre) {
        hyphens: auto;
        white-space: pre-wrap;

        @supports (text-wrap: wrap) {
          text-wrap: wrap;
        }
      }
    }
  }

  /* Attachments
  /* ------------------------------------------------------------------------ */

  p:has(.attachment) {
    text-align: center;
  }

  .attachment {
    --lexxy-attachment-gap: 0;

    block-size: auto;
    box-sizing: border-box;
    border-radius: var(--lexxy-radius);
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    max-inline-size: 100%;
    min-inline-size: 10ch;
    padding: var(--lexxy-attachment-gap);
    position: relative;
    text-align: center;

    &:has(> audio, > .attachment__container > audio, > .attachment__container.attachment__pdf-frame) {
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  .attachment__container:has(audio),
  .attachment__container.attachment__pdf-frame {
    inline-size: 100%;
  }

  .attachment__pdf-frame iframe {
    border: 0;
    border-radius: var(--lexxy-radius);
    display: block;
    inline-size: 100%;
  }

  .attachment__caption {
    color: var(--lexxy-color-text-subtle);
    display: block;
    font-size: var(--lexxy-text-small);
    padding: 1ch;
  }

  .attachment__icon {
    aspect-ratio: 4/5;
    background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
    block-size: 3lh;
    border: 1px solid var(--lexxy-attachment-icon-color);
    border-block-start-width: 1.5ch;
    border-radius: var(--lexxy-radius);
    box-sizing: border-box;
    color: var(--lexxy-attachment-icon-color);
    display: grid;
    font-size: var(--lexxy-text-small);
    font-weight: bold;
    inline-size: auto;
    overflow: hidden;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .attachment--preview {
    img,
    video,
    audio {
      border-radius: var(--lexxy-radius);
      block-size: auto;
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    audio {
      inline-size: 100%;
      min-block-size: 2.75rem;
    }

    > a {
      display: block;
    }

    .attachment__caption {
      padding-block-end: 0.5ch;
    }
  }

  .attachment--image-small {
    inline-size: min(16rem, 100%);
  }

  .attachment--image-medium {
    inline-size: min(32rem, 100%);
  }

  .attachment--image-full {
    inline-size: 100%;

    .attachment__container,
    .attachment__image-frame,
    img {
      inline-size: 100%;
    }

    img {
      block-size: auto;
      max-block-size: none;
      object-fit: unset;
    }
  }

  .attachment--align-left {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .attachment--align-center {
    margin-inline: auto;
  }

  .attachment--align-right {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .attachment--file {
    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    inline-size: auto;

    &:has(> audio, > .attachment__container > audio) {
      display: block;
      inline-size: 100%;
      max-inline-size: 100%;
    }

    &:has(> video) {
      display: block;
      inline-size: 100%;
      max-inline-size: 32rem;
    }

    .attachment__caption {
      display: grid;
      flex: 1;
      text-align: start;
    }

    .attachment__name {
      color: var(--lexxy-color-ink);
      font-weight: bold;
    }
  }

  .attachment--psd,
  .attachment--key,
  .attachment--sketch,
  .attachment--ai,
  .attachment--eps,
  .attachment--indd,
  .attachment--svg,
  .attachment--ppt,
  .attachment--pptx {
    --lexxy-attachment-icon-color: var(--lexxy-color-red);
  }

  .attachment--css,
  .attachment--php,
  .attachment--json,
  .attachment--htm,
  .attachment--html,
  .attachment--rb,
  .attachment--erb,
  .attachment--ts,
  .attachment--js {
    --lexxy-attachment-icon-color: var(--lexxy-color-purple);
  }

  .attachment--txt,
  .attachment--pages,
  .attachment--rtf,
  .attachment--md,
  .attachment--doc,
  .attachment--docx {
    --lexxy-attachment-icon-color: var(--lexxy-color-blue);
  }

  .attachment--csv,
  .attachment--numbers,
  .attachment--xls,
  .attachment--xlsx {
    --lexxy-attachment-icon-color: var(--lexxy-color-green);
  }

  .attachment--error {
    padding-block: 2ch;
  }

  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  .attachment-gallery {
    display: block;
    text-align: center;

    .attachment {
      display: inline-flex;
      flex-direction: column;
      gap: 0;
      inline-size: calc(33.333% - 0.8ch);
      vertical-align: top;

      .attachment__caption {
        padding-block-end: 1ch;
      }
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      .attachment {
        inline-size: calc(50% - 0.8ch);
      }
    }
  }

  /* Custom attachments such as mentions, etc. */
  /* ------------------------------------------------------------------------ */

  action-text-attachment[content-type^="application/vnd.actiontext"]:not(
      [content-type="application/vnd.actiontext.embed"]
    ) {
    --lexxy-attachment-bg-color: transparent;
    --lexxy-attachment-image-size: 1em;
    --lexxy-attachment-text-color: currentColor;

    align-items: center;
    background: var(--lexxy-attachment-bg-color);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-attachment-text-color);
    display: inline-flex;
    gap: 0.25ch;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal;

    img {
      block-size: var(--lexxy-attachment-image-size);
      border-radius: 50%;
      inline-size: var(--lexxy-attachment-image-size);
    }
  }

}

/* Read-only horizontal divider (published content) */
:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .horizontal-divider {
  margin: 0;
  margin-block-end: 0.5em;
  padding: 1.5em 0 0.5em;

  hr {
    border: 0;
    border-block-end: 1px solid currentColor;
    inline-size: 20%;
    margin: 0;
  }
}
:where(lexxy-editor) {
  --lexxy-editor-padding: 1ch;
  --lexxy-editor-rows: 8lh;
  /* eslint-disable-next-line css/no-invalid-properties */
  @supports (min-block-size: attr(rows lh)) {
    --lexxy-editor-rows: attr(rows lh, 8lh);
  }
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-spacing: 0.5ch;

  border: 1px solid var(--lexxy-color-border);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  background-color: var(--lexxy-color-canvas);
  container-type: inline-size;
  display: block;
  overflow: visible;
  position: relative;
  transition: opacity 150ms;

  p.provisional-paragraph {
    display: block;

    &.hidden {
      block-size: 0.5ch;
      margin: 0;
    }
  }

  input,
  button,
  summary {
    &:focus-visible {
      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
      outline-offset: var(--lexxy-focus-ring-offset);
    }
  }

  summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  button,
  summary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lexxy-color-canvas);
    border: none;
    border-radius: var(--lexxy-radius);
    cursor: pointer;
    line-height: normal;
    font-size: inherit;
    inline-size: auto;
    padding: 0;

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: var(--lexxy-color-ink-lightest);
      }
    }
  }

  .node--selected {
    outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  &[data-links-openable] a {
    cursor: pointer;
  }

  /* Tables */
  /* ------------------------------------------------------------------------ */

  table {
    th,
    td {
      position: relative;
      transition: all 0.1s ease-in-out;

      /* Used for column and row adding visualizations */
      &:after {
        box-shadow:
          0 0 0 0 transparent,
          0 0 0 0 transparent inset;
        content: "";
        display: block;
        inset-block-start: -1px;
        inset-block-end: -1px;
        inset-inline-start: -1px;
        inset-inline-end: -1px;
        pointer-events: none;
        position: absolute;
        transition: box-shadow 0.1s ease-in-out;
        z-index: 2;
      }

      &.lexxy-content__table-cell--selected {
        background-color: var(--lexxy-color-table-cell-selected-bg);
      }

      &.lexxy-content__table-cell--focus {
        &:after {
          box-shadow:
            0 0 0 0 transparent,
            0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
        }
      }

      &.lexxy-content__table-cell--highlight {
        &[data-action="insert"] {
          &[data-child-type="row"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
          &[data-child-type="column"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
        }
        &[data-action="delete"] {
          background-color: var(--lexxy-color-table-cell-remove);
          color: var(--lexxy-color-red);

          &:after {
            box-shadow: 0 0 0 0 transparent;
          }
        }
        &[data-action="toggle"] {
          background-color: var(--lexxy-color-table-cell-toggle);

          &:after {
            box-shadow: 0 0 0 0 transparent;
          }
        }
      }
    }

    tr.lexxy-content__table-cell--highlight[data-action="delete"] {
      th,
      td {
        background-color: var(--lexxy-color-table-cell-remove);
        color: var(--lexxy-color-red);

        &:after {
          box-shadow: 0 0 0 0 transparent;
        }
      }
    }

    &.lexxy-content__table--selection {
      /* eslint-disable-next-line css/use-baseline */
      ::selection {
        background: transparent;
      }
    }
  }

  &:has(.lexxy-content__table-cell--selected) {
    lexxy-table-tools {
      visibility: hidden;
    }
  }

  [data-lexical-linebreak] {
    block-size: 0;
    display: contents;
    inline-size: 0;
  }

  /* Attachments */
  /* ------------------------------------------------------------------------ */

  action-text-attachment {
    cursor: pointer;
  }

  .attachment {
    background-color: var(--lexxy-color-canvas);

    &:has(.attachment__container > audio, > audio) {
      inline-size: 100%;
      max-inline-size: 100%;
      width: 100%;
    }

    &:has(.attachment__container.attachment__pdf-frame) {
      inline-size: 100%;
      max-inline-size: 100%;
      width: 100%;
    }

    &.attachment--image-small {
      inline-size: min(16rem, 100%);
      max-inline-size: 100%;
    }

    &.attachment--image-medium {
      inline-size: min(32rem, 100%);
      max-inline-size: 100%;
    }

    &.attachment--image-full {
      inline-size: 100%;

      img,
      .attachment__container {
        inline-size: 100%;
      }

      img {
        block-size: auto;
        max-block-size: none;
        object-fit: unset;
      }
    }

    &.attachment--align-left {
      margin-inline-start: 0;
      margin-inline-end: auto;
    }

    &.attachment--align-center {
      margin-inline: auto;
    }

    &.attachment--align-right {
      margin-inline-start: auto;
      margin-inline-end: 0;
    }

    progress {
      max-inline-size: 10ch;
      margin: auto;
    }

    &.attachment--preview {
      progress {
        inset-block-start: 2ch;
        inset-inline-start: 0;
        inset-inline-end: 0;
        position: absolute;
      }

      .attachment__container audio {
        border-radius: var(--lexxy-radius);
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        min-block-size: 2.75rem;
      }

      .attachment__container:has(audio) {
        inline-size: 100%;
      }

      .attachment__pdf-frame iframe {
        border: 0;
        border-radius: var(--lexxy-radius);
        display: block;
        inline-size: 100%;
        min-block-size: 24rem;
      }

      lexxy-node-delete-button,
      lexxy-image-alt-button {
        inset-block-start: 1.5ch;
        inset-inline-start: unset;
      }

      lexxy-node-delete-button {
        inset-inline-end: 1.5ch;
      }

      lexxy-image-alt-button {
        inset-inline-end: calc(1.5ch + var(--button-size) + 0.75ch);
      }
    }

    &.attachment--error {
      background: color-mix(var(--lexxy-color-red) 10%, transparent);
      padding: 2ch;

      &:before {
        align-items: center;
        aspect-ratio: 1;
        background: var(--lexxy-color-red);
        block-size: 1.5lh;
        border-radius: 50%;
        color: white;
        content: "!";
        display: flex;
        justify-content: center;
        margin: auto;
      }

      > div {
        flex: 1;
        font-size: 0.85em;
        padding: 1ch;
        text-align: start;
      }
    }
  }

  .attachment[draggable] {
    cursor: grab;
  }

  .attachment.lexxy-dragging {
    opacity: 0.4;
  }

  [data-lexxy-decorator][draggable] {
    cursor: grab;
  }

  [data-lexxy-decorator].lexxy-dragging {
    opacity: 0.4;
  }

  .lexxy-drop-caret {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    inline-size: 2px;
    pointer-events: none;
    position: fixed;
  }

  [class*="lexxy-drop-target--"] {
    position: relative;
  }

  /* Horizontal line indicator for block and list drops */
  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-before::before,
  .lexxy-drop-target--list-after::after {
    background-color: var(--lexxy-focus-ring-color);
    block-size: 3px;
    border-radius: 1px;
    content: "";
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(0, 0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    transform: translate(0, -0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    inset-block-start: -2px;
  }

  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-after::after {
    inset-block-end: -2px;
  }

  /* Vertical line indicator for gallery merge and reorder */
  .lexxy-drop-target--gallery-before::before,
  .lexxy-drop-target--gallery-after::after {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    content: "";
    inset-block: 0;
    inline-size: 3px;
    pointer-events: none;
    position: absolute;
  }

  .lexxy-drop-target--gallery-before::before {
    inset-inline-start: -4px;
  }

  .lexxy-drop-target--gallery-after::after {
    inset-inline-end: -4px;
  }

  .attachment:hover:not(.node--selected) {
    outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  .attachment--file {
    lexxy-node-delete-button {
      inset-block-start: 50%;
      inset-inline-end: 1ch;
      inset-inline-start: unset;
      transform: translate(0, -50%);
    }
  }

  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  .attachment-gallery {
    --lexxy-attachment-gallery-columns: 3;
    --lexxy-attachment-gallery-gap: 0.4ch;
    --lexxy-focus-ring-offset: -6px;

    padding: 0;

    .attachment {
      background: transparent;
      box-sizing: border-box;
      margin: var(--lexxy-attachment-gallery-gap);
      padding: 0;
      padding-block-end: var(--lexxy-attachment-gap);
      vertical-align: top;

      img {
        box-sizing: border-box;
        padding: 1ch;
        padding-block-end: 0;
      }

      &.attachment--error {
        background: color-mix(var(--lexxy-color-red) 10%, transparent);
        padding: 2ch;

        > div {
          text-align: center;
        }
      }
    }
  }

  .attachment__caption {
    position: relative;

    .lexxy-caption-tools {
      display: none;
    }

    &:focus-within .lexxy-caption-tools {
      display: block;
    }

    .attachment__caption-editor {
      background: transparent;
      block-size: fit-content;
      border: 0;
      border-radius: var(--lexxy-radius);
      box-sizing: border-box;
      color: inherit;
      cursor: text;
      display: block;
      font-size: inherit;
      font-family: inherit;
      inline-size: 100%;
      max-inline-size: 100%;
      min-block-size: 1lh;
      padding: 0;
      position: relative;
      text-align: center;
      white-space: pre-wrap;
      word-break: break-word;

      &:focus,
      &:focus-visible {
        background: var(--lexxy-color-canvas);
        outline: 0;
      }

      &[data-caption-empty]::before {
        align-items: center;
        content: attr(data-placeholder);
        color: inherit;
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0.62;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

/* Placeholder */
:where(.lexxy-editor--empty) {
  .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
    content: attr(placeholder);
    color: currentColor;
    cursor: text;
    opacity: 0.66;
    pointer-events: none;
    position: absolute;
    white-space: pre-line;
  }
}

/* The rich overlay paints / and : hints. Hide the native ::before so they don't stack. */
lexxy-editor.lexxy-editor--empty[data-lexxy-rich-placeholder] .lexxy-editor__content::before {
  content: none;
}

:where(.lexxy-editor__content) {
  /* eslint-disable-next-line css/no-invalid-properties */
  min-block-size: var(--lexxy-editor-rows);
  outline: 0;
  padding: var(--lexxy-editor-padding);

  /* Isolate the contenteditable root's layout and style. Lexical's reconciler
     commits mutations inside this element (nodes appended, text inserted,
     class flipped) on every update; containment keeps those mutations from
     invalidating ancestor-dependent selectors and sibling layout elsewhere
     in the editor. */
  contain: layout style;
}

:where(.lexxy-editor--drag-over) {
  background-color: var(--lexxy-color-selected);
  border-radius: var(--lexxy-radius);
  outline: 2px dashed var(--lexxy-color-selected-dark);
}

:where([data-lexical-cursor]) {
  animation: blink 1s infinite;
  block-size: 1lh;
  border-inline-start: 1.5px solid currentColor;
  line-height: inherit;
  margin-block: 0 var(--lexxy-content-margin);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
/* Toolbar */

:where(lexxy-toolbar) {
  --lexxy-toolbar-icon-size: 1.125em;

  border-block-end: 1px solid var(--lexxy-color-border);
  color: currentColor;
  display: flex;
  font-size: inherit;
  gap: var(--lexxy-toolbar-gap);
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px;
  position: relative;
  scrollbar-width: thin;

  @container (width < 300px) {
    font-size: 0.8em;
  }

  &[data-attachments="false"] button[name="image"],
  &[data-attachments="false"] button[name="file"] {
    display: none;
  }

  &[data-upload="file"] button[name="image"] {
    display: none;
  }

  &[data-upload="image"] button[name="file"] {
    display: none;
  }

  .lexxy-editor__toolbar-button {
    aspect-ratio: 1;
    block-size: var(--lexxy-toolbar-button-size);
    border: 0;
    border-radius: var(--lexxy-radius);
    color: currentColor;
    display: grid;
    line-height: inherit;
    place-items: center;

    &:is(:active):not([aria-disabled="true"]),
    &[aria-pressed="true"] {
      background-color: var(--lexxy-color-selected);

      &:hover {
        background-color: var(--lexxy-color-selected-hover);
      }
    }

    &[aria-disabled="true"] {
      cursor: default;
      opacity: 0.3;
    }

    svg {
      -webkit-touch-callout: none;
      block-size: var(--lexxy-toolbar-icon-size);
      fill: currentColor;
      grid-area: 1/1;
      inline-size: var(--lexxy-toolbar-icon-size);
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    &[data-lexxy-icon="italic"] svg {
      block-size: calc(var(--lexxy-toolbar-icon-size) * 1.17);
      inline-size: calc(var(--lexxy-toolbar-icon-size) * 1.17);
    }

    &.lexxy-editor__toolbar-group-end {
      position: relative;
      margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);

      &:after {
        background-color: var(--lexxy-color-ink-lighter);
        block-size: var(--lexxy-toolbar-icon-size);
        content: "";
        display: block;
        inline-size: 1px;
        inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
        inset-block: 0;
        margin: auto;
        pointer-events: none;
        position: absolute;
      }
    }
  }

  .lexxy-editor__toolbar-button--push-right {
    margin-inline-start: auto;
  }

  > * {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
/* Dropdowns */

:where(.lexxy-editor__toolbar-dropdown) {
  -webkit-user-select: none;

  @supports (user-select: none) {
    user-select: none;
  }

  .lexxy-editor__toolbar-button {
    color: currentColor;

    &:hover {
      opacity: 0.8;
    }

    &.lexxy-editor__toolbar-button--chevron {
      aspect-ratio: unset;
      gap: 0.25ch;
      grid-template-columns: 2fr 1fr;
      min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
      padding-inline: 0.75ch;

      &:after {
        background-color: currentColor;
        block-size: 0.45rem;
        content: "";
        display: inline-block;
        inline-size: 0.75rem;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='currentColor'%3E%3Cpath d='m9.099,2.5H2.901c-.554,0-1.061.303-1.322.792-.262.488-.233,1.079.074,1.54l3.099,4.648c.279.418.745.668,1.248.668s.969-.25,1.248-.668l3.099-4.648c.308-.461.336-1.051.074-1.54-.262-.489-.769-.792-1.322-.792Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
          center / contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='currentColor'%3E%3Cpath d='m9.099,2.5H2.901c-.554,0-1.061.303-1.322.792-.262.488-.233,1.079.074,1.54l3.099,4.648c.279.418.745.668,1.248.668s.969-.25,1.248-.668l3.099-4.648c.308-.461.336-1.051.074-1.54-.262-.489-.769-.792-1.322-.792Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
          center / contain no-repeat;
      }
    }
  }

  > .lexxy-editor__toolbar-button[aria-expanded="true"] {
    background-color: var(--lexxy-color-selected-hover);
    border-end-end-radius: 0;
    border-end-start-radius: 0;

    &:hover {
      background-color: var(--lexxy-color-selected-hover);
    }
  }

  [data-dropdown-panel] {
    background-color: var(--lexxy-color-canvas);
    border: 2px solid var(--lexxy-color-selected-hover);
    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    box-sizing: border-box;
    box-shadow: var(--lexxy-shadow);
    color: var(--lexxy-color-text);
    display: flex;
    gap: var(--lexxy-toolbar-gap);
    margin: 0;
    padding: var(--lexxy-toolbar-spacing);
    position: absolute;
    z-index: 3;

    &[hidden],
    [overflowing] &[hidden] {
      display: none;
    }
  }

  .lexxy-editor__toolbar-dropdown-list {
    border-start-start-radius: 0;
    flex-direction: column;
    padding: 0.1ch;

    button {
      align-items: center;
      color: var(--lexxy-color-text);
      display: flex;
      flex-direction: row;
      gap: 1ch;
      padding: 1ch;
      position: relative;

      &[aria-pressed="true"] {
        background-color: var(--lexxy-color-selected);

        &:hover {
          background-color: var(--lexxy-color-selected-hover);
        }
      }

      span {
        font-size: var(--lexxy-text-small);
      }

      svg {
        block-size: 1lh;
        fill: currentColor;
        inline-size: 1lh;
      }
    }

    .lexxy-editor__toolbar-separator {
      background: var(--lexxy-color-ink-lighter);
      block-size: 1px;
      inline-size: 100%;
    }

    [overflowing] & {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      button span {
        display: none;
      }

      .lexxy-editor__toolbar-separator {
        grid-column: 1 / -1;
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Overflow menu */

  &.lexxy-editor__toolbar-overflow {
    display: none;
    justify-self: flex-end;
    z-index: 1;

    [data-dropdown-panel] {
      border-start-end-radius: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      inset-inline-end: var(--lexxy-toolbar-gap);

      .lexxy-editor__toolbar-button {
        aspect-ratio: 1;
        block-size: var(--lexxy-toolbar-button-size);
        inline-size: var(--lexxy-toolbar-button-size);
        margin-inline-end: 0;
      }

      .lexxy-editor__toolbar-button::after {
        display: none;
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Link dropdown */

  &.lexxy-editor__toolbar-dropdown--link {
    [data-dropdown-panel] {
      font-size: var(--lexxy-text-small);
      gap: var(--lexxy-toolbar-spacing);
      inset-inline-start: var(--lexxy-toolbar-spacing);
      inset-inline-end: var(--lexxy-toolbar-spacing);

      [overflowing] & {
        flex-wrap: wrap;
      }

      .lexxy-editor__toolbar-dropdown-actions {
        display: flex;
        flex: 1;
        gap: var(--lexxy-toolbar-spacing);
      }

      input[type="url"] {
        background-color: var(--lexxy-color-canvas);
        border: 1px solid var(--lexxy-color-border);
        border-radius: var(--lexxy-radius);
        color: var(--lexxy-color-text);
        block-size: var(--lexxy-toolbar-button-size);
        box-sizing: border-box;
        font-size: var(--lexxy-text-small);
        flex: 2;
        inline-size: 100%;
        line-height: inherit;
        padding-block: 0;
        padding-inline: 1ch;

        [overflowing] & {
          min-inline-size: 100%;
        }
      }

      button {
        background-color: var(--lexxy-color-ink-lightest);
        inline-size: 100%;
        padding-inline: 2ch;
      }

      button[value="link"] {
        background-color: var(--lexxy-color-accent-dark);
        color: var(--lexxy-color-ink-inverted);

        &:hover {
          background-color: var(--lexxy-color-accent-medium);
        }
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Color dropdown */

  &.lexxy-editor__toolbar-dropdown--highlight {
    position: relative;

    [overflowing] & {
      position: static;
    }

    [data-dropdown-panel] {
      --max-inline-size: calc(
        var(--max-colors) * var(--lexxy-toolbar-button-size) + (var(--max-colors) - 1) * var(--lexxy-toolbar-gap) + 2 *
          var(--lexxy-toolbar-spacing)
      );
      border-start-start-radius: 0;
      gap: var(--lexxy-toolbar-spacing);
      flex-direction: column;
      font-size: var(--lexxy-text-small);
      inset-inline-start: 0;
      max-inline-size: var(--max-inline-size);
      min-inline-size: var(--max-inline-size);

      [overflowing] & {
        border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
        inset-inline-end: var(--lexxy-toolbar-spacing);
        inset-inline-start: var(--lexxy-toolbar-spacing);
      }

      button {
        position: relative;
      }

      .lexxy-highlight-colors {
        display: grid;
        gap: var(--lexxy-toolbar-gap);
        grid-template-columns: repeat(var(--max-colors), var(--lexxy-toolbar-button-size));
        inline-size: max-content;

        button {
          block-size: unset;
          inline-size: 100%;

          &:after {
            align-items: center;
            content: "Aa";
            display: flex;
            font-family:
              system-ui,
              -apple-system,
              BlinkMacSystemFont,
              "Segoe UI",
              Roboto,
              sans-serif;
            inset: 0;
            justify-content: center;
            position: absolute;
          }

          &[aria-pressed="true"] {
            background-color: transparent;
            box-shadow: 0 0 0 2px currentColor inset;

            &:after {
              content: "✓";
            }
          }
        }
      }

      .lexxy-editor__toolbar-dropdown-reset {
        background-color: var(--lexxy-color-ink-lightest);

        &:is([disabled]) {
          display: none;
        }
      }
    }
  }
}

/* --------------------------------------------------------------------------
/* Floating controls */
:where(.lexxy-floating-controls) {
  --button-size: 2.3lh;
  --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);

  color: var(--lexxy-color-ink-inverted);
  font-size: var(--lexxy-text-small);
  line-height: 1;
  position: absolute;
  z-index: 2;

  button,
  summary {
    align-items: center;
    background: transparent;
    block-size: var(--button-size);
    color: var(--lexxy-color-ink-inverted);
    display: flex;
    justify-content: center;
    line-height: inherit;
    min-block-size: var(--button-size);
    min-inline-size: var(--button-size);
    -webkit-user-select: none;

    @supports (user-select: none) {
      user-select: none;
    }

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]),
      [open] &:is(summary) {
        background: var(--lexxy-color-ink-medium);

        svg {
          opacity: 1;
        }
      }

      &:focus-visible {
        outline-color: var(--lexxy-focus-ring-color);
      }
    }
  }

  button {
    aspect-ratio: 1 / 1;
    font-weight: bold;

    svg {
      block-size: 1.125em;
      inline-size: 1.125em;
      fill: currentColor;
      opacity: 0.8;
      padding: 1px; /* Fixes weird Safari SVG clipping issue */
    }

    span {
      display: none;
    }
  }

  summary {
    box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
    padding: 0 1.25ch;
  }

  .lexxy-floating-controls__group {
    background-color: var(--lexxy-color-ink);
    border-radius: var(--floating-tools-radius);
    padding: 0.25ch;
  }

  /* --------------------------------------------------------------------------
  /* Table Tools */

  &:is(lexxy-table-tools) {
    flex-direction: row;
    gap: 0.25ch;
    inset-inline-start: var(--lexxy-editor-padding);
    transform: translate(-50%, -120%);

    .lexxy-table-control {
      align-items: stretch;
      display: flex;
      flex-direction: row;
      gap: 0.25ch;
      white-space: nowrap;

      .lexxy-table-control__more-menu {
        gap: 0;
        position: relative;

        .lexxy-table-control__more-menu-details {
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          display: flex;
          flex-direction: column;
          gap: 0.25ch;
          inset-block-start: 110%;
          inset-inline-start: 50%;
          padding: 0.25ch;
          position: absolute;
          transform: translateX(-50%);

          button {
            aspect-ratio: unset;
            flex-direction: row;
            font-weight: normal;
            gap: 1ch;
            justify-content: flex-start;
            padding: 0.75ch;
            padding-inline-end: 1.5ch;
            white-space: nowrap;

            span {
              display: inline-block;
            }

            svg {
              block-size: 1.3lh;
              inline-size: 1.3lh;
              fill: currentColor;
            }
          }
        }
      }

      .lexxy-table-control__button--delete-table {
        align-items: center;
        block-size: auto;
        font-weight: normal;
        justify-content: center;

        svg {
          block-size: 1.125em;
          inline-size: 1.125em;
          min-block-size: 1.125em;
          min-inline-size: 1.125em;
        }

        span {
          align-items: center;
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
          display: flex;
          inset-inline-end: calc(var(--button-size) + 1ch);
          inset-block-start: 0;
          inset-block-end: 0;
          inset-inline-start: 0;
          justify-content: center;
          padding: 0.5ch 1ch;
          position: absolute;
          transition: all 0.2s ease-out;
          opacity: 0;
          pointer-events: none;
          white-space: nowrap;
        }

        &:hover {
          background-color: var(--lexxy-color-red);

          svg {
            color: var(--lexxy-color-ink-inverted);
          }

          span {
            opacity: 1;
          }
        }
      }
    }
  }

  &:is(lexxy-image-tools) {
    transform: translate(-50%, calc(-100% - 0.5ch));

    .lexxy-image-tools__bar {
      align-items: center;
      display: flex;
      gap: 0.25ch;
    }

    .lexxy-image-tools__section {
      display: flex;
      gap: 0.25ch;

      & + .lexxy-image-tools__section {
        box-shadow: -1px 0 0 0 color-mix(in srgb, var(--lexxy-color-ink-inverted) 18%, transparent);
        margin-inline-start: 0.25ch;
        padding-inline-start: 0.5ch;
      }
    }

    button {
      svg {
        fill: none;
        stroke: currentColor;
        opacity: 1;
        padding: 0;
      }

      @media (any-hover: hover) {
        &:hover:not([aria-disabled="true"]) {
          background: #353535;
        }
      }
    }

    button[aria-selected] {
      background: #404040;
      border: 0;
      box-shadow: none;
      color: #ffffff;
      outline: 0;
    }
  }

  &:is(.lexxy-caption-tools) {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, calc(-100% - 0.5ch));

    .lexxy-caption-tools__bar {
      align-items: center;
      display: flex;
      gap: 0.25ch;
    }

    button {
      svg {
        fill: none;
        stroke: currentColor;
        opacity: 1;
        padding: 0;
      }

      &[data-caption-command="link"] svg {
        fill: currentColor;
        stroke: none;
      }

      @media (any-hover: hover) {
        &:hover:not([aria-disabled="true"]) {
          background: #353535;
        }
      }
    }

    button:is([aria-selected="true"], [aria-pressed="true"]) {
      background: #404040;
      border: 0;
      box-shadow: none;
      color: #ffffff;
      outline: 0;
    }

    button[data-caption-command="italic"] svg,
    button[data-lexxy-icon="italic"] svg {
      block-size: calc(1.125em * 1.17);
      inline-size: calc(1.125em * 1.17);
    }
  }

  /* --------------------------------------------------------------------------
  /* Image alt button and attachment delete button */

  &:is(lexxy-node-delete-button) {
    inset-block-start: 0;
    inset-inline-start: 100%;
    opacity: 0;
    pointer-events: none;

    .node--selected & {
      opacity: 1;
      pointer-events: auto;
    }

    .lexxy-node-delete:hover {
      background-color: var(--lexxy-color-red);
    }
  }

  &:is(lexxy-image-alt-button) {
    inset-block-start: 0;
    inset-inline-end: calc(var(--button-size) + 0.75ch);
    opacity: 0;
    pointer-events: none;

    .node--selected & {
      opacity: 1;
      pointer-events: auto;
    }

    .lexxy-image-alt {
      svg {
        fill: none;
        stroke: currentColor;
        opacity: 1;
        padding: 0;
      }

      @media (any-hover: hover) {
        &:hover:not([aria-disabled="true"]) {
          background: #353535;
        }
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Language picker */

  &:is(lexxy-code-language-picker) {
    inset-inline-end: var(--lexxy-editor-padding);

    select {
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--lexxy-color-canvas);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
      background-position: center right 1ch;
      background-repeat: no-repeat;
      background-size: 1ch;
      block-size: 1.5lh;
      border: 1px solid var(--lexxy-color-border);
      border-radius: var(--lexxy-radius);
      color: var(--lexxy-color-ink);
      font-family: var(--lexxy-font-base);
      font-size: var(--lexxy-text-small);
      font-weight: normal;
      margin: 0.5ch 0.5ch 0 -0.5ch;
      padding: 0 2ch 0 1ch;
      text-align: start;

      @media (prefers-color-scheme: dark) {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
      }
    }
  }
}

/* --------------------------------------------------------------------------
/* Custom attachments */
action-text-attachment[content-type^="application/vnd.actiontext"] {
  &.node--selected {
    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);

    outline: none;
  }

  lexxy-node-delete-button {
    inset-inline-start: 0;
    line-height: 1lh;

    .lexxy-floating-controls__group {
      --button-size: 1lh;

      background-color: var(--lexxy-color-accent-dark);
      padding: 0;

      button {
        border-radius: 50%;
      }
    }
  }
}

:where(lexxy-editor) > .lexxy-editor__placeholder {
  color: currentColor;
  cursor: text;
  display: none;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  position: absolute;
  white-space: normal;
  z-index: 1;
}

:where(lexxy-editor.lexxy-editor--empty) > .lexxy-editor__placeholder {
  display: block;
}

:where(.lexxy-editor__placeholder-context) {
  opacity: 0.66;
}

:where(.lexxy-editor__placeholder-tip) {
  opacity: 0.45;
}

:where(.lexxy-editor__placeholder-tip--solo) {
  opacity: 0.66;
}

:where(.lexxy-editor__placeholder-key) {
  align-items: center;
  background: rgb(0 0 0 / 0.04);
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: 0.25rem;
  color: inherit;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75em;
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  margin-inline: 0.1em;
  min-inline-size: 1.25rem;
  padding: 0.15em 0.35em;
  vertical-align: baseline;
  white-space: nowrap;
}
/*
 * Action Text content can be rendered from old Trix-authored records or new
 * Lexxy-authored records. Keep both selectors so existing posts retain styling.
*/

/* Lexxy stores text colors in <mark> tags. Reset the browser default yellow. */
:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) mark {
  background-color: transparent;
}

/* Background-only highlights in read-only content (see lexxy.css for selector rationale) */
.dark
  :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  mark[style*="background-color"]:not([style^="color:"]):not([style*="; color:"]) {
  color: #ffffff;
}

.link_to_embed {
  white-space: normal;
  margin-top: 1rem;
  margin-left: 1rem;

  [data-behavior="embed_url"] {
    display: inline-block;
  }
}

lexxy-editor:empty:not(:focus)::before {
  color: #9ca3af;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--image-small {
  width: min(16rem, 100%);
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--image-medium {
  width: min(32rem, 100%);
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--image-full {
  width: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  .attachment--image-full
  :where(.attachment__container, .attachment__image-frame, img) {
  width: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--image-full img {
  height: auto;
  max-height: none;
  object-fit: unset;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--preview img {
  border-radius: 1rem;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  :is(.attachment__image-frame, .attachment--preview .attachment__container:has(> img)) {
  border-radius: 1rem;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  .attachment--image-full
  :is(.attachment__image-frame, .attachment__container:has(> img)) {
  display: block;
  width: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  :is(.attachment__image-frame, .attachment--preview .attachment__container:has(> img))::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.dark
  :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  :is(.attachment__image-frame, .attachment--preview .attachment__container:has(> img))::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  figure.attachment.attachment--preview
  > img {
  outline: 1px solid rgba(0, 0, 0, 0.15);
  outline-offset: -1px;
}

.dark
  :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  figure.attachment.attachment--preview
  > img {
  outline-color: rgba(255, 255, 255, 0.15);
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--align-left {
  margin-left: 0;
  margin-right: auto;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--align-center {
  margin-left: auto;
  margin-right: auto;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--align-right {
  margin-left: auto;
  margin-right: 0;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) a:not(.button-primary, .button-secondary) {
  color: #317bf2;
  text-decoration: underline;
}

.dark :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) a:not(.button-primary, .button-secondary) {
  color: #7a97f7;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) a:not(.button-primary, .button-secondary):hover {
  color: #3862df;
}

.dark :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) a:not(.button-primary, .button-secondary):hover {
  color: #b3c5ff;
}

/* Inline code in read-only prose wrappers (e.g. blog posts) */
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) :where(code):not(pre code)::before,
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) :where(code):not(pre code)::after {
  content: none;
}

.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) code,
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) pre {
  background-color: var(--lexxy-color-code-bg, var(--lexxy-color-ink-lightest));
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-mono);
  font-size: 0.9em;
  font-weight: 400;
  padding: 0.25ch 0.5ch;
}

.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) pre,
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) code[data-language] {
  border-radius: 0.5rem;
  display: block;
  hyphens: none;
  margin-block: 0 var(--lexxy-content-margin);
  overflow-x: auto;
  overflow-wrap: break-word;
  padding: 1rem;
  tab-size: 2;
  white-space: pre;
}

.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) pre code,
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) code[data-language] code {
  background: transparent;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] {
    display: block;
    margin: 1rem 0;
    position: relative;
    width: 100%;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed {
    display: block;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed > *:not(script):not(.embed__badge) {
    display: block;
    width: 100%;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed script {
    display: none !important;
  }

  .embed {
    display: inline-block;
    line-height: 0;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
    @apply flex justify-center;
  }

  .embed img {
    margin-bottom: 0;
    margin-top: 0;
  }

  .embed--thumbnail {
    border-radius: 0.75rem;
    display: block;
    line-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .embed--thumbnail img {
    border-radius: 0;
  }

  .embed__badge {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(15, 15, 15, 0.72);
    border-radius: 6px;
    bottom: 0.65rem;
    color: #fff;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 500;
    gap: 0.35rem;
    left: 0.65rem;
    line-height: 1;
    padding-block: 0.35rem;
    padding-inline: 0.55rem;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .embed__badge-icon {
    block-size: 0.85rem;
    flex-shrink: 0;
    inline-size: 0.85rem;
  }

  .embed__badge .embed-provider-icon--theme-adaptive {
    color: #fff;
  }

  .embed__badge .embed-provider-icon--theme-adaptive path[fill="currentColor"] {
    fill: currentColor;
  }

  .embed__badge-label {
    white-space: nowrap;
  }

  iframe,
  twitter-widget {
    display: inline-block !important;
    width: 100% !important;
  }

  iframe {
    @apply w-full aspect-[16/9] h-fit rounded-xl overflow-hidden flex justify-center;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] twitter-widget {
    display: block !important;
    width: 100% !important;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] iframe {
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    height: auto;
    overflow: hidden;
  }

  .embed--twitter iframe,
  .twitter-tweet-rendered iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .twitter-tweet-rendered iframe {
    aspect-ratio: unset;
    border-radius: 0.75rem;
    height: auto;
    max-width: 550px;
  }

  .embed--twitter,
  .twitter-tweet-rendered,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .twitter-tweet-rendered {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5rem 0;
    width: 100%;
  }

  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter twitter-widget,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .twitter-tweet-rendered twitter-widget {
    display: block !important;
    margin-inline: auto;
    max-width: 550px;
    width: 100% !important;
  }

  .embed--instagram,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--instagram {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5rem 0;
    width: 100%;
  }

  .embed--instagram iframe.instagram-media,
  .embed--instagram iframe.instagram-media-rendered,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--instagram iframe.instagram-media,
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
    .embed--instagram
    iframe.instagram-media-rendered {
    aspect-ratio: unset;
    border-radius: 3px;
    display: block;
    height: unset;
    margin-inline: auto;
    max-width: 658px;
    min-height: 326px;
    min-width: 326px;
    overflow: visible;
    width: 100%;
  }

  .embed--instagram blockquote.instagram-media,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--instagram blockquote.instagram-media {
    margin: 0;
    max-width: 658px;
    width: 100%;
  }

  .embed--tiktok,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--tiktok {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5rem 0;
    width: 100%;
  }

  .embed--tiktok blockquote.tiktok-embed,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--tiktok blockquote.tiktok-embed,
  blockquote.tiktok-embed,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] blockquote.tiktok-embed {
    border: 0;
    border-inline-start: 0;
    font-style: normal;
    margin: 0 auto;
    max-width: 605px;
    min-width: 325px;
    padding: 0;
    width: 100%;
  }

  .embed--tiktok blockquote.tiktok-embed iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--tiktok blockquote.tiktok-embed iframe,
  blockquote.tiktok-embed iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] blockquote.tiktok-embed iframe {
    aspect-ratio: unset;
    border: 0;
    border-radius: 0;
    display: block;
    height: auto;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    position: static;
    width: 100%;
  }

  .embed--facebook,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook {
    margin: 1.5rem 0;
    width: 100%;
  }

  .embed--facebook .fb-video,
  .embed--facebook .fb-video span,
  .embed--facebook .fb-post,
  .embed--facebook .fb-post span,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-video,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-video span,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post span {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  .embed--facebook .fb-post span,
  .embed--facebook .fb-post iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post span,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post iframe {
    background: #fff;
    margin-inline: auto;
  }

  .embed--facebook blockquote.fb-xfbml-parse-ignore,
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
    .embed--facebook
    blockquote.fb-xfbml-parse-ignore,
  blockquote.fb-xfbml-parse-ignore {
    border: 0;
    border-inline-start: 0;
    font-style: normal;
    margin: 0;
    padding: 0;
  }

  .embed--airtable,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--airtable {
    margin: 1.5rem 0;
    width: 100%;
  }

  .embed--airtable iframe,
  action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--airtable iframe {
    aspect-ratio: unset;
    border: 0;
    display: block;
    height: 533px;
    max-width: 100%;
    width: 100%;
  }

  figure.horizontal-divider {
    inline-size: 100%;
    margin: 0;
    padding: 1.25rem 0;
  }

  figure.horizontal-divider hr,
  hr {
    border: 0;
    border-block-end: 1px solid #d4d4d4;
    border-top-width: 0;
    inline-size: 100%;
    margin: 1.25rem 0;
    opacity: 1;
  }
}

.dark :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) figure.horizontal-divider hr,
.dark :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) hr {
  border-block-end-color: #737373;
}

/* Override Tailwind Typography hr styles inside blog posts and other prose wrappers */
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) figure.horizontal-divider hr,
.prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) hr {
  border: 0;
  border-block-end: 1px solid #d4d4d4;
  border-top-width: 0;
}

.dark .prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) figure.horizontal-divider hr,
.dark .prose :where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) hr {
  border-block-end-color: #737373;
}

/* Attachment formatting */
:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  figure.attachment:has(.attachment__pdf-frame, > .attachment__container.attachment__pdf-frame) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment__pdf-frame {
  aspect-ratio: 1 / 1;
  inline-size: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment__pdf-frame iframe {
  border: 0;
  border-radius: 1rem;
  block-size: 100%;
  display: block;
  inline-size: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content)
  figure.attachment:has(> audio, > .attachment__container > audio) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) figure.attachment audio {
  display: block;
  inline-size: 100%;
  min-block-size: 2.75rem;
}

:where(.trix-content, .lexxy-content):not(lexxy-editor .lexxy-content) .attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}

/* Tweet embeds */
blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px;
  width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

blockquote.twitter-tweet {
  position: relative;
  background: white;
  padding: 72px 20px 28px !important;
  box-shadow: none;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  margin: 0;
  font-style: normal;
  text-align: left;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet {
    padding: 60px 17.5px 21.5px !important;
  }
}

blockquote.twitter-tweet:before {
  content: "Follow";
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5.5px 12px 6.5px 33px;
  background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E")
    9px center no-repeat;
  background-size: 21px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #ccc;
  font-size: 14px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet:before {
    display: none;
  }
}

blockquote.twitter-tweet:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  background: #eee
    url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E")
    center center no-repeat;
  border-radius: 4px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet:after {
    top: 17.5px;
    left: 17.5px;
  }
}

blockquote.twitter-tweet p {
  white-space: pre-wrap;
  margin: 0 0 28px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet p {
    font-size: 14px;
    margin-bottom: 16px;
  }
}

blockquote.twitter-tweet a {
  border: 0;
  box-shadow: none;
  color: #2b7bb9;
}

blockquote.twitter-tweet > a {
  color: #888;
}
:root.dark,
.dark {
  --lexxy-color-canvas: #404040;
  --lexxy-color-ink: #fafafa;
  --lexxy-color-ink-medium: #d4d4d4;
  --lexxy-color-ink-light: #a3a3a3;
  --lexxy-color-ink-lighter: #525252;
  --lexxy-color-ink-lightest: #222222;
  --lexxy-color-ink-inverted: #ffffff;
  --lexxy-color-accent-dark: #2563eb;
  --lexxy-color-accent-medium: #3b82f6;
  --lexxy-color-accent-light: #1e3a8a;
  --lexxy-color-accent-lightest: #1e293b;
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: #60a5fa;
  --lexxy-color-selected: #525252;
  --lexxy-color-selected-hover: #737373;
  --lexxy-color-selected-dark: #3b82f6;
  --lexxy-color-selected-50: rgba(59, 130, 246, 0.45);
  --lexxy-color-code-bg: #262626;
  --lexxy-color-table-header-bg: rgb(255 255 255 / 0.06);
  --lexxy-color-table-cell-border: rgb(255 255 255 / 15%);
  --lexxy-color-table-cell-selected: rgba(59, 130, 246, 0.2);
  --lexxy-color-table-cell-selected-border: #60a5fa;
  --lexxy-color-table-cell-selected-bg: rgba(96, 165, 250, 0.16);
  --lexxy-color-table-cell-add: rgba(96, 165, 250, 0.55);
  --lexxy-color-table-cell-toggle: rgb(255 255 255 / 0.08);
  --lexxy-color-table-cell-remove: rgba(248, 113, 113, 0.22);
  --lexxy-color-code-token-att: #93c5fd;
  --lexxy-color-code-token-comment: #a3a3a3;
  --lexxy-color-code-token-function: #c4b5fd;
  --lexxy-color-code-token-operator: #fca5a5;
  --lexxy-color-code-token-property: #7dd3fc;
  --lexxy-color-code-token-punctuation: #d4d4d4;
  --lexxy-color-code-token-selector: #86efac;
  --lexxy-color-code-token-variable: #fcd34d;
  --lexxy-focus-ring-color: #3b82f6;
  --lexxy-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

lexxy-editor {
  /* --lexxy-editor-padding: 0.2em 1em 1.25rem; */
  --lexxy-editor-rows: 10rem;
  --lexxy-toolbar-button-size: 1.75rem;
  --lexxy-toolbar-icon-size: 0.95rem;
  --lexxy-toolbar-spacing: 0.35ch;

  background: #ffffff;
  border: 0;
  border-radius: 0.5rem;
  color: #262626;
  display: block;
  /* 16px on mobile so iOS Safari does not zoom the page on focus */
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
}

@media (min-width: 640px) {
  lexxy-editor {
    font-size: 0.9rem;
    line-height: 1.25rem;
  }
}

.dark lexxy-editor {
  background: #404040;
  color: #fafafa;
}

lexxy-editor .lexxy-editor__content {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  min-height: 10rem;
}

:where(.trix-content, .lexxy-content) code,
:where(.trix-content, .lexxy-content) pre {
  background-color: var(--lexxy-color-code-bg, var(--lexxy-color-ink-lightest));
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-mono);
  font-size: 0.9em;
  padding: 0.25ch 0.5ch;
}

:where(.trix-content, .lexxy-content) pre,
:where(.trix-content, .lexxy-content) code[data-language] {
  border-radius: 0.5rem;
  display: block;
  hyphens: none;
  margin-block: 0 var(--lexxy-content-margin);
  overflow-x: auto;
  overflow-wrap: break-word;
  padding: 1rem;
  tab-size: 2;
  white-space: pre;
}

:where(.trix-content, .lexxy-content) pre code,
:where(.trix-content, .lexxy-content) code[data-language] code {
  background: transparent;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

:where(.trix-content, .lexxy-content) .code-token__attr,
:where(.trix-content, .lexxy-content) .token.attr-name,
:where(.trix-content, .lexxy-content) .token.atrule,
:where(.trix-content, .lexxy-content) .token.attr,
:where(.trix-content, .lexxy-content) .token.keyword {
  color: var(--lexxy-color-code-token-att);
}

:where(.trix-content, .lexxy-content) .code-token__property,
:where(.trix-content, .lexxy-content) .token.boolean,
:where(.trix-content, .lexxy-content) .token.constant,
:where(.trix-content, .lexxy-content) .token.number,
:where(.trix-content, .lexxy-content) .token.property,
:where(.trix-content, .lexxy-content) .token.symbol,
:where(.trix-content, .lexxy-content) .token.tag {
  color: var(--lexxy-color-code-token-property);
}

:where(.trix-content, .lexxy-content) .code-token__selector,
:where(.trix-content, .lexxy-content) .token.attr-value,
:where(.trix-content, .lexxy-content) .token.builtin,
:where(.trix-content, .lexxy-content) .token.char,
:where(.trix-content, .lexxy-content) .token.inserted,
:where(.trix-content, .lexxy-content) .token.line,
:where(.trix-content, .lexxy-content) .token.selector,
:where(.trix-content, .lexxy-content) .token.string {
  color: var(--lexxy-color-code-token-selector);
}

:where(.trix-content, .lexxy-content) .code-token__comment,
:where(.trix-content, .lexxy-content) .token.cdata,
:where(.trix-content, .lexxy-content) .token.comment,
:where(.trix-content, .lexxy-content) .token.doctype,
:where(.trix-content, .lexxy-content) .token.prolog {
  color: var(--lexxy-color-code-token-comment);
  font-style: italic;
}

:where(.trix-content, .lexxy-content) .code-token__operator,
:where(.trix-content, .lexxy-content) .token.deleted,
:where(.trix-content, .lexxy-content) .token.entity,
:where(.trix-content, .lexxy-content) .token.operator,
:where(.trix-content, .lexxy-content) .token.url,
:where(.trix-content, .lexxy-content) code[data-language="diff"] .code-token__operator + .code-token__selector {
  color: var(--lexxy-color-code-token-operator);
}

:where(.trix-content, .lexxy-content) .code-token__function,
:where(.trix-content, .lexxy-content) .token.class,
:where(.trix-content, .lexxy-content) .token.class-name,
:where(.trix-content, .lexxy-content) .token.function {
  color: var(--lexxy-color-code-token-function);
}

:where(.trix-content, .lexxy-content) .code-token__variable,
:where(.trix-content, .lexxy-content) .token.important,
:where(.trix-content, .lexxy-content) .token.namespace,
:where(.trix-content, .lexxy-content) .token.regex,
:where(.trix-content, .lexxy-content) .token.variable {
  color: var(--lexxy-color-code-token-variable);
}

:where(.trix-content, .lexxy-content) .code-token__punctuation,
:where(.trix-content, .lexxy-content) .token.punctuation {
  color: var(--lexxy-color-code-token-punctuation);
}

/* lexxy-editor:focus-within {
  box-shadow: inset 0 0 0 1px #737373;
} */

lexxy-toolbar {
  background-color: #ffffff;
  border-bottom: 1px solid #d4d4d4;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 0.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

lexxy-toolbar .lexxy-editor__toolbar-button {
  min-height: 0;
  min-width: 0;
}

lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"],
lexxy-toolbar .lexxy-editor__toolbar-button--chevron[aria-expanded="true"] {
  border-end-end-radius: var(--lexxy-radius);
  border-end-start-radius: var(--lexxy-radius);
}

lexxy-toolbar .lexxy-editor__toolbar-overflow [data-dropdown-panel] {
  border-start-end-radius: 8px;
}

lexxy-toolbar[data-lexxy-dropdown-open] {
  z-index: 30;
}

/* A transformed slide-over becomes the containing block for fixed descendants,
 * which traps Lexxy dropdowns inside its scrolling content. At translate-x-0,
 * dropping the transform is visually neutral and lets the open panel use the
 * viewport as its containing block. */
[data-slide-over-on].translate-x-0:has(
    lexxy-toolbar [data-lexxy-floating-dropdown]:not([data-lexxy-mobile-modal])
  ) {
  transform: none !important;
}

/* Modal open animations leave transform: scale(1) via forwards fill, which also
 * makes the dialog the containing block for Lexxy's fixed toolbar dropdowns. */
dialog.modal:has(lexxy-toolbar [data-lexxy-floating-dropdown]:not([data-lexxy-mobile-modal])) {
  transform: none !important;
  overflow: visible !important;
}


lexxy-toolbar [data-dropdown-panel] {
  box-shadow: var(--lexxy-shadow);
}

lexxy-toolbar .lexxy-editor__toolbar-dropdown [data-lexxy-floating-dropdown] {
  inset: auto !important;
  inset-block-start: var(--lexxy-dropdown-block-start) !important;
  inset-inline-start: var(--lexxy-dropdown-inline-start) !important;
  max-block-size: var(--lexxy-dropdown-max-block-size) !important;
  max-inline-size: calc(100vw - 1rem);
  position: fixed !important;
  z-index: 1000;
}

lexxy-toolbar
  .lexxy-editor__toolbar-dropdown:not(.lexxy-giphy-dropdown, .lexxy-editor__toolbar-dropdown--highlight)
  [data-lexxy-floating-dropdown] {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

lexxy-toolbar .lexxy-giphy-dropdown [data-lexxy-floating-dropdown],
lexxy-toolbar .lexxy-editor__toolbar-dropdown--highlight [data-lexxy-floating-dropdown] {
  overflow: hidden !important;
}

@media (max-width: 767px) {
  lexxy-toolbar
    .lexxy-editor__toolbar-dropdown
    [data-lexxy-mobile-modal][data-lexxy-floating-dropdown] {
    block-size: fit-content;
    border-radius: 0.75rem;
    inline-size: min(calc(100vw - 1rem), 32rem) !important;
    inset: 0 !important;
    margin: auto !important;
    max-block-size: min(80dvh, calc(100dvh - 1rem)) !important;
    max-inline-size: calc(100vw - 1rem);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    position: fixed !important;
  }

  lexxy-toolbar
    .lexxy-giphy-dropdown
    [data-lexxy-mobile-modal][data-lexxy-floating-dropdown] {
    block-size: min(24rem, calc(100dvh - 1rem));
    overflow: hidden !important;
  }

  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
    [data-lexxy-mobile-modal][data-dropdown-panel]
    input[type="url"] {
    block-size: 2.35rem;
    flex: 2;
    min-inline-size: 0;
  }

  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
    [data-lexxy-mobile-modal][data-dropdown-panel]
    .lexxy-editor__toolbar-dropdown-actions {
    flex: 0 0 auto;
    inline-size: auto;
  }

  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
    [data-lexxy-mobile-modal][data-dropdown-panel]
    .lexxy-editor__toolbar-dropdown-actions
    button {
    block-size: 2.35rem;
    flex: 0 0 auto;
    inline-size: auto;
  }

  lexxy-editor
    .lexxy-editor__toolbar-dropdown.lexxy-editor__toolbar-dropdown--highlight
    [data-lexxy-mobile-modal][data-dropdown-panel],
  lexxy-highlight-dropdown
    [data-lexxy-mobile-modal][data-dropdown-panel] {
    gap: 0.75rem;
  }

  lexxy-editor
    .lexxy-editor__toolbar-dropdown.lexxy-editor__toolbar-dropdown--highlight
    [data-lexxy-mobile-modal][data-dropdown-panel]
    .lexxy-highlight-colors,
  lexxy-highlight-dropdown
    [data-lexxy-mobile-modal][data-dropdown-panel]
    .lexxy-highlight-colors {
    inline-size: 100%;
    justify-content: center;
  }

  /* Popover ::backdrops are not hit-tested. This manual top-layer popover is
   * both the visible backdrop and the interaction blocker. */
  [data-lexxy-mobile-modal-backdrop] {
    background: rgba(15, 23, 42, 0.35);
    block-size: 100dvh;
    border: 0;
    inline-size: 100vw;
    inset: 0;
    margin: 0;
    max-block-size: none;
    max-inline-size: none;
    overscroll-behavior: contain;
    padding: 0;
    pointer-events: auto;
    position: fixed;
    touch-action: none;
  }
}


lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-lexxy-floating-dropdown] {
  inline-size: var(--lexxy-dropdown-inline-size);
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] {
  --link-dropdown-control-bg: #fff;
  --link-dropdown-control-border: var(--lexxy-color-border);
  --link-dropdown-control-border-focus: #404040;
  --link-dropdown-control-text: #2f3437;
  --link-dropdown-control-muted: #9b9a97;
  --link-dropdown-control-subtle: #6f6b64;
  --link-dropdown-primary-bg: #3f3f3f;
  --link-dropdown-primary-bg-hover: #2f2f2f;
  --link-dropdown-primary-text: #fff;
  --link-dropdown-secondary-bg: #f1f1ef;
  --link-dropdown-secondary-bg-hover: #e9e9e6;
  --link-dropdown-chip-bg-hover: #f1f1ef;
  --link-dropdown-divider: var(--lexxy-color-border);
  --link-dropdown-surface: #f7f7f5;

  background-color: #fff;
  border: 1px solid var(--link-dropdown-divider);
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(15, 15, 15, 0.1),
    0 1px 3px rgba(15, 15, 15, 0.06);
  box-sizing: border-box;
  color: var(--link-dropdown-control-text);
  flex-wrap: wrap;
  font-size: var(--lexxy-text-small);
  gap: 0.75rem;
  inset-inline-end: var(--lexxy-toolbar-spacing);
  inset-inline-start: var(--lexxy-toolbar-spacing);
  padding: 0.65rem 0.75rem;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel][hidden] {
  display: none !important;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="url"] {
  background: var(--link-dropdown-control-bg);
  block-size: auto;
  border: 1px solid var(--link-dropdown-control-border);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--link-dropdown-control-text);
  flex: 2;
  font: inherit;
  font-size: 0.95rem;
  inline-size: 100%;
  line-height: inherit;
  min-block-size: 2.35rem;
  min-inline-size: 0;
  padding-block: 0;
  padding-inline: 0.65rem;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="url"]:focus {
  border-color: var(--link-dropdown-control-border-focus);
  box-shadow: none;
  outline: 0;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="url"]::placeholder {
  color: var(--link-dropdown-control-muted);
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] .lexxy-editor__toolbar-dropdown-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
  [data-dropdown-panel]
  .lexxy-editor__toolbar-dropdown-actions
  button {
  aspect-ratio: unset;
  block-size: auto;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  inline-size: auto;
  line-height: 1;
  min-block-size: 2.35rem;
  min-inline-size: 0;
  padding: 0.65rem 1rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="url"] {
    flex: 1 1 100%;
    min-inline-size: 100%;
  }

  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
    [data-dropdown-panel]
    .lexxy-editor__toolbar-dropdown-actions {
    flex: 1 1 100%;
    inline-size: 100%;
  }

  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
    [data-dropdown-panel]
    .lexxy-editor__toolbar-dropdown-actions
    button {
    flex: 1;
    inline-size: 0;
  }
}

lexxy-toolbar[overflowing]
  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
  [data-dropdown-panel]
  input[type="url"] {
  flex: 1 1 100%;
  min-inline-size: 100%;
}

lexxy-toolbar[overflowing]
  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
  [data-dropdown-panel]
  .lexxy-editor__toolbar-dropdown-actions {
  flex: 1 1 100%;
  inline-size: 100%;
}

lexxy-toolbar[overflowing]
  lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link
  [data-dropdown-panel]
  .lexxy-editor__toolbar-dropdown-actions
  button {
  flex: 1;
  inline-size: 0;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="link"] {
  background: var(--link-dropdown-primary-bg);
  border: 0;
  color: var(--link-dropdown-primary-text);
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="link"]:hover {
  background: var(--link-dropdown-primary-bg-hover);
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="unlink"] {
  background: transparent;
  border: 1px solid var(--link-dropdown-control-border);
  color: var(--link-dropdown-control-subtle);
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="unlink"]:hover {
  background: var(--link-dropdown-secondary-bg);
  color: var(--link-dropdown-control-text);
}

.lexxy-dialog-btn {
  aspect-ratio: unset;
  block-size: auto;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0.375rem;
  inline-size: 100%;
  line-height: 1;
  min-block-size: 2.35rem;
  min-inline-size: 0;
  padding: 0.65rem 1rem;
  place-items: unset;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
}

/* Unlayered `display: inline-flex` otherwise beats Tailwind's `.hidden`. */
.lexxy-dialog-btn.hidden,
.lexxy-dialog-btn[hidden] {
  display: none;
}

.lexxy-dialog-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lexxy-dialog-btn--primary {
  background: #3f3f3f;
  border: 0;
  color: #fff;
}

.lexxy-dialog-btn--primary:hover:not(:disabled) {
  background: #2f2f2f;
}

.lexxy-dialog-btn--secondary {
  background: transparent;
  border: 1px solid var(--lexxy-color-border, #d4d4d4);
  color: #6f6b64;
}

.lexxy-dialog-btn--secondary:hover:not(:disabled) {
  background: #f1f1ef;
  color: #2f3437;
}

html.dark .lexxy-dialog-btn--primary {
  background: #e5e5e5;
  color: #171717;
}

html.dark .lexxy-dialog-btn--primary:hover:not(:disabled) {
  background: #fafafa;
}

html.dark .lexxy-dialog-btn--secondary {
  border-color: #525252;
  color: #b4b4b0;
}

html.dark .lexxy-dialog-btn--secondary:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.08);
  color: #e5e5e5;
}

/* Format & highlight toolbar menus */
lexxy-toolbar-dropdown [data-dropdown-panel],
lexxy-highlight-dropdown [data-dropdown-panel] {
  --menu-dropdown-bg: #fff;
  --menu-dropdown-border: var(--lexxy-color-border);
  --menu-dropdown-text: #2f3437;
  --menu-dropdown-text-muted: #6f6b64;
  --menu-dropdown-hover: #f1f1ef;
  --menu-dropdown-selected: #e9e9e6;
  --menu-dropdown-divider: var(--lexxy-color-border);
  --menu-dropdown-reset-bg: #f1f1ef;
  --menu-dropdown-reset-hover: #e9e9e6;
  --menu-dropdown-swatch-size: 1.5rem;

  background-color: var(--menu-dropdown-bg);
  border: 1px solid var(--menu-dropdown-border);
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(15, 15, 15, 0.09),
    0 1px 3px rgba(15, 15, 15, 0.05);
  box-sizing: border-box;
  color: var(--menu-dropdown-text);
  gap: 0.15rem;
  min-inline-size: 0;
  padding: 0.3rem;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list {
  border-start-start-radius: 8px;
  flex-direction: column;
  font-size: 0.85rem;
  inline-size: max-content;
  min-inline-size: 10rem;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button {
  align-items: center;
  background-color: transparent;
  border-radius: 6px;
  color: var(--menu-dropdown-text);
  display: flex;
  font: inherit;
  font-size: inherit;
  gap: 0.45rem;
  inline-size: 100%;
  line-height: 1.2;
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button:hover {
  background-color: var(--menu-dropdown-hover);
  opacity: 1;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button[aria-pressed="true"] {
  background-color: var(--menu-dropdown-selected);
  font-weight: 600;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button[aria-pressed="true"]:hover {
  background-color: var(--menu-dropdown-hover);
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button svg {
  block-size: 0.95rem;
  flex-shrink: 0;
  inline-size: 0.95rem;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list button span {
  font-size: inherit;
}

lexxy-toolbar-dropdown [data-dropdown-panel].lexxy-editor__toolbar-dropdown-list .lexxy-editor__toolbar-separator {
  background: var(--menu-dropdown-divider);
  margin-block: 0.15rem;
}

lexxy-editor .lexxy-editor__toolbar-dropdown.lexxy-editor__toolbar-dropdown--highlight [data-dropdown-panel] {
  --menu-dropdown-swatch-gap: 0.25rem;
  border-start-start-radius: 8px;
  inline-size: max-content;
  max-inline-size: none;
}

lexxy-editor
  .lexxy-editor__toolbar-dropdown.lexxy-editor__toolbar-dropdown--highlight
  [data-dropdown-panel]
  .lexxy-highlight-colors {
  gap: var(--menu-dropdown-swatch-gap);
  grid-template-columns: repeat(var(--max-colors), var(--menu-dropdown-swatch-size));
  inline-size: max-content;
}

lexxy-highlight-dropdown.lexxy-editor__toolbar-dropdown--highlight [data-dropdown-panel] {
  --menu-dropdown-swatch-gap: 0.25rem;
  border-start-start-radius: 8px;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.35rem;
  inline-size: max-content;
  max-inline-size: none;
  padding: 0.4rem;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors {
  gap: var(--menu-dropdown-swatch-gap);
  grid-template-columns: repeat(var(--max-colors), var(--menu-dropdown-swatch-size));
  inline-size: max-content;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors button {
  aspect-ratio: 1;
  block-size: var(--menu-dropdown-swatch-size);
  border-radius: 6px;
  inline-size: 100%;
  min-block-size: var(--menu-dropdown-swatch-size);
  min-inline-size: var(--menu-dropdown-swatch-size);
  overflow: hidden;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors button:hover {
  opacity: 0.85;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--menu-dropdown-text) inset;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors button:after {
  font-size: 0.7rem;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-editor__toolbar-dropdown-reset {
  aspect-ratio: unset;
  background-color: var(--menu-dropdown-reset-bg);
  block-size: auto;
  border: 0;
  border-radius: 6px;
  color: var(--menu-dropdown-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  inline-size: 100%;
  line-height: 1.2;
  min-block-size: 0;
  padding: 0.35rem 0.5rem;
  text-align: center;
}

lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-editor__toolbar-dropdown-reset:hover:not([disabled]) {
  background-color: var(--menu-dropdown-reset-hover);
  color: var(--menu-dropdown-text);
  opacity: 1;
}

.dark lexxy-toolbar [data-dropdown-panel] {
  background-color: #2f2f2f;
  border-color: var(--lexxy-color-border);
  color: #fafafa;
}

.dark lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] {
  --link-dropdown-control-bg: #303030;
  --link-dropdown-control-border: var(--lexxy-color-border);
  --link-dropdown-control-border-focus: #dedede;
  --link-dropdown-control-text: #e5e5e5;
  --link-dropdown-control-muted: #9b9a97;
  --link-dropdown-control-subtle: #b4b4b0;
  --link-dropdown-primary-bg: #e5e5e5;
  --link-dropdown-primary-bg-hover: #fafafa;
  --link-dropdown-primary-text: #171717;
  --link-dropdown-secondary-bg: rgba(255, 255, 255, 0.05);
  --link-dropdown-secondary-bg-hover: rgba(255, 255, 255, 0.08);
  --link-dropdown-chip-bg-hover: #353535;
  --link-dropdown-divider: var(--lexxy-color-border);
  --link-dropdown-surface: #303030;

  background-color: #262626;
  border-color: var(--lexxy-color-border);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  color: #e5e5e5;
}

.dark lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="unlink"]:hover {
  background: #4a4a4a;
  border-color: #6a6a6a;
  color: #f5f5f5;
}

.dark lexxy-toolbar-dropdown [data-dropdown-panel],
.dark lexxy-highlight-dropdown [data-dropdown-panel] {
  --menu-dropdown-bg: #262626;
  --menu-dropdown-border: var(--lexxy-color-border);
  --menu-dropdown-text: #e5e5e5;
  --menu-dropdown-text-muted: #b4b4b0;
  --menu-dropdown-hover: rgba(255, 255, 255, 0.06);
  --menu-dropdown-selected: rgba(255, 255, 255, 0.1);
  --menu-dropdown-divider: var(--lexxy-color-border);
  --menu-dropdown-reset-bg: rgba(255, 255, 255, 0.06);
  --menu-dropdown-reset-hover: rgba(255, 255, 255, 0.1);

  background-color: var(--menu-dropdown-bg);
  border-color: var(--menu-dropdown-border);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    0 1px 3px rgba(0, 0, 0, 0.16);
  color: var(--menu-dropdown-text);
}

.dark lexxy-highlight-dropdown [data-dropdown-panel] .lexxy-highlight-colors button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #dedede inset;
}

.dark
  lexxy-highlight-dropdown
  [data-dropdown-panel]
  .lexxy-highlight-colors
  button[data-style="background-color"]:after {
  color: #fafafa;
}

lexxy-editor figure.horizontal-divider {
  inline-size: 100%;
  position: relative;
}

lexxy-editor figure.horizontal-divider.node--selected {
  outline-color: var(--lexxy-color-selected-dark);
}

lexxy-editor.lexxy-content figure.horizontal-divider hr {
  border: 0;
  border-block-end: 1px solid var(--lexxy-color-border);
  inline-size: 100%;
  margin: 0;
}

lexxy-editor figure.horizontal-divider lexxy-node-delete-button {
  inset-block-start: 50%;
  inset-inline-end: 0;
  inset-inline-start: auto;
  transform: translateY(-50%);
}

lexxy-editor figure.horizontal-divider lexxy-node-delete-button,
lexxy-editor figure.horizontal-divider lexxy-node-delete-button .lexxy-node-delete {
  color: #fff;
}

lexxy-editor figure.horizontal-divider lexxy-node-delete-button .lexxy-floating-controls__group {
  --button-size: 1.75rem;

  background-color: #171717;
}

lexxy-editor figure.horizontal-divider lexxy-node-delete-button .lexxy-node-delete svg {
  color: #fff;
  fill: currentColor;
}

@media (any-hover: hover) {
  lexxy-editor figure.horizontal-divider lexxy-node-delete-button .lexxy-node-delete:hover {
    background-color: #404040;
    color: #fff;
  }
}

.dark lexxy-editor.lexxy-content figure.horizontal-divider hr {
  border-block-end-color: var(--lexxy-color-border);
}

/* Icons on dark floating pills stay white; stroke SVGs ignore fill:currentColor. */
.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls,
.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls .lexxy-node-delete,
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls,
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt,
.dark lexxy-editor lexxy-image-tools.lexxy-floating-controls,
.dark lexxy-editor lexxy-image-tools.lexxy-floating-controls button,
.dark lexxy-editor .lexxy-floating-controls.button-edit-control,
.dark lexxy-editor .lexxy-floating-controls.button-edit-control .button-edit-button {
  color: #fff;
}

.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls .lexxy-node-delete svg,
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt svg,
.dark lexxy-editor lexxy-image-tools.lexxy-floating-controls svg,
.dark lexxy-editor .lexxy-floating-controls.button-edit-control svg {
  color: #fff;
  opacity: 1;
}

.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls .lexxy-node-delete svg [fill="none"]:not([stroke="none"]),
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt svg [fill="none"]:not([stroke="none"]),
.dark lexxy-editor lexxy-image-tools.lexxy-floating-controls svg [fill="none"]:not([stroke="none"]),
.dark lexxy-editor .lexxy-floating-controls.button-edit-control svg [fill="none"]:not([stroke="none"]) {
  fill: none;
  stroke: currentColor;
}

.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls .lexxy-node-delete svg [stroke="none"],
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt svg [stroke="none"],
.dark lexxy-editor lexxy-image-tools.lexxy-floating-controls svg [stroke="none"],
.dark lexxy-editor .lexxy-floating-controls.button-edit-control svg [stroke="none"] {
  stroke: none;
}

.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt svg [fill="currentColor"],
.dark lexxy-editor lexxy-image-alt-button.lexxy-floating-controls .lexxy-image-alt svg [data-stroke="none"] {
  fill: currentColor;
  stroke: none;
}

.dark lexxy-editor lexxy-node-delete-button.lexxy-floating-controls .lexxy-node-delete:hover {
  color: #fff;
}

lexxy-editor figure.attachment:has(.attachment__container > audio, > audio) {
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
}

lexxy-editor figure.attachment:has(.attachment__container.attachment__pdf-frame) {
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
}

lexxy-editor figure.attachment {
  position: relative;
}

lexxy-editor figure.attachment.attachment--image-small {
  width: min(16rem, 100%);
}

lexxy-editor figure.attachment.attachment--image-medium {
  width: min(32rem, 100%);
}

lexxy-editor figure.attachment.attachment--image-full {
  width: 100%;
}

lexxy-editor figure.attachment.attachment--image-full img,
lexxy-editor figure.attachment.attachment--image-full .attachment__container,
lexxy-editor figure.attachment.attachment--image-full .attachment__image-frame {
  width: 100%;
}

lexxy-editor figure.attachment.attachment--image-full img {
  height: auto;
  max-height: none;
  object-fit: unset;
}

/* Lexxy wraps editor images in .attachment__container, not the published
   .attachment__image-frame. Mirror the sponsor inset outline on both. */
lexxy-editor figure.attachment.attachment--preview img {
  border-radius: 1rem;
}

lexxy-editor
  figure.attachment.attachment--preview
  :is(.attachment__image-frame, .attachment__container:has(> img)) {
  border-radius: 1rem;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

lexxy-editor
  figure.attachment.attachment--image-full
  :is(.attachment__image-frame, .attachment__container:has(> img)) {
  display: block;
  width: 100%;
}

lexxy-editor
  figure.attachment.attachment--preview
  :is(.attachment__image-frame, .attachment__container:has(> img))::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.dark
  lexxy-editor
  figure.attachment.attachment--preview
  :is(.attachment__image-frame, .attachment__container:has(> img))::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

lexxy-editor figure.attachment.attachment--align-left {
  margin-left: 0;
  margin-right: auto;
}

lexxy-editor figure.attachment.attachment--align-center {
  margin-left: auto;
  margin-right: auto;
}

lexxy-editor figure.attachment.attachment--align-right {
  margin-left: auto;
  margin-right: 0;
}

lexxy-editor figure.attachment lexxy-node-delete-button,
lexxy-editor figure.attachment lexxy-image-alt-button {
  inset-block-start: 1.5ch;
  inset-inline-start: auto;
}

lexxy-editor figure.attachment lexxy-node-delete-button {
  inset-inline-end: 1.5ch;
}

lexxy-editor figure.attachment lexxy-image-alt-button {
  inset-inline-end: calc(1.5ch + var(--button-size) + 0.75ch);
}

lexxy-editor .lexxy-content__table-wrapper {
  border-radius: 0.5rem;
}

lexxy-editor table th,
lexxy-editor table td {
  border-color: var(--lexxy-color-table-cell-border);
}

html.dark lexxy-editor table,
.dark lexxy-editor table {
  background: transparent;
  color: inherit;
}

html.dark lexxy-editor table th,
html.dark lexxy-editor table td,
.dark lexxy-editor table th,
.dark lexxy-editor table td {
  background-color: transparent;
  border-color: var(--lexxy-color-table-cell-border);
}

html.dark lexxy-editor table th.lexxy-content__table-cell--header,
html.dark lexxy-editor table td.lexxy-content__table-cell--header,
.dark lexxy-editor table th.lexxy-content__table-cell--header,
.dark lexxy-editor table td.lexxy-content__table-cell--header {
  background-color: var(--lexxy-color-table-header-bg);
}

/* Table floating controls — dark HUD in both themes; beat editor button canvas bg */
lexxy-editor lexxy-table-tools.lexxy-floating-controls,
lexxy-editor lexxy-table-tools.lexxy-floating-controls button,
lexxy-editor lexxy-table-tools.lexxy-floating-controls summary {
  background: transparent;
  color: #fafafa;
}

lexxy-editor lexxy-table-tools.lexxy-floating-controls svg {
  color: inherit;
  fill: currentColor;
}

lexxy-editor lexxy-table-tools.lexxy-floating-controls .lexxy-floating-controls__group,
lexxy-editor
  lexxy-table-tools.lexxy-floating-controls
  .lexxy-table-control
  .lexxy-table-control__more-menu
  .lexxy-table-control__more-menu-details,
lexxy-editor lexxy-table-tools.lexxy-floating-controls .lexxy-table-control__button--delete-table span {
  background-color: #171717;
  box-shadow: var(--lexxy-shadow);
  color: #fff;
}

lexxy-editor
  lexxy-table-tools.lexxy-floating-controls
  .lexxy-table-control
  .lexxy-table-control__more-menu
  .lexxy-table-control__more-menu-details {
  border: 1px solid rgb(255 255 255 / 15%);
  color: #fafafa;
  z-index: calc(var(--lexxy-z-popup) + 1);
}

lexxy-editor
  lexxy-table-tools.lexxy-floating-controls
  .lexxy-table-control
  .lexxy-table-control__more-menu
  .lexxy-table-control__more-menu-details
  .lexxy-table-control__button {
  aspect-ratio: unset;
  background: transparent;
  border-radius: 0.375rem;
  color: inherit;
}

lexxy-editor
  lexxy-table-tools.lexxy-floating-controls
  .lexxy-table-control
  .lexxy-table-control__more-menu
  .lexxy-table-control__more-menu-details
  .lexxy-table-control__button
  svg {
  fill: currentColor;
  opacity: 0.9;
}

lexxy-editor lexxy-table-tools.lexxy-floating-controls summary {
  box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.18);
}

@media (any-hover: hover) {
  lexxy-editor lexxy-table-tools.lexxy-floating-controls button:hover:not([aria-disabled="true"]),
  lexxy-editor lexxy-table-tools.lexxy-floating-controls summary:hover:not([aria-disabled="true"]),
  lexxy-editor lexxy-table-tools.lexxy-floating-controls details[open] > summary {
    background-color: #404040;
    color: #fafafa;
  }

  lexxy-editor
    lexxy-table-tools.lexxy-floating-controls
    .lexxy-table-control
    .lexxy-table-control__more-menu
    .lexxy-table-control__more-menu-details
    .lexxy-table-control__button:hover:not([aria-disabled="true"]) {
    background-color: #404040;
  }

  lexxy-editor
    lexxy-table-tools.lexxy-floating-controls
    .lexxy-table-control__button--delete-table:hover:not([aria-disabled="true"]),
  lexxy-editor
    lexxy-table-tools.lexxy-floating-controls
    .lexxy-table-control__button--delete-table:hover:not([aria-disabled="true"])
    svg {
    color: #fff;
    fill: currentColor;
  }
}

.dark lexxy-editor .lexxy-floating-controls:not(lexxy-callout-tools) {
  color: #fafafa;
}

.dark
  lexxy-editor
  .lexxy-floating-controls:not(lexxy-callout-tools)
  .lexxy-floating-controls__group {
  background-color: #171717;
}

.dark lexxy-toolbar {
  background-color: #404040;
  border-color: #525252;
}

lexxy-toolbar .lexxy-editor__toolbar-button:hover,
lexxy-toolbar .lexxy-editor__toolbar-button:active,
lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"],
lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"] {
  background: #f5f5f5;
}

lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"]:hover,
lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"]:hover {
  background: #e5e5e5;
}

.dark lexxy-toolbar .lexxy-editor__toolbar-button:hover,
.dark lexxy-toolbar .lexxy-editor__toolbar-button:active,
.dark lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"],
.dark lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"] {
  background: #525252;
}

.dark lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"]:hover,
.dark lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"]:hover {
  background: #737373;
}

lexxy-highlight-dropdown button,
.lexxy-highlight-button,
.lexxy-code-language-picker {
  line-height: normal;
}

.lexxy-code-language-picker {
  width: auto;
}

.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0 !important;
}

.lexxy-content__italic {
  font-style: italic;
}

.lexxy-content__bold {
  font-weight: bold;
}

.lexxy-content__strikethrough {
  text-decoration: line-through;
}

.lexxy-content__underline {
  text-decoration: underline;
}

.lexxy-content__strikethrough.lexxy-content__underline {
  text-decoration: line-through underline;
}

/* Lexxy uses <mark> for text color/background. Reset the browser default yellow
   highlight when a custom class replaces the default lexxy-content class. */
lexxy-editor mark,
:where(.trix-content, .lexxy-content) mark,
:where(.lexxy-content) .lexxy-content__highlight {
  background-color: transparent;
}

/* Background-only highlights: no text color property → white on dark washes.
   Note: [style*="color: var"] falsely matches "background-color: var(...)" so we
   check for a dedicated color: declaration instead. */
.dark lexxy-editor mark[style*="background-color"]:not([style^="color:"]):not([style*="; color:"]),
.dark
  :where(.trix-content, .lexxy-content)
  mark[style*="background-color"]:not([style^="color:"]):not([style*="; color:"]) {
  color: #ffffff;
}

/* iOS Safari zooms the page when a focused field is under 16px. Cover editor
   chrome, portaled popovers/modals, and CodeMirror (not a native input). */
@media (max-width: 639px) {
  lexxy-editor
    :is(input, textarea, select):not(
      [type="checkbox"],
      [type="radio"],
      [type="file"],
      [type="hidden"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="image"],
      [type="range"],
      [type="color"]
    ),
  lexxy-link-dropdown :is(input, textarea, select),
  .lexxy-callout-tools__icon-popover :is(input, textarea, select),
  .lexxy-giphy-search input,
  .lexxy-site-modal
    :is(input, textarea, select):not(
      [type="checkbox"],
      [type="radio"],
      [type="file"],
      [type="hidden"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="image"],
      [type="range"],
      [type="color"]
    ),
  .lexxy-custom-code-editor .cm-content,
  .lexxy-custom-code-editor .cm-scroller {
    font-size: 1rem !important;
  }
}
/* --------------------------------------------------------------------------
/* Prompt */

:where(.lexxy-prompt-menu) {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-padding: 0.5ch;

  --lexxy-prompt-offset-x: 0;
  --lexxy-prompt-offset-y: 0;

  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-prompt-padding) * 2);
  box-shadow: var(--lexxy-shadow);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  list-style: none;
  inset-block-start: var(--lexxy-prompt-offset-y);
  inset-inline-start: var(--lexxy-prompt-offset-x);
  margin: 0;
  max-block-size: 200px;
  max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
  min-inline-size: 20ch;
  overflow: auto;
  padding: var(--lexxy-prompt-padding);
  position: absolute;
  visibility: hidden;
  z-index: var(--lexxy-z-popup);

  &[data-clipped-at-right] {
    inset-inline-start: unset;
    inset-inline-end: 1ch;
    max-inline-size: calc(100% - 1ch);
  }

  &[data-clipped-at-bottom] {
    inset-block-start: unset;
    inset-block-end: var(--lexxy-prompt-offset-y);
  }
}

:where(.lexxy-prompt-menu--portaled) {
  --lexxy-prompt-padding: 0.375rem;
  background-color: #fff;
  border: 1px solid var(--lexxy-color-border);
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(15, 15, 15, 0.1),
    0 1px 3px rgba(15, 15, 15, 0.06);
  color: #2f3437;
  font-family: Inter, InterVariable, ui-sans-serif, system-ui, sans-serif;
  inline-size: min(22rem, calc(100vw - 1rem));
  inset-block-start: var(--lexxy-prompt-offset-y);
  inset-inline-start: var(--lexxy-prompt-offset-x);
  max-block-size: min(22rem, calc(100vh - 1rem));
  max-inline-size: min(22rem, calc(100vw - 1rem));
  min-inline-size: min(16rem, calc(100vw - 1rem));
  overflow: auto;
  padding: 0.375rem;
  position: fixed;
  z-index: calc(var(--lexxy-z-popup) + 1);
}

:where(.lexxy-prompt-menu--portaled)::-webkit-scrollbar {
  inline-size: 12px;
}

:where(.lexxy-prompt-menu--portaled)::-webkit-scrollbar-thumb {
  background-color: rgba(55, 53, 47, 0.24);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

:where(.lexxy-prompt-menu--portaled[hidden]) {
  display: none;
}

:where(.lexxy-prompt-menu--visible[data-anchored]) {
  visibility: initial;
}

:where(.lexxy-prompt-menu__item) {
  align-items: center;
  border-radius: var(--lexxy-radius);
  cursor: pointer;
  display: flex;
  gap: var(--lexxy-prompt-padding);
  padding: var(--lexxy-prompt-padding);

  &:hover {
    background-color: var(--lexxy-color-ink-lightest);
  }

  &[aria-selected] {
    background-color: var(--lexxy-color-selected);
  }

  img {
    block-size: var(--lexxy-prompt-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--lexxy-prompt-avatar-size);
    margin: 0;
  }

  + & {
    margin-top: 2px;
  }
}

:where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item) {
  border-radius: 6px;
  color: inherit;
  min-block-size: 2.25rem;
  padding: 0.45rem 0.55rem;
}

:where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item:hover),
:where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item[aria-selected]) {
  background-color: #f1f1ef;
}

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--lexxy-color-ink-medium);
  padding: var(--lexxy-prompt-padding);
}

:where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item--empty) {
  color: #9b9a97;
  padding: 0.2rem 0.65rem;
  min-block-size: 1.75rem;
}

.dark :where(.lexxy-prompt-menu--portaled) {
  background-color: #262626;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  color: #e5e5e5;
}

.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item:hover),
.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item[aria-selected]) {
  background-color: #353535;
}

.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item--empty) {
  color: #9b9a97;
}

.lexxy-mention-prompt-item {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  min-inline-size: 0;
  inline-size: 100%;
}

.lexxy-mention-prompt-avatar {
  block-size: 1rem;
  border-radius: 9999px;
  flex-shrink: 0;
  inline-size: 1rem;
  margin: 0;
  object-fit: cover;
}

.lexxy-mention-prompt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lexxy-mention-menu.lexxy-prompt-menu--portaled {
  /* Above sticky community toolbars (z-index: 10/30) inside the same dialog. */
  --lexxy-slash-footer-size: 0px;
  z-index: calc(var(--lexxy-z-popup) + 50);
}

.lexxy-slash-menu__content.lexxy-mention-menu__content {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  grid-column: 2 / -1;
  inline-size: 100%;
  justify-content: space-between;
}

.lexxy-mention-prompt-badge {
  align-items: center;
  background-color: var(--color-neutral-100, #f5f5f5);
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  border-radius: 0.375rem;
  color: var(--color-neutral-700, #404040);
  display: inline-flex;
  flex-shrink: 0;
  height: 1.25rem;
  justify-content: center;
  margin-inline-start: 0.25rem;
  width: 1.25rem;
}

.dark .lexxy-mention-prompt-badge,
.lexxy-mention-prompt-badge:where(.dark, .dark *) {
  background-color: var(--color-neutral-700, #404040);
  border-color: var(--color-neutral-600, #525252);
  color: var(--color-neutral-200, #e5e5e5);
}

.lexxy-mention-prompt-badge svg {
  display: block;
  height: 0.75rem;
  width: 0.75rem;
}

.lexxy-slash-menu__icon.lexxy-mention-menu__avatar .lexxy-mention-prompt-avatar {
  block-size: 1rem;
  inline-size: 1rem;
}

.lexxy-mention-menu__loading,
.lexxy-mention-menu__empty {
  pointer-events: none;
}

.lexxy-mention-menu__empty-icon {
  color: #9ca3af;
}

.lexxy-mention-menu__spinner {
  animation: lexxy-mention-spinner 0.75s linear infinite;
  color: #9ca3af;
}

.lexxy-mention-menu__spinner-track {
  opacity: 0.25;
}

.lexxy-mention-menu__spinner-head {
  opacity: 0.75;
}

@keyframes lexxy-mention-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Mentions may still be stored as application/octet-stream from older saves,
   so match both the mention content-type and any attachment wrapping .lexxy-mention. */
:is(.trix-content, .lexxy-content, .prose)
  :is(
    action-text-attachment[content-type="application/vnd.actiontext.mention"],
    action-text-attachment:has(.lexxy-mention)
  )
  .lexxy-mention,
:is(.trix-content, .lexxy-content, .prose)
  :is(
    action-text-attachment[content-type="application/vnd.actiontext.mention"],
    action-text-attachment:has(.lexxy-mention)
  )
  .lexxy-mention
  a {
  align-items: baseline;
  line-height: 1;
  max-block-size: 1lh;
  vertical-align: baseline;
}

:is(.trix-content, .lexxy-content, .prose) .lexxy-mention a,
:is(.trix-content, .lexxy-content, .prose) .lexxy-mention a:hover,
:is(.trix-content, .lexxy-content, .prose) .lexxy-mention a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:is(.trix-content, .lexxy-content) img.lexxy-mention-avatar {
  /* Images baseline to their bottom edge; center against the text metrics. */
  align-self: center;
  block-size: 1em;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  inline-size: 1em;
  margin: 0;
  max-block-size: 1em;
  object-fit: cover;
}

lexxy-editor
  :is(
    action-text-attachment[content-type="application/vnd.actiontext.mention"],
    action-text-attachment:has(.lexxy-mention)
  )
  lexxy-node-delete-button {
  inset-block-start: 50%;
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 0.25rem);
  transform: translateY(-50%);
}

lexxy-editor
  :is(
    action-text-attachment[content-type="application/vnd.actiontext.mention"],
    action-text-attachment:has(.lexxy-mention)
  )
  lexxy-node-delete-button
  .lexxy-floating-controls__group {
  --button-size: 1lh;

  background-color: var(--lexxy-color-ink);
  /* Match the circular delete button so hover red doesn't leave black corners. */
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
}

.dark
  lexxy-editor
  :is(
    action-text-attachment[content-type="application/vnd.actiontext.mention"],
    action-text-attachment:has(.lexxy-mention)
  )
  lexxy-node-delete-button
  .lexxy-floating-controls__group {
  background-color: #171717;
}

:where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item--empty) {
  color: #9b9a97;
  padding: 0.2rem 0.65rem;
  min-block-size: 1.75rem;
}

.dark :where(.lexxy-prompt-menu--portaled) {
  background-color: #262626;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  color: #e5e5e5;
}

.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item:hover),
.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item[aria-selected]) {
  background-color: #353535;
}

.dark :where(.lexxy-prompt-menu--portaled .lexxy-prompt-menu__item--empty) {
  color: #9b9a97;
}
/* Slash command menu */
:where(.lexxy-slash-menu--portaled) {
  --lexxy-slash-fade-size: 1.75rem;
  --lexxy-slash-footer-size: calc(1.75rem + 0.7rem + 1px);
  --lexxy-slash-menu-background: #fff;

  display: flex;
  flex-direction: column;
  inline-size: min(17.5rem, calc(100vw - 1rem));
  max-block-size: min(17.5rem, calc(100vh - 1rem));
  max-inline-size: min(17.5rem, calc(100vw - 1rem));
  min-inline-size: min(14rem, calc(100vw - 1rem));
  overflow: hidden;
  padding: 0;
}

:where(.lexxy-slash-menu--portaled)::before,
:where(.lexxy-slash-menu--portaled)::after {
  block-size: var(--lexxy-slash-fade-size);
  content: "";
  inline-size: calc(100% - 12px);
  inset-inline-start: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

:where(.lexxy-slash-menu--portaled)::before {
  background: linear-gradient(to bottom, var(--lexxy-slash-menu-background), transparent);
  inset-block-start: 0;
}

:where(.lexxy-slash-menu--portaled)::after {
  background: linear-gradient(to top, var(--lexxy-slash-menu-background), transparent);
  inset-block-end: var(--lexxy-slash-footer-size);
}

:where(.lexxy-slash-menu--portaled[data-overflow-y-start])::before,
:where(.lexxy-slash-menu--portaled[data-overflow-y-end])::after {
  opacity: 1;
}

.lexxy-slash-menu--portaled {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

:where(.lexxy-slash-menu__options) {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  min-block-size: 0;
  overflow: auto;
  padding: 0.35rem;
}

:where(.lexxy-slash-menu__options[hidden]) {
  display: none;
}

:where(.lexxy-slash-menu__options)::-webkit-scrollbar {
  inline-size: 12px;
}

:where(.lexxy-slash-menu__options)::-webkit-scrollbar-thumb {
  background-color: rgba(55, 53, 47, 0.24);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.dark :where(.lexxy-slash-menu--portaled)::-webkit-scrollbar-thumb,
.dark :where(.lexxy-slash-menu__options)::-webkit-scrollbar-thumb {
  background-color: rgba(229, 229, 229, 0.32);
}

.dark :where(.lexxy-slash-menu--portaled) {
  --lexxy-slash-menu-background: #262626;
}

:where(.lexxy-slash-menu__footer) {
  border-block-start: 1px solid var(--lexxy-color-border);
  flex-shrink: 0;
  padding: 0.35rem;
}

.lexxy-slash-menu--portaled[data-matches="0"] :where(.lexxy-slash-menu__footer) {
  border-block-start: 0;
}

.lexxy-slash-menu__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.5rem;
  inline-size: 100%;
  justify-content: space-between;
  min-block-size: 1.75rem;
  padding: 0.2rem 0.65rem;
  text-align: start;
}

.lexxy-slash-menu__close:hover,
.lexxy-slash-menu__close[aria-selected="true"] {
  background-color: #eeeeec;
}

.dark .lexxy-slash-menu__close:hover,
.dark .lexxy-slash-menu__close[aria-selected="true"] {
  background-color: #3a3a3a;
}

.lexxy-slash-menu--portaled[data-keyboard-nav] .lexxy-slash-menu__close:not([aria-selected="true"]):hover {
  background-color: transparent;
}

.dark .lexxy-slash-menu--portaled[data-keyboard-nav] .lexxy-slash-menu__close:not([aria-selected="true"]):hover {
  background-color: transparent;
}

.lexxy-slash-menu__close-label {
  color: var(--lexxy-color-text-subtle);
  font-size: 0.82rem;
  font-weight: 500;
}

.lexxy-slash-menu__close .lexxy-slash-menu__shortcut {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.7;
  text-transform: lowercase;
}

:where(.lexxy-slash-menu--portaled.lexxy-prompt-menu--portaled) {
  overflow: hidden;
  padding: 0;
}

.lexxy-slash-menu--portaled .lexxy-prompt-menu__item:hover,
.lexxy-slash-menu--portaled .lexxy-prompt-menu__item[aria-selected] {
  background-color: #eeeeec;
}

.lexxy-slash-menu--portaled .lexxy-prompt-menu__item.lexxy-slash-menu__item {
  min-block-size: 1.75rem;
  padding: 0.2rem 0.65rem;
}

:where(.lexxy-prompt-menu--portaled) .lexxy-slash-menu--portaled .lexxy-prompt-menu__item {
  min-block-size: 1.75rem;
  padding: 0.2rem 0.65rem;
}

.dark .lexxy-slash-menu--portaled .lexxy-prompt-menu__item:hover,
.dark .lexxy-slash-menu--portaled .lexxy-prompt-menu__item[aria-selected] {
  background-color: #3a3a3a;
}

.lexxy-slash-menu--portaled[data-keyboard-nav] .lexxy-prompt-menu__item:not([aria-selected]):hover {
  background-color: transparent;
}

.dark .lexxy-slash-menu--portaled[data-keyboard-nav] .lexxy-prompt-menu__item:not([aria-selected]):hover {
  background-color: transparent;
}

:where(.lexxy-slash-menu__item) {
  align-items: center;
  display: grid;
  gap: 0.35rem;
}

.lexxy-slash-menu__item {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  min-block-size: 1.75rem;
  padding: 0.2rem 0.65rem;
}

:where(.lexxy-slash-menu__icon) {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  inline-size: 1rem;
  justify-content: center;
  line-height: 1;
}

.lexxy-slash-menu__icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  block-size: 1rem;
  inline-size: 1rem;
  justify-content: center;
  line-height: 1;
}

.lexxy-slash-menu__icon svg {
  block-size: 0.875rem;
  inline-size: 0.875rem;
}

:where(.lexxy-slash-menu__content) {
  display: grid;
  min-inline-size: 0;
}

.lexxy-slash-menu__content {
  display: grid;
  min-inline-size: 0;
}

:where(.lexxy-slash-menu__label) {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
}

.lexxy-slash-menu__label {
  color: inherit;
  font-weight: 500;
  line-height: 1.25;
}

:where(.lexxy-slash-menu__description) {
  color: #6f6b64;
  display: none;
  font-size: 0.86rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lexxy-slash-menu__description {
  color: var(--lexxy-color-text-subtle);
  display: none;
  font-size: var(--lexxy-text-small);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.lexxy-slash-menu__shortcut) {
  color: #9b9a97;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  min-inline-size: 1.25rem;
  text-align: end;
}

.lexxy-slash-menu__shortcut {
  color: var(--lexxy-color-text-subtle);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  min-inline-size: 1.25rem;
  opacity: 0.7;
  text-align: end;
}

.dark :where(.lexxy-slash-menu__description) {
  color: #9b9a97;
}

.dark :where(.lexxy-slash-menu__shortcut) {
  color: #858585;
}

.lexxy-slash-menu__item.lexxy-mention-menu__item {
  grid-template-columns: 1rem minmax(0, 1fr);
}
:where(lexxy-editor) {
  .lexxy-callout > .lexxy-callout__icon-trigger {
    background: transparent;
    display: inline-flex;
    inline-size: auto;
    line-height: 1;
    min-block-size: 0;
    min-inline-size: 0;
    padding: 0;
    margin-top: 0;

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: rgba(0, 0, 0, 0.06);
      }
    }
  }

  .dark & .lexxy-callout > .lexxy-callout__icon-trigger {
    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Callout tools */
}

:where(lexxy-editor) lexxy-callout-tools {
  flex-direction: row;
  gap: 0.25ch;
  inset-inline-start: var(--lexxy-editor-padding);
  min-inline-size: 162px;
  transform: translate(-50%, -120%);

  .lexxy-callout-tools__bar {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    inline-size: fit-content;
    max-inline-size: min(92cqi, 29rem);
    min-inline-size: 162px;
    padding-inline: 0.35ch;
  }

  .lexxy-callout-tools__tool-row {
    align-items: center;
    display: grid;
    gap: 0.5ch;
    grid-template-columns: 1.35rem max-content;
    max-inline-size: 100%;
  }

  .lexxy-callout-tools__delete-section {
    align-items: center;
    display: flex;
  }

  .lexxy-callout-tools__secondary-row {
    align-items: center;
    gap: 0.5ch;
  }

  .lexxy-callout-tools__delete-button,
  .lexxy-callout-tools__icon-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--lexxy-radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    height: fit-content;
    flex: 0 0 auto;
    font-size: 0.875rem;
    justify-content: center;
    min-block-size: 1.35rem;
    min-inline-size: 1.35rem;
    padding: 0.125rem;
  }

  .lexxy-callout-tools__delete-button {
    svg {
      block-size: 0.875rem;
      fill: currentColor;
      flex: 0 0 auto;
      inline-size: 0.875rem;
    }
  }

  .lexxy-callout-tools__icon-section {
    position: relative;
  }

  .lexxy-callout-tools__icon-trigger {
    [data-callout-icon-preview] {
      align-items: center;
      block-size: 1rem;
      display: inline-flex;
      inline-size: 1rem;
      justify-content: center;
      line-height: 1;
    }

    svg {
      block-size: 0.875rem;
      fill: none;
      inline-size: 0.875rem;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &:hover {
      background: var(--lexxy-color-ink-lightest);
    }
  }

  .lexxy-callout-tools__icon-none {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.7;
  }

  .lexxy-callout-tools__icon-empty {
    align-items: center;
    border: 1px dashed rgba(250, 250, 250, 0.5);
    border-radius: 5px;
    color: rgba(250, 250, 250, 0.75);
    display: inline-flex;
    font-size: 0;
    inline-size: 1rem;
    justify-content: center;
    height: 100%;

    &::before {
      background: currentColor;
      block-size: 1px;
      content: "";
      inline-size: 0.55rem;
      transform: rotate(-45deg);
    }
  }

  .lexxy-callout-tools__icon-image {
    block-size: 1rem;
    border-radius: 0.2rem !important;
    inline-size: 1rem;
    object-fit: cover;
    border: none !important;
  }

  .lexxy-callout-tools__separator {
    align-self: stretch;
    background: var(--lexxy-color-ink-lighter);
    inline-size: 1px;
    margin-block: 0.35ch;
    opacity: 0.45;
  }

  .lexxy-callout-tools__color-section {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5ch;
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  .lexxy-callout-tools__color-label {
    color: var(--lexxy-color-ink-light);
    font-size: var(--lexxy-text-small);
    font-weight: 600;
    white-space: nowrap;
  }

  .lexxy-callout-tools__swatch-row {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    inline-size: fit-content;
  }

  .lexxy-callout-tools__swatch {
    aspect-ratio: 1;
    block-size: 1.35rem;
    border: 2px solid transparent;
    border-radius: 6px;
    color: var(--swatch-solid, var(--lexxy-color-ink));
    cursor: pointer;
    flex: 0 0 1.35rem;
    inline-size: 1.35rem;
    min-block-size: 1.35rem;
    min-inline-size: 1.35rem;
    padding: 0 !important;
    position: relative;
  }

  .lexxy-callout-tools__swatch-check,
  .lexxy-callout-tools__swatch-none-icon {
    block-size: 0.75rem;
    inline-size: 0.75rem;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .lexxy-callout-tools__swatch-check {
    display: none;
  }

  .lexxy-callout-tools__swatch-none-icon {
    display: block;
    opacity: 0.75;
  }

  .lexxy-callout-tools__swatch[aria-selected="true"] .lexxy-callout-tools__swatch-check {
    display: block;
  }

  .lexxy-callout-tools__swatch--none[aria-selected="true"] .lexxy-callout-tools__swatch-none-icon {
    display: none;
  }

  .lexxy-callout-tools__color-section--background .lexxy-callout-tools__swatch:not(.lexxy-callout-tools__swatch--none) {
    background: var(--swatch-color);
  }

  .lexxy-callout-tools__color-section--border .lexxy-callout-tools__swatch:not(.lexxy-callout-tools__swatch--none) {
    background: transparent;
    border-color: var(--swatch-color);
  }

  @media (any-hover: hover) {
    .lexxy-callout-tools__color-section--background
      .lexxy-callout-tools__swatch:not(.lexxy-callout-tools__swatch--none):hover {
      background: color-mix(in oklch, var(--swatch-solid) 30%, transparent);
    }

    .lexxy-callout-tools__color-section--border
      .lexxy-callout-tools__swatch:not(.lexxy-callout-tools__swatch--none):hover {
      background: color-mix(in oklch, var(--swatch-solid) 20%, transparent);
      border-color: var(--swatch-color);
    }

    .lexxy-callout-tools__swatch--none:hover {
      background: color-mix(in oklch, var(--lexxy-color-ink) 10%, transparent);
    }
  }

  .lexxy-callout-tools__swatch--none {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.45);
    border: transparent;
  }

  @container (max-width: 42rem) {
    .lexxy-callout-tools__bar {
      align-items: stretch;
      gap: 0.4rem;
      inline-size: fit-content;
      max-inline-size: min(92cqi, 29rem);
      padding: 0.35rem;
    }

    .lexxy-callout-tools__tool-row {
      grid-template-columns: 1.35rem minmax(0, max-content);
    }

    .lexxy-callout-tools__color-section {
      min-inline-size: 0;
    }

    .lexxy-callout-tools__swatch-row {
      flex-wrap: wrap;
    }
  }
}

/* Portaled to document.body so the picker escapes editor/form stacking contexts. */
.lexxy-callout-tools__icon-popover {
  --callout-tools-tab-control-height: 2.25rem;
  --callout-tools-panel-height: 25rem;
  --callout-tools-control-bg: #fff;
  --callout-tools-control-bg-hover: #f7f7f5;
  --callout-tools-control-border: var(--lexxy-color-border);
  --callout-tools-control-border-focus: #404040;
  --callout-tools-control-focus-ring: rgba(15, 15, 15, 0.08);
  --callout-tools-control-text: #2f3437;
  --callout-tools-control-muted: #9b9a97;
  --callout-tools-control-subtle: #6f6b64;
  --callout-tools-primary-bg: #3f3f3f;
  --callout-tools-primary-bg-hover: #2f2f2f;
  --callout-tools-primary-bg-disabled: #d6d6d2;
  --callout-tools-primary-text: #fff;
  --callout-tools-icon-color: #5f5e59;
  background-color: #fff;
  border: 1px solid var(--lexxy-color-border);
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(15, 15, 15, 0.1),
    0 1px 3px rgba(15, 15, 15, 0.06);
  color: #2f3437;
  display: grid;
  font-family: Inter, InterVariable, ui-sans-serif, system-ui, sans-serif;
  gap: 0;
  inline-size: min(27rem, 90vw);
  overflow: hidden;
  position: fixed;
  z-index: var(--lexxy-z-popup);

  &[hidden],
  &.hidden,
  .lexxy-callout-tools__tab-panel.hidden,
  .lexxy-callout-tools__upload-empty.hidden,
  .lexxy-callout-tools__upload-preview.hidden {
    display: none;
  }

  :is(
    .lexxy-callout-tools__tabs button,
    .lexxy-callout-tools__remove-button,
    .lexxy-callout-tools__upload-inline-action,
    .lexxy-callout-tools__upload-cancel,
    .lexxy-callout-tools__upload-save,
    .lexxy-callout-tools__upload-dropzone
  ) {
    aspect-ratio: unset;
    block-size: auto;
    inline-size: auto;
    min-block-size: unset;
    min-inline-size: unset;

    > span:not(.lexxy-callout-tools__upload-empty):not(.lexxy-callout-tools__upload-preview):not(
        .lexxy-callout-tools__remove-label
      ):not(.lexxy-callout-tools__remove-icon) {
      display: revert;
    }
  }

  .lexxy-callout-tools__tab-bar {
    align-items: stretch;
    border-block-end: 1px solid var(--lexxy-color-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
  }

  .lexxy-callout-tools__tabs {
    align-items: stretch;
    display: flex;
    flex: 1;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .lexxy-callout-tools__tabs button,
  .lexxy-callout-tools__remove-button {
    align-items: center;
    align-self: stretch;
    background: transparent;
    block-size: var(--callout-tools-tab-control-height);
    border: 0;
    box-sizing: border-box;
    color: #7b776f;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.94rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1;
    min-block-size: var(--callout-tools-tab-control-height);
    min-inline-size: max-content;
    border-radius: 6px;
    padding-block: 0;
    padding-inline: 0.75rem;
    position: relative;
    white-space: nowrap;

    &[aria-selected="true"] {
      background: transparent;
      color: #2f3437;

      &::after {
        background: currentColor;
        block-size: 3px;
        border-radius: 999px;
        content: "";
        inline-size: calc(100% - 0.5rem);
        inset-block-end: 0;
        inset-inline-start: 0.25rem;
        position: absolute;
        margin-bottom: -0.55rem;
      }
    }

    &:hover {
      background: rgba(15, 15, 15, 0.05);
      color: #2f3437;
    }
  }

  .lexxy-callout-tools__remove-icon {
    display: none;

    svg {
      block-size: 1.125rem;
      flex: 0 0 auto;
      inline-size: 1.125rem;
    }
  }

  @media (max-width: 30rem) {
    .lexxy-callout-tools__tab-bar {
      padding: 0.5rem 0.5rem 0.4rem;
    }

    .lexxy-callout-tools__remove-button {
      min-inline-size: var(--callout-tools-tab-control-height);
      padding-inline: 0.5rem;
    }

    .lexxy-callout-tools__remove-label {
      display: none;
    }

    .lexxy-callout-tools__remove-icon {
      display: inline-flex;
    }
  }

  .lexxy-callout-tools__tab-panel {
    block-size: var(--callout-tools-panel-height);
    min-block-size: var(--callout-tools-panel-height);
    overflow: hidden;
    padding: 0.75rem;
  }

  .lexxy-callout-tools__tab-panel[data-icon-tab-panel="icons"]:not(.hidden),
  .lexxy-callout-tools__tab-panel[data-icon-tab-panel="upload"]:not(.hidden) {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .lexxy-callout-tools__icons-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 100%;
    padding: 0.5rem 0.75rem 0.75rem;
    position: relative;
  }

  .lexxy-callout-tools__emoji-picker {
    overflow: auto;

    em-emoji-picker {
      --color-border-over: rgba(0, 0, 0, 0.1);
      --color-border: rgba(0, 0, 0, 0.05);
      --em-rgb-background: 255, 255, 255;
      --font-family: Inter, InterVariable, ui-sans-serif, system-ui, sans-serif;
      --rgb-background: 255, 255, 255;
      --rgb-accent: 64, 64, 64;
      border: 0;
      block-size: calc(var(--callout-tools-panel-height) - 1.5rem);
      inline-size: 100%;
      max-inline-size: 100%;
      min-block-size: calc(var(--callout-tools-panel-height) - 1.5rem);
      position: static;
    }
  }

  &.lexxy-emoji-menu--portaled {
    --callout-tools-panel-height: 25rem;
    grid-template-columns: none;
    inline-size: min(27rem, 90vw);
    inset-block-start: var(--lexxy-prompt-offset-y);
    inset-inline-start: var(--lexxy-prompt-offset-x);
    max-block-size: min(25rem, calc(100vh - 1rem));
    max-inline-size: min(27rem, calc(100vw - 1rem));
    min-inline-size: min(18rem, calc(100vw - 1rem));
    padding: 0;
    z-index: calc(var(--lexxy-z-popup) + 1);
  }

  .lexxy-callout-tools__search-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
  }

  .lexxy-callout-tools__search {
    align-items: center;
    background: var(--callout-tools-control-bg);
    border: 1px solid var(--callout-tools-control-border);
    border-radius: 8px;
    color: var(--callout-tools-control-muted);
    display: flex;
    flex: 1;
    gap: 0.5rem;
    min-block-size: 2.35rem;
    padding-inline: 0.65rem;

    &:focus-within {
      border-color: var(--callout-tools-control-border-focus);
      box-shadow: none;
    }

    svg {
      block-size: 1.05rem;
      fill: currentColor;
      inline-size: 1.05rem;
    }

    input {
      background: transparent;
      border: 0;
      box-shadow: none;
      color: var(--callout-tools-control-text);
      flex: 1;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 400;
      min-inline-size: 0;
      outline: 0;
      padding: 0;

      &:focus {
        border: 0;
        box-shadow: none;
        outline: 0;
      }

      &::placeholder {
        color: var(--callout-tools-control-muted);
        font-weight: 400;
      }
    }
  }

  .lexxy-callout-tools__icon-random {
    align-items: center;
    background: transparent;
    border: 1px solid var(--callout-tools-control-border);
    border-radius: 8px;
    color: var(--callout-tools-control-subtle);
    display: inline-flex;
    justify-content: center;
    min-block-size: 2.35rem;
    min-inline-size: 2.35rem;
    padding: 0;

    svg {
      block-size: 1.05rem;
      fill: none;
      inline-size: 1.05rem;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
  }

  @media (max-width: 30rem) {
    .lexxy-callout-tools__tab-panel {
      padding: 0.65rem 0.5rem 0.5rem;
    }

    .lexxy-callout-tools__icon-random {
      display: none;
    }
  }

  .lexxy-callout-tools__icon-status {
    align-items: center;
    color: #9b9a97;
    display: flex;
    block-size: calc(var(--callout-tools-panel-height) - 1.5rem - 1.25rem - 2.35rem - 0.75rem);
    font-size: 0.85rem;
    inset-block-start: calc(0.5rem + 2.35rem + 0.75rem);
    inset-inline: 0.75rem;
    justify-content: center;
    min-block-size: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;

    &[hidden],
    &:empty {
      display: none;
    }
  }

  .lexxy-callout-tools__icon-grid {
    align-content: start;
    block-size: calc(var(--callout-tools-panel-height) - 1.5rem - 1.25rem - 2.35rem - 0.75rem);
    display: grid;
    gap: 0.25rem;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    max-block-size: none;
    overflow: auto;
    padding: 0.25rem 0.1rem 0.5rem;
    scrollbar-color: #a2a2a270 transparent;

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  @media (max-width: 30rem) {
    .lexxy-callout-tools__icon-grid {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  @media (max-width: 24rem) {
    .lexxy-callout-tools__icon-grid {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }

  @media (max-width: 21rem) {
    .lexxy-callout-tools__icon-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .lexxy-callout-tools__icon-button {
    align-items: center;
    aspect-ratio: 1;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #5f5e59;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-inline-size: 0;
    padding: 0.35rem;

    svg {
      block-size: 1.25rem;
      fill: none;
      inline-size: 1.25rem;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &[aria-selected="true"],
    &[data-highlighted],
    &:hover {
      background: #f1f1ef;
    }

    .lexxy-callout-tools__icon-grid[data-keyboard-nav] &:not([data-highlighted]):hover {
      background: transparent;
      box-shadow: none;
      color: var(--callout-tools-icon-color, #5f5e59);

      svg {
        opacity: 1;
      }
    }

    &[data-highlighted]:not([aria-selected="true"]) {
      box-shadow: none;
      color: #2f3437;
    }

    &[aria-selected="true"] {
      box-shadow:
        inset 0 0 0 1px rgba(47, 52, 55, 0.72),
        0 0 0 0px rgba(47, 52, 55, 0.08);
      color: #2f3437;
    }
  }

  .lexxy-callout-tools__upload-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.95rem;
    min-block-size: 100%;
    padding: 0.5rem 0.75rem 0.75rem;
    text-align: center;

    p {
      color: #9b9a97;
      font-size: 0.95rem;
      margin: 0;
    }
  }

  .lexxy-callout-tools__upload-dropzone {
    align-items: center;
    aspect-ratio: unset;
    background: var(--callout-tools-control-bg-hover);
    block-size: auto;
    border: 0;
    border-radius: 8px;
    color: var(--callout-tools-control-subtle);
    cursor: pointer;
    display: flex;
    inline-size: 100%;
    justify-content: center;
    min-block-size: 6rem;
    padding: 1.5rem;
    width: 100%;

    &:hover,
    &.is-dragging {
      background: #efefed;
      color: var(--callout-tools-control-text);
    }
  }

  .lexxy-callout-tools__upload-empty,
  .lexxy-callout-tools__upload-preview {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    min-inline-size: 0;
  }

  .lexxy-callout-tools__upload-empty-icon {
    display: inline-flex;

    svg {
      block-size: 1.35rem;
      fill: none;
      inline-size: 1.35rem;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
  }

  .lexxy-callout-tools__upload-preview {
    flex-direction: column;
    font-size: 0.86rem;
    overflow: hidden;

    img {
      block-size: 4rem;
      border-radius: 8px;
      inline-size: 4rem;
      object-fit: cover;
    }

    span {
      max-inline-size: 18rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .lexxy-callout-tools__upload-url {
    display: grid;
    gap: 0.35rem;
    text-align: start;

    span {
      color: var(--callout-tools-control-subtle);
      font-size: 0.82rem;
      font-weight: 600;
    }

    input {
      background: var(--callout-tools-control-bg);
      border: 1px solid var(--callout-tools-control-border);
      border-radius: 8px;
      color: var(--callout-tools-control-text);
      font: inherit;
      font-size: 0.95rem;
      min-block-size: 2.35rem;
      outline: 0;
      padding: 0 0.65rem;
      width: 100%;

      &:focus {
        border-color: var(--callout-tools-control-border-focus);
        box-shadow: none;
        outline: 0;
      }

      &::placeholder {
        color: var(--callout-tools-control-muted);
      }
    }
  }

  .lexxy-callout-tools__upload-hint {
    align-items: baseline;
    color: #9b9a97;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    min-block-size: 1rem;
  }

  .lexxy-callout-tools__upload-inline-action {
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: inline;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;

    &:hover {
      background: transparent;
      color: #5f5e59;
    }
  }

  .lexxy-callout-tools__upload-status {
    color: #9b9a97;
    min-block-size: 1rem;

    &[hidden],
    &:empty {
      display: none;
    }
  }

  .lexxy-callout-tools__upload-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-start: auto;
    padding-block-start: 0.25rem;
  }

  .lexxy-callout-tools__upload-cancel,
  .lexxy-callout-tools__upload-save {
    aspect-ratio: unset;
    block-size: auto;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    inline-size: auto;
    line-height: 1;
    font-size: 0.95rem;
    font-weight: 600;
    min-block-size: 2.35rem;
    min-inline-size: 5rem;
    padding: 0.65rem 1rem;
  }

  .lexxy-callout-tools__upload-cancel {
    background: #f1f1ef;
    color: var(--callout-tools-control-subtle);

    &:hover {
      background: #e9e9e6;
      color: var(--callout-tools-control-text);
    }
  }

  .lexxy-callout-tools__upload-save {
    background: var(--callout-tools-primary-bg);
    color: var(--callout-tools-primary-text);

    &:disabled {
      background: var(--callout-tools-primary-bg-disabled);
      cursor: default;
    }

    &:hover:not(:disabled) {
      background: var(--callout-tools-primary-bg-hover);
    }
  }
}

.dark .lexxy-callout-tools__icon-popover {
  --callout-tools-control-bg: #303030;
  --callout-tools-control-bg-hover: #353535;
  --callout-tools-control-border: var(--lexxy-color-border);
  --callout-tools-control-border-focus: #dedede;
  --callout-tools-control-focus-ring: rgba(255, 255, 255, 0.32);
  --callout-tools-control-text: #e5e5e5;
  --callout-tools-control-muted: #9b9a97;
  --callout-tools-control-subtle: #b4b4b0;
  --callout-tools-primary-bg: #e5e5e5;
  --callout-tools-primary-bg-hover: #fafafa;
  --callout-tools-primary-bg-disabled: #525252;
  --callout-tools-primary-text: #171717;
  --callout-tools-icon-color: #b4b4b0;
  background-color: #262626;
  border-color: var(--lexxy-color-border);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18);
  color: #e5e5e5;

  .lexxy-callout-tools__tab-bar {
    border-block-end-color: var(--lexxy-color-border);
  }

  .lexxy-callout-tools__tabs button,
  .lexxy-callout-tools__remove-button {
    color: #9b9a97;

    &[aria-selected="true"],
    &:hover {
      color: #e5e5e5;
    }
  }

  .lexxy-callout-tools__tabs button:hover,
  .lexxy-callout-tools__remove-button:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .lexxy-callout-tools__emoji-picker em-emoji-picker {
    --color-border: hsl(0deg 0% 25% / 80%);
    --color-border-over: hsl(0deg 0% 25% / 80%);
    --em-rgb-background: 38, 38, 38;
    --rgb-background: 38, 38, 38;
    --rgb-accent: 222, 222, 222;
  }

  .lexxy-callout-tools__search,
  .lexxy-callout-tools__upload-url input {
    background: var(--callout-tools-control-bg);
    border-color: var(--callout-tools-control-border);

    &:focus,
    &:focus-within {
      border-color: var(--callout-tools-control-border-focus);
      box-shadow: none;
    }
  }

  .lexxy-callout-tools__icon-random {
    border-color: var(--callout-tools-control-border);
    color: var(--callout-tools-control-subtle);

    &:hover {
      background: #4a4a4a;
      border-color: #6a6a6a;
      color: #f5f5f5;
    }
  }

  .lexxy-callout-tools__icon-button {
    color: #b4b4b0;

    &[aria-selected="true"],
    &[data-highlighted],
    &:hover {
      background: #3a3a3a;
    }

    .lexxy-callout-tools__icon-grid[data-keyboard-nav] &:not([data-highlighted]):hover {
      background: transparent;
      box-shadow: none;
      color: var(--callout-tools-icon-color, #b4b4b0);

      svg {
        opacity: 1;
      }
    }

    &[data-highlighted]:not([aria-selected="true"]) {
      box-shadow: none;
      color: #fafafa;
    }

    &[aria-selected="true"] {
      box-shadow:
        inset 0 0 0 1px rgba(250, 250, 250, 0.74),
        0 0 0 0px rgba(250, 250, 250, 0.12);
      color: #fafafa;
    }
  }

  .lexxy-callout-tools__upload-dropzone {
    background: var(--callout-tools-control-bg);
    color: var(--callout-tools-control-subtle);

    &:hover,
    &.is-dragging {
      background: #4a4a4a;
      color: #f5f5f5;
    }
  }

  .lexxy-callout-tools__upload-inline-action:hover {
    color: #e5e5e5;
  }

  .lexxy-callout-tools__upload-url input {
    color: var(--callout-tools-control-text);
  }

  .lexxy-callout-tools__upload-cancel {
    background: #353535;
    color: var(--callout-tools-control-subtle);

    &:hover {
      background: #4a4a4a;
      color: #f5f5f5;
    }
  }

  .lexxy-callout-tools__upload-save {
    background: var(--callout-tools-primary-bg);
    color: var(--callout-tools-primary-text);

    &:hover:not(:disabled) {
      background: var(--callout-tools-primary-bg-hover);
      color: var(--callout-tools-primary-text);
    }

    &:disabled {
      background: var(--callout-tools-primary-bg-disabled);
      color: var(--callout-tools-control-muted);
    }
  }
}

/* Callout floating controls — always dark chrome; beat vendored selector specificity */
lexxy-editor lexxy-callout-tools.lexxy-floating-controls,
lexxy-editor lexxy-callout-tools.lexxy-floating-controls button,
lexxy-editor lexxy-callout-tools.lexxy-floating-controls summary {
  color: #fafafa;
}

lexxy-editor lexxy-callout-tools.lexxy-floating-controls .lexxy-floating-controls__group {
  background-color: #171717;
  box-shadow: var(--lexxy-shadow);
}

.lexxy-callout-tools__icon-popover {
  background-color: #171717;
  border: 1px solid var(--lexxy-color-border);
  color: #fafafa;
  --callout-tools-icon-color: #b4b4b0;
  z-index: calc(var(--lexxy-z-popup) + 1);
}

lexxy-editor lexxy-callout-tools.lexxy-floating-controls summary {
  box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.18);
}

@media (any-hover: hover) {
  lexxy-editor
    lexxy-callout-tools.lexxy-floating-controls
    .lexxy-callout-tools__bar
    button:hover:not([aria-disabled="true"]):not(.lexxy-callout-tools__swatch),
  lexxy-editor
    lexxy-callout-tools.lexxy-floating-controls
    .lexxy-callout-tools__bar
    summary:hover:not([aria-disabled="true"]),
  lexxy-editor lexxy-callout-tools.lexxy-floating-controls .lexxy-callout-tools__bar details[open] > summary {
    background-color: #404040;
    color: #fafafa;
  }

  lexxy-editor lexxy-callout-tools.lexxy-floating-controls .lexxy-callout-tools__delete-button:hover,
  lexxy-editor lexxy-callout-tools.lexxy-floating-controls .lexxy-callout-tools__icon-trigger:hover,
  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-dropzone:hover {
    background-color: #525252;
  }

  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button:hover {
    background-color: #3a3a3a;
  }

  .lexxy-callout-tools__icon-popover
    .lexxy-callout-tools__icon-grid[data-keyboard-nav]
    .lexxy-callout-tools__icon-button:not([data-highlighted]):hover {
    background-color: transparent;
    box-shadow: none;
    color: var(--callout-tools-icon-color, #b4b4b0);

    svg {
      opacity: 1;
    }
  }
}

.lexxy-callout-tools__icon-popover,
.lexxy-callout-tools__icon-popover button,
.lexxy-callout-tools__icon-popover input {
  color: #2f3437;
}

.lexxy-callout-tools__icon-popover {
  background-color: #fff;
  border: 1px solid var(--lexxy-color-border);
  --callout-tools-icon-color: #5f5e59;
}

.lexxy-callout-tools__icon-popover[hidden],
.lexxy-callout-tools__icon-popover.hidden {
  display: none;
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__tabs button,
.lexxy-callout-tools__icon-popover .lexxy-callout-tools__remove-button,
.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-inline-action,
.lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-random,
.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-cancel {
  background-color: transparent;
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__tab-bar button {
  font-family: inherit;
  font-weight: 500;
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button,
.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-dropzone {
  color: #5f5e59;
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-cancel {
  background-color: var(--callout-tools-control-bg-hover, #f1f1ef);
  color: var(--callout-tools-control-subtle, #6f6b64);
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-save {
  background-color: var(--callout-tools-primary-bg, #3f3f3f);
  color: var(--callout-tools-primary-text, #fff);
}

.lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-save:disabled {
  background-color: var(--callout-tools-primary-bg-disabled, #d6d6d2);
  color: var(--callout-tools-control-muted, #9b9a97);
}

@media (any-hover: hover) {
  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__tabs button:hover,
  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__remove-button:hover {
    background-color: rgba(15, 15, 15, 0.05);
  }

  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button:hover:not([aria-disabled="true"]),
  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-random:hover:not([aria-disabled="true"]),
  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-dropzone:hover:not([aria-disabled="true"]) {
    background-color: #efefed;
    color: var(--callout-tools-control-text, #2f3437);
  }

  .lexxy-callout-tools__icon-popover
    .lexxy-callout-tools__icon-grid[data-keyboard-nav]
    .lexxy-callout-tools__icon-button:not([data-highlighted]):hover:not([aria-disabled="true"]) {
    background-color: transparent;
    box-shadow: none;
    color: var(--callout-tools-icon-color, #5f5e59);

    svg {
      opacity: 1;
    }
  }

  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-save:hover:not(:disabled) {
    background-color: var(--callout-tools-primary-bg-hover, #2f2f2f);
    color: var(--callout-tools-primary-text, #fff);
  }

  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-cancel:hover {
    background-color: var(--callout-tools-control-bg-hover, #e9e9e6);
    color: var(--callout-tools-control-text, #2f3437);
  }

  .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-save:hover:disabled {
    background-color: var(--callout-tools-primary-bg-disabled, #d6d6d2);
    color: var(--callout-tools-control-muted, #9b9a97);
  }
}

.dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__search:focus-within,
.dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-url input:focus {
  border-color: var(--callout-tools-control-border-focus, #dedede);
  box-shadow: none;
}

@media (any-hover: hover) {
  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__tabs button:hover,
  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__remove-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button:hover:not([aria-disabled="true"]) {
    background-color: #3a3a3a;
    color: var(--callout-tools-control-text, #e5e5e5);
  }

  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-random:hover:not([aria-disabled="true"]),
  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-dropzone:hover:not([aria-disabled="true"]),
  .dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__upload-cancel:hover {
    background-color: #4a4a4a;
    border-color: #6a6a6a;
    color: #f5f5f5;
  }
}

.dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button[aria-selected="true"],
.dark .lexxy-callout-tools__icon-popover .lexxy-callout-tools__icon-button[data-highlighted] {
  background-color: #3a3a3a;
  color: var(--callout-tools-control-text, #e5e5e5);
}

/* Callout / tip blocks */
:where(.trix-content, .lexxy-content) .lexxy-callout,
lexxy-editor .lexxy-callout {
  --callout-border: var(--callout-border-6);
  --callout-bg: transparent;
  --callout-icon-size: 1.125rem;
  --callout-first-line-height: 1.5em;
  --callout-icon-nudge: 0.1em;
  --callout-icon-offset: calc(
    (var(--callout-first-line-height) - var(--callout-icon-size)) / 2 + var(--callout-icon-nudge)
  );
  background-color: var(--callout-bg);
  border: 2px solid var(--callout-border);
  border-radius: 12px;
  box-shadow: none;
  color: inherit;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-block: 1.5rem 1.8rem;
  padding: 1rem 1.25rem 1.1rem;
  white-space: pre-wrap;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > *,
lexxy-editor .lexxy-callout > * {
  grid-column: 2;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > :last-child,
lexxy-editor .lexxy-callout > :last-child {
  margin-block-end: 0;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > .lexxy-callout__icon {
  align-items: center;
  align-self: start;
  block-size: var(--callout-icon-size);
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  inline-size: var(--callout-icon-size);
  justify-content: center;
  line-height: 1;
  margin-block-start: var(--callout-icon-offset);
  pointer-events: none;
}

:where(.trix-content, .lexxy-content) .lexxy-callout::before,
lexxy-editor .lexxy-callout::before {
  align-self: start;
  block-size: var(--callout-icon-size);
  font-size: var(--callout-icon-size);
  grid-column: 1;
  grid-row: 1;
  inline-size: var(--callout-icon-size);
  line-height: 1.2;
  margin-block-start: var(--callout-icon-offset);
  pointer-events: none;
}

lexxy-editor .lexxy-callout:not([data-icon-type="none"])::before {
  display: none;
  content: none;
}

lexxy-editor .lexxy-callout__icon-trigger::selection,
lexxy-editor .lexxy-callout__icon-trigger *::selection {
  background: transparent;
}

lexxy-editor .lexxy-callout:not([data-icon-type="none"]) > .lexxy-callout__icon-trigger {
  align-items: center;
  align-self: start;
  background: transparent;
  border: 0;
  border-radius: var(--lexxy-radius);
  cursor: pointer;
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  block-size: var(--callout-icon-size);
  inline-size: var(--callout-icon-size);
  justify-content: center;
  line-height: 1;
  margin-block-start: var(--callout-icon-offset);
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

lexxy-editor .lexxy-callout__icon-trigger .lexxy-callout__icon-emoji {
  align-items: center;
  block-size: 100%;
  display: flex;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: var(--callout-icon-size);
  inline-size: 100%;
  justify-content: center;
  line-height: 1;
  transform: translateY(0.07em);
}

lexxy-editor .lexxy-callout__icon-trigger svg {
  block-size: 100%;
  fill: none;
  inline-size: 100%;
  stroke: currentColor;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > .lexxy-callout__icon svg {
  block-size: 100%;
  fill: none;
  inline-size: 100%;
  stroke: currentColor;
}

lexxy-editor .lexxy-callout__icon-trigger .lexxy-callout__icon-image {
  block-size: 100%;
  border-radius: 0.2rem;
  inline-size: 100%;
  object-fit: cover;
  border: none;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > .lexxy-callout__icon .lexxy-callout__icon-image {
  block-size: 100%;
  border: none;
  border-radius: 0.2rem;
  inline-size: 100%;
  object-fit: cover;
}

@media (any-hover: hover) {
  lexxy-editor .lexxy-callout:not([data-icon-type="none"]) > .lexxy-callout__icon-trigger:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .dark lexxy-editor .lexxy-callout:not([data-icon-type="none"]) > .lexxy-callout__icon-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> :is(h1, h2, h3, h4, h5, h6):first-child),
:where(.trix-content, .lexxy-content)
  .lexxy-callout:has(> .lexxy-callout__icon:first-child + :is(h1, h2, h3, h4, h5, h6)),
lexxy-editor .lexxy-callout:has(> :is(h1, h2, h3, h4, h5, h6):first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + :is(h1, h2, h3, h4, h5, h6)) {
  --callout-icon-size: 1.25rem;
  --callout-icon-nudge: 0.09em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> h1:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + h1) {
  --callout-first-line-height: 2.5rem;
  --callout-icon-nudge: 0.06em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> h2:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + h2) {
  --callout-first-line-height: 2rem;
  --callout-icon-nudge: 0.04em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> h3:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + h3) {
  --callout-first-line-height: 2rem;
  --callout-icon-nudge: 0.04em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> h4:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + h4) {
  --callout-first-line-height: 1.5rem;
  --callout-icon-nudge: 0.01em;
}

lexxy-editor .lexxy-callout:has(> h1:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + h1) {
  --callout-first-line-height: 2.25rem;
  --callout-icon-nudge: 0.15em;
}

lexxy-editor .lexxy-callout:has(> h2:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + h2) {
  --callout-first-line-height: 1.75rem;
  --callout-icon-nudge: 0.14em;
}

lexxy-editor .lexxy-callout:has(> h3:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + h3) {
  --callout-first-line-height: 1.75rem;
  --callout-icon-nudge: 0.14em;
}

lexxy-editor .lexxy-callout:has(> h4:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + h4) {
  --callout-first-line-height: 1.25rem;
  --callout-icon-nudge: 0.14em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> h5:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + h5),
lexxy-editor .lexxy-callout:has(> h5:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + h5) {
  --callout-first-line-height: 1.6875rem;
}

:where(.trix-content, .lexxy-content) .lexxy-callout:has(> p:first-child),
:where(.trix-content, .lexxy-content) .lexxy-callout:has(> .lexxy-callout__icon:first-child + p) {
  --callout-first-line-height: 1.5em;
  --callout-icon-nudge: 0.03em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout > p:first-child,
:where(.trix-content, .lexxy-content) .lexxy-callout > .lexxy-callout__icon:first-child + p,
lexxy-editor .lexxy-callout > p:first-child,
lexxy-editor .lexxy-callout > .lexxy-callout__icon-trigger:first-child + p {
  line-height: var(--callout-first-line-height);
}

lexxy-editor .lexxy-callout:has(> p:first-child),
lexxy-editor .lexxy-callout:has(> .lexxy-callout__icon-trigger:first-child + p) {
  --callout-first-line-height: 1.2em;
  --callout-icon-nudge: 0.03em;
}

:where(.trix-content, .lexxy-content) .lexxy-callout[data-icon-type="emoji"]::before {
  align-items: center;
  content: attr(data-icon);
  display: flex;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  justify-content: center;
  line-height: 1;
  transform: translateY(0.07em);
}

/* Read-only callouts: spinner while JS hydrates symbol/image icons */
:where(.trix-content, .lexxy-content)
  .lexxy-callout:not(:is(lexxy-editor *)):is([data-icon-type="symbol"], [data-icon-type="image"]):not(
    [data-callout-hydrated]
  )::before {
  animation: lexxy-callout-icon-spin 0.65s linear infinite;
  background-color: transparent;
  background-image: none;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  border-top-color: currentColor;
  box-sizing: border-box;
  content: "";
  mask-image: none;
  -webkit-mask-image: none;
}

:where(.trix-content, .lexxy-content)
  .lexxy-callout:not(:is(lexxy-editor *))[data-icon-type="image"]:not([data-callout-hydrated])
  > .lexxy-callout__icon {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.trix-content, .lexxy-content)
    .lexxy-callout:not(:is(lexxy-editor *)):is([data-icon-type="symbol"], [data-icon-type="image"]):not(
      [data-callout-hydrated]
    )::before {
    animation: none;
    border-top-color: color-mix(in srgb, currentColor 22%, transparent);
  }
}

@keyframes lexxy-callout-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

:where(.trix-content, .lexxy-content)
  .lexxy-callout:is([data-icon-type="image"], [data-icon-type="symbol"])[data-callout-hydrated]::before {
  animation: none;
  content: none;
  display: none;
}

.lexxy-callout[data-border-variant="1"] {
  --callout-border: var(--callout-border-1);
}
.lexxy-callout[data-border-variant="2"] {
  --callout-border: var(--callout-border-2);
}
.lexxy-callout[data-border-variant="3"] {
  --callout-border: var(--callout-border-3);
}
.lexxy-callout[data-border-variant="4"] {
  --callout-border: var(--callout-border-4);
}
.lexxy-callout[data-border-variant="5"] {
  --callout-border: var(--callout-border-5);
}
.lexxy-callout[data-border-variant="6"] {
  --callout-border: var(--callout-border-6);
}
.lexxy-callout[data-border-variant="7"] {
  --callout-border: var(--callout-border-7);
}
.lexxy-callout[data-border-variant="8"] {
  --callout-border: var(--callout-border-8);
}
.lexxy-callout[data-border-variant="9"] {
  --callout-border: var(--callout-border-9);
}

.lexxy-callout[data-bg-variant="1"] {
  --callout-bg: var(--callout-bg-1);
}
.lexxy-callout[data-bg-variant="2"] {
  --callout-bg: var(--callout-bg-2);
}
.lexxy-callout[data-bg-variant="3"] {
  --callout-bg: var(--callout-bg-3);
}
.lexxy-callout[data-bg-variant="4"] {
  --callout-bg: var(--callout-bg-4);
}
.lexxy-callout[data-bg-variant="5"] {
  --callout-bg: var(--callout-bg-5);
}
.lexxy-callout[data-bg-variant="6"] {
  --callout-bg: var(--callout-bg-6);
}
.lexxy-callout[data-bg-variant="7"] {
  --callout-bg: var(--callout-bg-7);
}
.lexxy-callout[data-bg-variant="8"] {
  --callout-bg: var(--callout-bg-8);
}
.lexxy-callout[data-bg-variant="9"] {
  --callout-bg: var(--callout-bg-9);
}

.lexxy-callout[data-border-variant="0"] {
  border-color: transparent;
}

.lexxy-callout[data-bg-variant]:not([data-bg-variant="0"]).lexxy-callout[data-border-variant="0"] {
  border: 2px solid var(--lexxy-color-border);
}

.dark .lexxy-callout[data-bg-variant]:not([data-bg-variant="0"]).lexxy-callout[data-border-variant="0"] {
  border: 2px solid var(--lexxy-color-border);
}

.lexxy-callout[data-bg-variant="0"] {
  --callout-bg: transparent;
  background-color: transparent;
}

.lexxy-callout[data-icon-type="none"] {
  grid-template-columns: 1fr;
}

.lexxy-callout[data-icon-type="none"]::before {
  display: none;
}

.lexxy-callout[data-icon-type="none"] > * {
  grid-column: 1;
}
/* Emoji prompt menu */
.lexxy-callout-tools__icon-popover.lexxy-emoji-menu--portaled {
  --callout-tools-panel-height: 22rem;

  inline-size: min(20rem, calc(100vw - 1rem));
  max-inline-size: min(20rem, calc(100vw - 1rem));
  min-inline-size: min(18rem, calc(100vw - 1rem));
}

.lexxy-callout-tools__icon-popover.lexxy-emoji-prompt-menu {
  padding-block-start: 10px;
}

.lexxy-emoji-menu--portaled .lexxy-callout-tools__emoji-picker {
  overflow: hidden;
}

.lexxy-emoji-menu--portaled .lexxy-callout-tools__emoji-picker em-emoji-picker {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  width: 100%;
}

.lexxy-emoji-prompt__menu-item {
  align-items: center;
  display: flex;
  gap: 0.5ch;
}

.lexxy-emoji-prompt__emoji {
  font-size: 1.1rem;
  inline-size: 1.5rem;
  text-align: center;
}

.lexxy-emoji-prompt__name {
  color: var(--lexxy-color-text-subtle);
  font-size: var(--lexxy-text-small);
}
/* Checklist */
:where(.trix-content, .lexxy-content) ul:has(> li[role="checkbox"]),
lexxy-editor ul:has(> li[role="checkbox"]) {
  --lexxy-checklist-indent: calc(var(--lexxy-content-margin) * 1.5);
  --lexxy-checklist-marker-size: 1rem;
  --lexxy-checklist-marker-nudge: 0.15rem;
  --lexxy-checklist-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='currentColor' stroke='currentColor' stroke-width='0.55' stroke-linejoin='round'%3E%3Cpath d='M6.75009 15H6.74808C6.52058 14.9995 6.30668 14.896 6.16408 14.7188L2.16408 9.7188C1.90528 9.3951 1.95798 8.92339 2.28128 8.66459C2.60548 8.40679 3.07618 8.4576 3.33598 8.7813L6.75398 13.0538L14.6671 3.27839C14.9278 2.95559 15.4015 2.9073 15.7218 3.1671C16.0441 3.4278 16.0939 3.9 15.8331 4.2218L7.33308 14.7218C7.19048 14.8981 6.97669 15 6.75009 15Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

  list-style: none;
  margin-inline-start: var(--lexxy-checklist-indent);
  padding: 0;
}

lexxy-editor li.lexxy-nested-listitem > ul,
:where(.trix-content, .lexxy-content) li.lexxy-nested-listitem > ul {
  margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
}

lexxy-editor li[role="checkbox"],
:where(.trix-content, .lexxy-content) li[role="checkbox"] {
  cursor: text;
  list-style: none;
  margin-inline-start: calc(var(--lexxy-checklist-marker-nudge) - var(--lexxy-checklist-indent));
  padding-inline-start: calc(var(--lexxy-checklist-indent) - var(--lexxy-checklist-marker-nudge));
  position: relative;
  outline: none;
}

lexxy-editor ul:has(> li[role="checkbox"]) > li + li,
:where(.trix-content, .lexxy-content) ul:has(> li[role="checkbox"]) > li + li {
  margin-block-start: 0.6em;
}

lexxy-editor li[role="checkbox"]::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"]::before {
  background-color: transparent;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 0.15rem;
  block-size: var(--lexxy-checklist-marker-size);
  box-sizing: border-box;
  cursor: pointer;
  content: "";
  inline-size: var(--lexxy-checklist-marker-size);
  inset-inline-start: 0;
  position: absolute;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

lexxy-editor li[role="checkbox"]::before {
  inset-block-start: 0.15em;
}

:where(.trix-content, .lexxy-content) li[role="checkbox"]::before {
  inset-block-start: 0.3em;
}

lexxy-editor li[role="checkbox"]::after,
:where(.trix-content, .lexxy-content) li[role="checkbox"]::after {
  background-color: #ffffff;
  block-size: var(--lexxy-checklist-marker-size);
  clip-path: inset(0 100% 0 0);
  content: "";
  inline-size: var(--lexxy-checklist-marker-size);
  inset-inline-start: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

lexxy-editor li[role="checkbox"]::after {
  inset-block-start: 0.2em;
  mask: var(--lexxy-checklist-check-icon) 49% 44% / 0.75rem 0.75rem no-repeat;
  -webkit-mask: var(--lexxy-checklist-check-icon) 49% 44% / 0.75rem 0.75rem no-repeat;
}

:where(.trix-content, .lexxy-content) li[role="checkbox"]::after {
  inset-block-start: 0.3em;
  mask: var(--lexxy-checklist-check-icon) 47% 51% / 0.75rem 0.75rem no-repeat;
  -webkit-mask: var(--lexxy-checklist-check-icon) 47% 51% / 0.75rem 0.75rem no-repeat;
}

.dark lexxy-editor li[role="checkbox"]::before,
.dark :where(.trix-content, .lexxy-content) li[role="checkbox"]::before {
  background-color: rgb(255 255 255 / 5%);
  border-color: rgb(255 255 255 / 15%);
}

lexxy-editor li[role="checkbox"]:hover::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"]:hover::before {
  background-color: rgb(0 0 0 / 3%);
  border-color: rgb(0 0 0 / 25%);
}

.dark lexxy-editor li[role="checkbox"]:hover::before,
.dark :where(.trix-content, .lexxy-content) li[role="checkbox"]:hover::before {
  background-color: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 25%);
}

lexxy-editor li[role="checkbox"]:focus::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"]:focus::before {
  box-shadow: none;
}

lexxy-editor li[role="checkbox"]:focus-visible::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"]:focus-visible::before {
  box-shadow: 0 0 0 3px rgb(156 163 175 / 45%);
}

lexxy-editor li[role="checkbox"][aria-checked="true"]::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"]::before {
  background-color: #262626;
  border-color: rgb(255 255 255 / 30%);
}

lexxy-editor li[role="checkbox"][aria-checked="true"]:hover::before,
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"]:hover::before {
  background-color: #333333;
}

lexxy-editor li[role="checkbox"][aria-checked="true"]::after,
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"]::after {
  clip-path: inset(0);
  opacity: 1;
}

.dark lexxy-editor li[role="checkbox"][aria-checked="true"]::before,
.dark :where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"]::before {
  background-color: #e5e5e5;
  border-color: rgb(255 255 255 / 25%);
}

.dark lexxy-editor li[role="checkbox"][aria-checked="true"]:hover::before,
.dark :where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"]:hover::before {
  background-color: #f2f2f2;
}

.dark lexxy-editor li[role="checkbox"]::after,
.dark :where(.trix-content, .lexxy-content) li[role="checkbox"]::after {
  background-color: #171717;
}

lexxy-editor li[role="checkbox"][aria-checked="true"],
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"] {
  color: var(--lexxy-color-text-subtle);
  text-decoration: line-through;
}

lexxy-editor li[role="checkbox"][aria-checked="true"] > :is(ul, ol),
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"] > :is(ul, ol) {
  text-decoration: none;
}

lexxy-editor li[role="checkbox"][aria-checked="true"] > :is(ul, ol) li[role="checkbox"][aria-checked="false"],
:where(.trix-content, .lexxy-content)
  li[role="checkbox"][aria-checked="true"]
  > :is(ul, ol)
  li[role="checkbox"][aria-checked="false"] {
  text-decoration: none;
}

lexxy-editor li[role="checkbox"][aria-checked="true"] > :is(ul, ol) li[role="checkbox"][aria-checked="true"],
:where(.trix-content, .lexxy-content)
  li[role="checkbox"][aria-checked="true"]
  > :is(ul, ol)
  li[role="checkbox"][aria-checked="true"] {
  text-decoration: line-through;
}

lexxy-editor li[role="checkbox"][aria-checked="true"] code,
:where(.trix-content, .lexxy-content) li[role="checkbox"][aria-checked="true"] code {
  text-decoration: inherit;
}
/* Toggle lists — bullet-column marker, list-text column for all blocks (not callout-style) */
:where(.trix-content, .lexxy-content) .lexxy-toggle-list,
lexxy-editor .lexxy-toggle-list {
  --lexxy-toggle-indent: calc(var(--lexxy-content-margin) * 1.5);
  --lexxy-list-marker-width: 1em;
  --lexxy-toggle-marker-size: 1.125rem;
  --lexxy-toggle-icon-size: 0.5rem;
  --lexxy-toggle-first-line-height: 1.5em;
  --lexxy-toggle-marker-nudge: 0.1em;
  --lexxy-toggle-marker-offset: calc(
    (var(--lexxy-toggle-first-line-height) - var(--lexxy-toggle-marker-size)) / 2 + var(--lexxy-toggle-marker-nudge)
  );
  --lexxy-toggle-placeholder-font-size: 0.9rem;
  --lexxy-toggle-placeholder-line-height: 1.25rem;
  --lexxy-toggle-placeholder-font-weight: 400;

  margin-block: 1rem 1.15rem;
  margin-inline-start: var(--lexxy-toggle-indent);
  /* Text column matches li text inside ul (marker width from ul edge) */
  /* padding-inline-start: var(--lexxy-list-marker-width); */
  position: relative;
}

/* Tune horizontally to align arrow with bullet dots (negative pulls left) */
lexxy-editor .lexxy-toggle-list {
  --lexxy-toggle-marker-margin-adjust: -0.35rem;
}

:where(.trix-content, .lexxy-content) .lexxy-toggle-list {
  --lexxy-toggle-marker-margin-adjust: -0.2rem;
}

.lexxy-toggle-list .lexxy-toggle-list {
  margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
}

/* Title only — compact first line centered with the arrow (callout-style) */
lexxy-editor .lexxy-toggle-list > :not(.lexxy-toggle-list__button):nth-child(2),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list > .lexxy-toggle-list__button + *,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button)) > :first-child {
  line-height: var(--lexxy-toggle-first-line-height);
  margin-block-end: var(--lexxy-content-margin);
  margin-block-start: 0;
}

/* Body shadow content — normal lexxy content rhythm */
lexxy-editor .lexxy-toggle-list > :not(.lexxy-toggle-list__button):nth-child(n + 3),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list > .lexxy-toggle-list__button + * ~ *,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button)) > :not(:first-child) {
  margin-block: 0 var(--lexxy-content-margin);
}

lexxy-editor .lexxy-toggle-list > :not(.lexxy-toggle-list__button):last-child,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list > .lexxy-toggle-list__button + * ~ *:last-child,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button)) > :last-child {
  margin-block-end: 0;
}

/* Heading-aware marker alignment (mirrors callout icon offsets) */
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> h1:first-child),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h1),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h1) {
  --lexxy-toggle-marker-size: 1.25rem;
  --lexxy-toggle-first-line-height: 2.5rem;
  --lexxy-toggle-marker-nudge: 0.06em;
}

:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> h2:first-child),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> h3:first-child),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h2),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h3),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h2),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h3) {
  --lexxy-toggle-marker-size: 1.25rem;
  --lexxy-toggle-first-line-height: 2rem;
  --lexxy-toggle-marker-nudge: 0.04em;
}

:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> h4:first-child),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h4),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h4) {
  --lexxy-toggle-marker-size: 1.25rem;
  --lexxy-toggle-first-line-height: 1.5rem;
  --lexxy-toggle-marker-nudge: 0.01em;
}

lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h1) {
  --lexxy-toggle-first-line-height: 2.25rem;
  --lexxy-toggle-marker-nudge: 0.15em;
}

lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h2),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h3) {
  --lexxy-toggle-first-line-height: 1.75rem;
  --lexxy-toggle-marker-nudge: 0.14em;
}

lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + h4) {
  --lexxy-toggle-first-line-height: 1.25rem;
  --lexxy-toggle-marker-nudge: 0.14em;
}

:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> p:first-child),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:has(> .lexxy-toggle-list__button + p),
lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + p) {
  --lexxy-toggle-first-line-height: 1.5em;
  --lexxy-toggle-marker-nudge: 0.03em;
}

lexxy-editor .lexxy-toggle-list:has(> .lexxy-toggle-list__button + p) {
  --lexxy-toggle-first-line-height: 1.2em;
}

/* Shadow body: nested containers keep their own spacing */
lexxy-editor .lexxy-toggle-list > .lexxy-content__table-wrapper,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list > .lexxy-content__table-wrapper {
  margin-block: 0 var(--lexxy-content-margin);
}

lexxy-editor .lexxy-toggle-list__button,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list__button {
  align-items: center;
  background: transparent;
  block-size: var(--lexxy-toggle-marker-size);
  border: 0;
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-text-subtle);
  cursor: pointer;
  display: inline-flex;
  inline-size: var(--lexxy-toggle-marker-size);
  inset-block-start: var(--lexxy-toggle-marker-offset);
  inset-inline-start: calc(-1 * var(--lexxy-list-marker-width));
  justify-content: center;
  line-height: 1;
  margin-block: 0;
  margin-inline: var(--lexxy-toggle-marker-margin-adjust) 0;
  min-block-size: 0;
  min-inline-size: 0;
  padding: 0;
  position: absolute;
  z-index: 1;
  transition:
    background-color 80ms ease,
    color 80ms ease,
    transform 80ms ease;
}

lexxy-editor .lexxy-toggle-list__button svg,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list__button svg {
  block-size: var(--lexxy-toggle-icon-size);
  fill: currentColor;
  inline-size: var(--lexxy-toggle-icon-size);
  transform: rotate(90deg);
  transition: transform 80ms ease;
}

lexxy-editor .lexxy-toggle-list[data-open="false"] .lexxy-toggle-list__button svg,
:where(.trix-content, .lexxy-content) .lexxy-toggle-list[data-open="false"] .lexxy-toggle-list__button svg {
  transform: rotate(0deg);
}

@media (any-hover: hover) {
  lexxy-editor .lexxy-toggle-list__button:hover,
  :where(.trix-content, .lexxy-content) .lexxy-toggle-list__button:hover {
    background-color: rgb(0 0 0 / 6%);
    color: var(--lexxy-color-text);
  }

  .dark lexxy-editor .lexxy-toggle-list__button:hover,
  .dark :where(.trix-content, .lexxy-content) .lexxy-toggle-list__button:hover {
    background-color: rgb(255 255 255 / 10%);
  }

  lexxy-editor
    .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="false"][data-empty-content-hover="true"]
    > :nth-child(2)::after,
  lexxy-editor
    .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="true"][data-empty-content-focused="false"][data-empty-content-hover="true"]
    > :nth-child(2)
    + *::before {
    color: var(--lexxy-color-text);
    opacity: 0.75;
  }
}

lexxy-editor .lexxy-toggle-list[data-has-body-block="false"] .lexxy-toggle-list__button {
  opacity: 0.75;
}

/* Read-only toggle marker (fallback before JS hydration) */
:where(.trix-content, .lexxy-content) .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button))::before {
  align-items: center;
  block-size: var(--lexxy-toggle-marker-size);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-text-subtle);
  content: "";
  cursor: pointer;
  display: inline-flex;
  inline-size: var(--lexxy-toggle-marker-size);
  inset-block-start: var(--lexxy-toggle-marker-offset);
  inset-inline-start: calc(-1 * var(--lexxy-list-marker-width));
  justify-content: center;
  line-height: 1;
  margin-block: 0;
  margin-inline: var(--lexxy-toggle-marker-margin-adjust) 0;
  pointer-events: auto;
  position: absolute;
  transform: rotate(90deg);
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 80ms ease;
}

:where(.trix-content, .lexxy-content) .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button))::after {
  background-color: currentColor;
  block-size: var(--lexxy-toggle-icon-size);
  content: "";
  inline-size: var(--lexxy-toggle-icon-size);
  inset-block-start: calc(
    var(--lexxy-toggle-marker-offset) + (var(--lexxy-toggle-marker-size) - var(--lexxy-toggle-icon-size)) / 2
  );
  inset-inline-start: calc(
    -1 * var(--lexxy-list-marker-width) + var(--lexxy-toggle-marker-margin-adjust) +
      (var(--lexxy-toggle-marker-size) - var(--lexxy-toggle-icon-size)) / 2
  );
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 2.31061C1.5 0.943037 2.99801 0.103919 4.16406 0.818427L10.1855 4.50788C11.2997 5.19065 11.2997 6.80949 10.1855 7.49226L4.16406 11.1817C2.99802 11.8962 1.5 11.0571 1.5 9.68952V2.31061Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 2.31061C1.5 0.943037 2.99801 0.103919 4.16406 0.818427L10.1855 4.50788C11.2997 5.19065 11.2997 6.80949 10.1855 7.49226L4.16406 11.1817C2.99802 11.8962 1.5 11.0571 1.5 9.68952V2.31061Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
  position: absolute;
  transform: rotate(90deg);
  transition: transform 80ms ease;
}

lexxy-editor .lexxy-toggle-list::before,
lexxy-editor .lexxy-toggle-list::after {
  content: none;
  display: none;
}

:where(.trix-content, .lexxy-content)
  .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button))[data-open="false"]::before,
:where(.trix-content, .lexxy-content)
  .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button))[data-open="false"]::after {
  transform: rotate(0deg);
}

/* Empty state placeholders */
lexxy-editor .lexxy-toggle-list[data-empty-title="true"] > :nth-child(2) {
  position: relative;
}

lexxy-editor .lexxy-toggle-list[data-empty-title="true"] > :nth-child(2)::before {
  color: var(--lexxy-color-text-subtle);
  content: var(--lexxy-toggle-title-placeholder, "Toggle");
  font: inherit;
  inset-block-start: 0;
  inset-inline-start: 0;
  letter-spacing: inherit;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  text-transform: inherit;
}

lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="false"]
  > :nth-child(2) {
  margin-block-end: 0;
}

lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="false"]
  > :nth-child(2)::after,
lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="true"][data-empty-content-focused="false"]
  > :nth-child(2)
  + *::before {
  color: var(--lexxy-color-text-subtle);
  content: var(--lexxy-toggle-empty-placeholder, "Empty toggle. Click to start writing content.");
  font-family: inherit;
  font-size: var(--lexxy-toggle-placeholder-font-size);
  font-style: normal;
  font-weight: var(--lexxy-toggle-placeholder-font-weight);
  letter-spacing: normal;
  line-height: var(--lexxy-toggle-placeholder-line-height);
  opacity: 0.5;
  text-transform: none;
  transition:
    color 80ms ease,
    opacity 80ms ease;
}

lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="false"]
  > :nth-child(2)::after {
  cursor: pointer;
  display: block;
  margin-block-start: var(--lexxy-content-margin);
}

lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="true"][data-empty-content-focused="false"]
  > :nth-child(2)
  + *::before {
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  position: absolute;
}

lexxy-editor
  .lexxy-toggle-list[data-open="true"][data-empty-content="true"][data-has-body-block="true"][data-empty-content-focused="false"]
  > :nth-child(2)
  + * {
  cursor: pointer;
  position: relative;
}

/* Collapsed body */
lexxy-editor .lexxy-toggle-list[data-open="false"] > :not(.lexxy-toggle-list__button):not(:nth-child(2)),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list[data-open="false"] > .lexxy-toggle-list__button + * ~ *,
:where(.trix-content, .lexxy-content)
  .lexxy-toggle-list:not(:has(.lexxy-toggle-list__button))[data-open="false"]
  > :not(:first-child) {
  display: none !important;
}

lexxy-editor .lexxy-toggle-list[data-open="false"] > :nth-child(2),
:where(.trix-content, .lexxy-content) .lexxy-toggle-list[data-open="false"] > .lexxy-toggle-list__button + * {
  display: revert !important;
}
lexxy-link-dropdown .link_to_embed {
  flex: 1 1 100%;
  inline-size: 100%;
  margin: 0;
  white-space: normal;
}

lexxy-link-dropdown .link_to_embed[hidden] {
  display: none !important;
}

lexxy-link-dropdown .link_to_embed--hint {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block-start: 0.75rem;
  padding-block-end: 0.75rem;
  text-align: center;
}

lexxy-link-dropdown .link_to_embed__label {
  color: var(--link-dropdown-control-muted, #9b9a97);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
}

lexxy-link-dropdown .link_to_embed__providers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lexxy-content lexxy-link-dropdown .link_to_embed__providers {
  margin: 0;
  margin-inline-start: 0;
  padding: 0;
}

lexxy-link-dropdown .link_to_embed__provider-pill {
  align-items: center;
  background: transparent;
  border: 1px solid var(--link-dropdown-control-border, var(--lexxy-color-border));
  border-radius: 6px;
  color: var(--link-dropdown-control-subtle, #6f6b64);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.35rem;
  line-height: 1;
  padding-block: 0.35rem;
  padding-inline: 0.55rem;
  text-decoration: none;
}

lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill,
lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:visited,
lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:hover,
lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:focus,
lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:active {
  color: var(--link-dropdown-control-subtle, #6f6b64);
  text-decoration: none;
  text-decoration-line: none;
}

lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:hover,
lexxy-link-dropdown .link_to_embed__providers a.link_to_embed__provider-pill:focus-visible {
  color: var(--link-dropdown-control-text, #2f3437);
}

lexxy-link-dropdown .link_to_embed__provider-pill span {
  color: inherit;
  text-decoration: none;
}

lexxy-link-dropdown .link_to_embed__provider-icon {
  block-size: 0.85rem;
  flex-shrink: 0;
  inline-size: 0.85rem;
}

lexxy-link-dropdown .embed-provider-icon--theme-adaptive {
  color: var(--link-dropdown-control-text, #2f3437);
}

lexxy-link-dropdown .embed-provider-icon--theme-adaptive path[fill="currentColor"] {
  fill: currentColor;
}

.embed__badge .embed-provider-icon--theme-adaptive {
  color: #fff;
}

.embed__badge .embed-provider-icon--theme-adaptive path[fill="currentColor"] {
  fill: currentColor;
}

lexxy-link-dropdown .link_to_embed__provider-pill:hover {
  background: var(--link-dropdown-chip-bg-hover, #f1f1ef);
}

lexxy-link-dropdown .link_to_embed__provider-pill:focus-visible {
  outline: 2px solid var(--link-dropdown-control-border-focus, #b8b8b4);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  lexxy-link-dropdown .link_to_embed__provider-pill {
    gap: 0;
    padding-inline: 0.35rem;
  }

  lexxy-link-dropdown .link_to_embed__provider-pill span {
    display: none;
  }
}

lexxy-link-dropdown .link_to_embed--offer {
  border-block-start: 1px solid var(--link-dropdown-divider, var(--lexxy-color-border));
  padding-block-start: 0.75rem;
}

lexxy-link-dropdown .link_to_embed__card {
  background: var(--link-dropdown-surface, #f7f7f5);
  border: 1px solid var(--link-dropdown-control-border, var(--lexxy-color-border));
  border-radius: 8px;
  display: grid;
  gap: 0.65rem 0.75rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  padding: 0.65rem;
}

lexxy-link-dropdown .link_to_embed__card.link_to_embed--has-thumbnail {
  grid-template-columns: auto 1fr;
}

lexxy-link-dropdown .link_to_embed__card img.link_to_embed__thumbnail {
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: none;
  border-radius: 6px;
  grid-column: 1;
  grid-row: 1;
  inline-size: 4.5rem;
  object-fit: cover;
}

lexxy-link-dropdown .link_to_embed__details {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
  text-align: start;
}

lexxy-link-dropdown .link_to_embed__card.link_to_embed--has-thumbnail .link_to_embed__details {
  grid-column: 2;
}

lexxy-link-dropdown .link_to_embed__provider {
  align-items: center;
  color: var(--link-dropdown-control-text, #2f3437);
  display: inline-flex;
  font-size: var(--lexxy-text-small);
  font-weight: 600;
  gap: 0.35rem;
  line-height: 1.3;
}

lexxy-link-dropdown .link_to_embed__title {
  color: var(--link-dropdown-control-muted, #9b9a97);
  display: -webkit-box;
  font-size: 0.85rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.35;
  overflow: hidden;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] .link_to_embed__embed-button {
  aspect-ratio: unset;
  background: var(--link-dropdown-primary-bg, #3f3f3f);
  block-size: auto;
  border: 0;
  border-radius: 8px;
  color: var(--link-dropdown-primary-text, #fff);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  grid-column: 1 / -1;
  grid-row: 2;
  inline-size: 100%;
  line-height: 1;
  min-block-size: 2.35rem;
  padding: 0.65rem 1rem;
  white-space: nowrap;
}

lexxy-link-dropdown.lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] .link_to_embed__embed-button:hover {
  background: var(--link-dropdown-primary-bg-hover, #2f2f2f);
  filter: none;
}

.dark lexxy-link-dropdown .link_to_embed__provider-pill {
  background: #353535;
}

.dark lexxy-link-dropdown .link_to_embed__provider-pill:hover {
  background: #4a4a4a;
}

:where(.lexxy-content) {
  action-text-attachment[content-type="application/vnd.actiontext.embed"] {
    display: block;
    inline-size: 100%;
    margin-block: 1rem;
    position: relative;
    white-space: normal;
  }
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] {
  display: block;
  margin: 1rem 0;
  position: relative;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] lexxy-node-delete-button {
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  inset-inline-start: auto;
  line-height: 1;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  lexxy-node-delete-button
  .lexxy-floating-controls__group {
  --button-size: 2.3lh;

  background-color: var(--lexxy-color-ink);
  border-radius: var(--floating-tools-radius);
  padding: 0.25ch;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  lexxy-node-delete-button
  .lexxy-node-delete {
  border-radius: calc(var(--floating-tools-radius) - 0.25ch);
}

.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  lexxy-node-delete-button
  .lexxy-floating-controls__group {
  background-color: #171717;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed {
  display: block;
  line-height: 0;
  width: 100%;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"].node--selected
  .embed
  > *:not(script):not(.embed__badge) {
  outline: 3px solid var(--lexxy-color-selected-dark);
  outline-offset: 2px;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"].node--selected
  .embed--thumbnail {
  outline: 3px solid var(--lexxy-color-selected-dark);
  outline-offset: 2px;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed
  > *:not(script):not(.embed__badge) {
  display: block;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed script {
  display: none !important;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] iframe,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] twitter-widget {
  display: block !important;
  width: 100% !important;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  height: auto;
  overflow: hidden;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .twitter-tweet-rendered {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5rem 0;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter iframe,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .twitter-tweet-rendered iframe {
  aspect-ratio: unset;
  border-radius: 0.75rem;
  height: auto;
  max-width: 550px;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--twitter twitter-widget,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .twitter-tweet-rendered
  twitter-widget {
  display: block !important;
  margin-inline: auto;
  max-width: 550px;
  width: 100% !important;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--twitter
  blockquote.twitter-tweet {
  margin: 0;
  max-width: 550px;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--instagram {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5rem 0;
  width: 100%;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--instagram
  iframe.instagram-media,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--instagram
  iframe.instagram-media-rendered {
  aspect-ratio: unset;
  border-radius: 3px;
  display: block;
  height: unset;
  margin-inline: auto;
  max-width: 658px;
  min-height: 326px;
  min-width: 326px;
  overflow: visible;
  width: 100%;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--instagram
  blockquote.instagram-media {
  margin: 0;
  max-width: 658px;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--tiktok {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5rem 0;
  width: 100%;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--tiktok
  blockquote.tiktok-embed,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] blockquote.tiktok-embed {
  border: 0;
  border-inline-start: 0;
  font-style: normal;
  margin: 0 auto;
  max-width: 605px;
  min-width: 325px;
  padding: 0;
  width: 100%;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--tiktok
  blockquote.tiktok-embed
  iframe,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] blockquote.tiktok-embed iframe {
  aspect-ratio: unset;
  border: 0;
  border-radius: 0;
  display: block;
  height: auto;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  position: static;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook {
  margin: 1.5rem 0;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-video,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-video span,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post span {
  display: block;
  max-width: 100%;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post span,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--facebook .fb-post iframe {
  background: #fff;
  margin-inline: auto;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.embed"]
  .embed--facebook
  blockquote.fb-xfbml-parse-ignore,
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] blockquote.fb-xfbml-parse-ignore {
  border: 0;
  border-inline-start: 0;
  font-style: normal;
  margin: 0;
  padding: 0;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--airtable {
  margin: 1.5rem 0;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--airtable iframe {
  aspect-ratio: unset;
  border: 0;
  display: block;
  height: 533px;
  max-width: 100%;
  width: 100%;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed--thumbnail {
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed__badge {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(15, 15, 15, 0.72);
  border-radius: 6px;
  bottom: 0.65rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.35rem;
  left: 0.65rem;
  line-height: 1;
  padding-block: 0.35rem;
  padding-inline: 0.55rem;
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 1;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed__badge-icon {
  block-size: 0.85rem;
  flex-shrink: 0;
  inline-size: 0.85rem;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] .embed__badge-label {
  white-space: nowrap;
}

lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.embed"] img {
  block-size: auto;
  border-radius: 0.75rem;
  inline-size: 100%;
  margin-bottom: 0;
  margin-top: 0;
  max-inline-size: 100%;
}


lexxy-editor .embed--custom-code[data-custom-code-source] {
  position: relative;
}

lexxy-editor .embed--custom-code .custom-code-edit-button {
  display: none;
}

/* Delete + edit controls — same HUD as button blocks */
lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control) {
  --button-size: 1.75rem;

  inset-block-start: 0.75rem;
  inset-inline-start: auto;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  lexxy-node-delete-button {
  inset-inline-end: 0.75rem;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  .custom-code-edit-control {
  display: none;
  inset-inline-end: calc(0.75rem + var(--button-size) + 0.5rem);
  position: absolute;
}

lexxy-editor[data-lexxy-custom-code-enabled]
  action-text-attachment:has(.embed--custom-code)
  .custom-code-edit-control {
  display: block;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  .lexxy-floating-controls__group {
  --button-size: 1.75rem;

  background-color: var(--lexxy-color-ink);
  border-radius: var(--floating-tools-radius);
  padding: 0.25ch;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  :is(.lexxy-node-delete, .custom-code-edit-button) {
  block-size: var(--button-size);
  border-radius: calc(var(--floating-tools-radius) - 0.25ch);
  inline-size: var(--button-size);
  min-block-size: var(--button-size);
  min-inline-size: var(--button-size);
}

.dark
  lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  .lexxy-floating-controls__group {
  background-color: #171717;
}

.dark
  lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  :is(.lexxy-node-delete, .custom-code-edit-button) {
  color: #fff;
}

.dark
  lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  :is(.lexxy-node-delete, .custom-code-edit-button)
  svg {
  color: #fff;
  fill: currentColor;
}

.dark
  lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  :is(lexxy-node-delete-button, .custom-code-edit-control)
  :is(.lexxy-node-delete, .custom-code-edit-button)
  svg
  [fill="none"] {
  fill: none;
  stroke: currentColor;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  .custom-code-edit-control
  .custom-code-edit-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

lexxy-editor
  action-text-attachment:has(.embed--custom-code)
  .custom-code-edit-control
  .custom-code-edit-button
  svg {
  block-size: 14px;
  fill: none;
  inline-size: 14px;
  opacity: 1;
  stroke: currentColor;
}

@media (any-hover: hover) {
  lexxy-editor
    action-text-attachment:has(.embed--custom-code)
    .custom-code-edit-control
    .custom-code-edit-button:hover:not([aria-disabled="true"]) {
    background: #353535;
  }
}

lexxy-editor[data-lexxy-custom-code-enabled]
  action-text-attachment:has(.embed--custom-code):is(
    :hover,
    :focus-within,
    .node--selected
  )
  :is(.custom-code-edit-control, lexxy-node-delete-button) {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Button blocks ---- */

.lexxy-content .embed.embed--button.lexxy-button-block-wrapper,
.trix-content .embed.embed--button.lexxy-button-block-wrapper,
.embed.embed--button.lexxy-button-block-wrapper,
lexxy-editor .embed.embed--button.lexxy-button-block-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-block: 1rem;
  margin-inline: auto;
  text-align: center;
  width: 100% !important;
}

.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"],
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"],
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"] {
  background: transparent;
  border-radius: 0.5rem;
  display: block;
  margin-block: 1rem;
  margin-inline: auto;
  overflow: visible;
  position: relative;
  text-align: center;
  white-space: normal;
  width: 100%;
}

.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .embed--button,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .embed--button,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .embed--button {
  display: flex !important;
  justify-content: center !important;
  line-height: normal;
  margin: 0 !important;
  text-align: center;
  width: 100% !important;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"].node--selected {
  background: transparent;
  outline: 3px solid var(--lexxy-color-selected-dark);
  outline-offset: 2px;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .embed--button,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .embed--button
  * {
  pointer-events: none !important;
}

/* Lesson buttons use SchoolMaker's .button-primary / .button-secondary classes. */
.lexxy-content .embed--button a.button-primary,
.trix-content .embed--button a.button-primary,
lexxy-editor .embed--button a.button-primary,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary {
  align-items: center;
  background-color: var(--color-primary, var(--color-neutral-800, #262626));
  border: 1px solid transparent;
  border-radius: 0.45rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  color: var(--color-primary-foreground, #fff) !important;
  cursor: pointer;
  display: inline-flex !important;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.375rem;
  justify-content: center;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  text-decoration: none !important;
}

.lexxy-content .embed--button a.button-primary .lexxy-button-icon,
.trix-content .embed--button a.button-primary .lexxy-button-icon,
lexxy-editor .embed--button a.button-primary .lexxy-button-icon,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary
  .lexxy-button-icon,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary
  .lexxy-button-icon,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary
  .lexxy-button-icon {
  color: inherit !important;
}

.lexxy-content .embed--button a.button-primary:hover,
.trix-content .embed--button a.button-primary:hover,
lexxy-editor .embed--button a.button-primary:hover,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary:hover,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary:hover,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-primary:hover {
  background-color: var(--color-primary-hover, var(--color-neutral-700, #404040));
  color: var(--color-primary-foreground, #fff) !important;
}

.lexxy-content .embed--button a.button-secondary,
.trix-content .embed--button a.button-secondary,
lexxy-editor .embed--button a.button-secondary,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--color-neutral-300, #d4d4d4);
  border-radius: 0.45rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  color: var(--color-neutral-700, #404040) !important;
  cursor: pointer;
  display: inline-flex !important;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.375rem;
  justify-content: center;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  text-decoration: none !important;
}

.lexxy-content .embed--button a.button-secondary .lexxy-button-icon,
.trix-content .embed--button a.button-secondary .lexxy-button-icon,
lexxy-editor .embed--button a.button-secondary .lexxy-button-icon,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary
  .lexxy-button-icon,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary
  .lexxy-button-icon,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary
  .lexxy-button-icon {
  color: inherit !important;
}

.lexxy-content .embed--button a.button-secondary:hover,
.trix-content .embed--button a.button-secondary:hover,
lexxy-editor .embed--button a.button-secondary:hover,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover {
  background-color: var(--color-neutral-50, #fafafa);
  color: var(--color-neutral-700, #404040) !important;
}

.dark .lexxy-content .embed--button a.button-secondary,
.dark .trix-content .embed--button a.button-secondary,
.dark lexxy-editor .embed--button a.button-secondary,
.dark
  .lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary,
.dark
  .trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary,
.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary {
  background-color: #262626;
  border-color: #525252;
  color: #e5e5e5 !important;
}

.dark .lexxy-content .embed--button a.button-secondary:hover,
.dark .trix-content .embed--button a.button-secondary:hover,
.dark lexxy-editor .embed--button a.button-secondary:hover,
.dark
  .lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover,
.dark
  .trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover,
.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a.button-secondary:hover {
  background-color: #404040;
  color: #f5f5f5 !important;
}

.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  a,
.lexxy-content .embed--button a,
.trix-content .embed--button a {
  text-decoration: none !important;
}

.lexxy-content .embed--button .lexxy-button-icon,
.trix-content .embed--button .lexxy-button-icon,
lexxy-editor .embed--button .lexxy-button-icon,
.lexxy-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .lexxy-button-icon,
.trix-content
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .lexxy-button-icon,
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .lexxy-button-icon {
  display: block;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
}

/* Delete + edit controls — same size/placement as image */
lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control) {
  /* Center vertically against the button (py-2 ≈ 0.5rem each side) */
  inset-block-start: 50%;
  inset-inline-start: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 3;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  lexxy-node-delete-button {
  inset-inline-end: 1.5ch;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .button-edit-control {
  display: none;
  inset-inline-end: calc(1.5ch + var(--button-size) + 0.75ch);
  position: absolute;
}

lexxy-editor[data-lexxy-button-enabled]
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .button-edit-control {
  display: block;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control) {
  --button-size: 1.75rem;

  line-height: 1;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  .lexxy-floating-controls__group {
  --button-size: 1.75rem;

  background-color: var(--lexxy-color-ink);
  border-radius: var(--floating-tools-radius);
  padding: 0.25ch;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  :is(.lexxy-node-delete, .button-edit-button) {
  block-size: var(--button-size);
  border-radius: calc(var(--floating-tools-radius) - 0.25ch);
  inline-size: var(--button-size);
  min-block-size: var(--button-size);
  min-inline-size: var(--button-size);
}

.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  .lexxy-floating-controls__group {
  background-color: #171717;
}

.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  :is(.lexxy-node-delete, .button-edit-button) {
  color: #fff;
}

.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  :is(.lexxy-node-delete, .button-edit-button)
  svg {
  color: #fff;
  fill: currentColor;
}

.dark
  lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  :is(lexxy-node-delete-button, .button-edit-control)
  :is(.lexxy-node-delete, .button-edit-button)
  svg
  [fill="none"] {
  fill: none;
  stroke: currentColor;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .button-edit-control
  .button-edit-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

lexxy-editor
  action-text-attachment[content-type="application/vnd.actiontext.button"]
  .button-edit-control
  .button-edit-button
  svg {
  block-size: 14px;
  fill: none;
  inline-size: 14px;
  opacity: 1;
  stroke: currentColor;
}

@media (any-hover: hover) {
  lexxy-editor
    action-text-attachment[content-type="application/vnd.actiontext.button"]
    .button-edit-control
    .button-edit-button:hover:not([aria-disabled="true"]) {
    background: #353535;
  }
}

lexxy-editor[data-lexxy-button-enabled]
  action-text-attachment[content-type="application/vnd.actiontext.button"]:is(
    :hover,
    :focus-within,
    .node--selected
  )
  :is(.button-edit-control, lexxy-node-delete-button) {
  opacity: 1;
  pointer-events: auto;
}

/*
  Hex chips stay transparent. The swatch is painted on ::before from
  --lexxy-hex-swatch (set in JS / persisted on the span style).
*/
:is(.trix-content, .lexxy-content) .lexxy-hex-color {
  background-color: transparent;
  background-image: none;
  color: inherit;
  cursor: pointer;
}

:is(.trix-content, .lexxy-content) .lexxy-hex-color::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-inline-end: 0.35em;
  border-radius: 0.2em;
  vertical-align: -0.1em;
  background-color: var(--lexxy-hex-swatch);
  background-image: none;
  border: 1px solid color-mix(in oklch, var(--lexxy-color-ink) 18%, transparent);
  box-sizing: border-box;
}

:is(.trix-content, .lexxy-content) .lexxy-hex-color__copied-icon {
  display: none;
  width: 0.85em;
  height: 0.85em;
  margin-inline-end: 0.35em;
  vertical-align: -0.1em;
  color: var(--lexxy-color-ink);
}

:is(.trix-content, .lexxy-content) .lexxy-hex-color__copied-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.trix-content, .lexxy-content) .lexxy-hex-color--copied::before {
  display: none;
}

:is(.trix-content, .lexxy-content) .lexxy-hex-color--copied .lexxy-hex-color__copied-icon {
  display: inline-block;
}

/* Editors keep the swatch non-interactive. */
lexxy-editor :is(.trix-content, .lexxy-content) .lexxy-hex-color,
lexxy-editor.lexxy-content .lexxy-hex-color {
  cursor: text;
}
/* Math / LaTeX blocks */
.trix-content .latex-block,
lexxy-editor.lexxy-content .latex-block {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgb(255 255 255), rgb(249 250 251));
  padding: 1rem;
  color: rgb(17 24 39);
  text-align: center;
}

.trix-content .latex-block .latex-block-edit-button,
lexxy-editor.lexxy-content .latex-block .latex-block-edit-button {
  appearance: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(209 213 219);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  color: rgb(75 85 99);
  line-height: 1;
  opacity: 0;
  padding: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: opacity 150ms ease, background-color 150ms ease,
    color 150ms ease;
  z-index: 3;
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button {
  inset-block-start: 0.5rem;
  inset-inline-end: 3rem;
  inset-inline-start: auto;
  color: rgb(75 85 99);
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 150ms ease;
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-floating-controls__group {
  --button-size: 1.75rem;
  background: transparent;
  border-radius: 9999px;
  padding: 0;
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-node-delete {
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border: 1px solid rgb(209 213 219);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  color: rgb(75 85 99);
  padding: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-node-delete
  svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 1;
  padding: 0;
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-node-delete:hover {
  background: rgb(254 242 242);
  color: rgb(185 28 28);
}

trix-editor.trix-content .latex-block .latex-block-edit-button,
lexxy-editor.lexxy-content .latex-block .latex-block-edit-button {
  display: inline-flex;
}

trix-editor.trix-content .latex-block:hover .latex-block-edit-button,
trix-editor.trix-content .latex-block .latex-block-edit-button:focus-visible,
lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block):is(
    :hover,
    :focus-within,
    .node--selected
  )
  .latex-block-edit-button {
  opacity: 1;
}

lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block):is(
    :hover,
    :focus-within,
    .node--selected
  )
  lexxy-node-delete-button {
  opacity: 1;
  pointer-events: auto;
}

trix-editor.trix-content .latex-block .latex-block-edit-button:hover,
lexxy-editor.lexxy-content .latex-block .latex-block-edit-button:hover {
  background: rgb(249 250 251);
  color: rgb(17 24 39);
}

.trix-content .latex-block mjx-assistive-mml,
.latex-block-preview mjx-assistive-mml,
[data-controller~="latex-render"] mjx-assistive-mml,
[data-latex-rendered-source] mjx-assistive-mml,
.trix-content .latex-block mjx-assistive-mml[display],
.latex-block-preview mjx-assistive-mml[display],
[data-controller~="latex-render"] mjx-assistive-mml[display],
[data-latex-rendered-source] mjx-assistive-mml[display] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.trix-content .latex-block svg,
.latex-block-preview svg,
[data-controller~="latex-render"] svg,
[data-latex-rendered-source] svg {
  display: inline-block;
  max-width: 100%;
}

[data-controller~="latex-render"][data-latex-render-display-value="false"]:not(
    [data-latex-rendered-source]
  ) {
  color: transparent;
}

.trix-content .latex-block[data-latex-render-error="true"],
lexxy-editor.lexxy-content .latex-block[data-latex-render-error="true"],
.latex-block-preview[data-latex-render-error="true"] {
  color: rgb(185 28 28);
  text-align: left;
}

.latex-render-error {
  display: grid;
  width: 100%;
  gap: 0.5rem;
  text-align: left;
}

.latex-render-error__code {
  display: inline-flex;
  width: fit-content;
  border-radius: 0.375rem;
  background: rgb(254 226 226);
  padding: 0.125rem 0.375rem;
  color: rgb(153 27 27);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}

.latex-render-error__message {
  color: rgb(127 29 29);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.latex-render-error__source {
  display: block;
  overflow-x: auto;
  border-radius: 0.5rem;
  background: rgb(255 255 255);
  padding: 0.5rem 0.625rem;
  color: rgb(31 41 55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

html.dark .trix-content .latex-block,
html.dark lexxy-editor.lexxy-content .latex-block {
  border-color: rgb(64 64 64);
  background: linear-gradient(180deg, rgb(38 38 38), rgb(23 23 23));
  color: rgb(250 250 250);
}

html.dark .trix-content .latex-block .latex-block-edit-button,
html.dark lexxy-editor.lexxy-content .latex-block .latex-block-edit-button,
html.dark
  lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-node-delete {
  border-color: rgb(82 82 82);
  background: rgb(38 38 38 / 0.95);
  color: rgb(212 212 212);
}

html.dark
  lexxy-editor.lexxy-content
  action-text-attachment:has(.latex-block)
  lexxy-node-delete-button
  .lexxy-node-delete:hover {
  background: rgb(127 29 29);
  color: rgb(254 202 202);
}

html.dark trix-editor.trix-content .latex-block .latex-block-edit-button:hover,
html.dark lexxy-editor.lexxy-content .latex-block .latex-block-edit-button:hover {
  background: rgb(64 64 64);
  color: rgb(250 250 250);
}

html.dark .trix-content .latex-block[data-latex-render-error="true"],
html.dark lexxy-editor.lexxy-content .latex-block[data-latex-render-error="true"],
html.dark .latex-block-preview[data-latex-render-error="true"] {
  color: rgb(252 165 165);
}

html.dark .latex-render-error__code {
  background: rgb(127 29 29);
  color: rgb(254 202 202);
}

html.dark .latex-render-error__message {
  color: rgb(254 202 202);
}

html.dark .latex-render-error__source {
  background: rgb(23 23 23);
  color: rgb(229 229 229);
}
.lexxy-voice-note {
  margin-block: 0.75rem;
}

.lexxy-voice-note audio {
  display: block;
  inline-size: 100%;
  max-inline-size: 24rem;
}

.cm-editor {
  background: transparent;
}

.lexxy-custom-code-editor,
.lexxy-custom-code-editor .cm-editor {
  height: 10lh;
  min-height: 10lh;
}

.cm-gutters {
  background: rgb(250 250 250);
  border-right: 1px solid rgb(229 229 229);
  color: rgb(163 163 163);
}

html.dark .cm-editor {
  color: rgb(250 250 250);
}

html.dark .cm-content {
  caret-color: rgb(250 250 250);
}

html.dark .cm-gutters {
  background: rgb(23 23 23);
  border-right-color: rgb(64 64 64);
  color: rgb(163 163 163);
}

html.dark .cm-activeLine,
html.dark .cm-activeLineGutter {
  background: rgb(64 64 64 / 0.35);
}

html.dark .cm-cursor,
html.dark .cm-dropCursor {
  border-left-color: rgb(250 250 250);
}

html.dark .cm-editor .cm-selectionBackground,
html.dark .cm-editor .cm-content ::selection {
  background: rgb(255 255 255 / 0.12);
}

html.dark
  .cm-editor.cm-focused
  > .cm-scroller
  > .cm-selectionLayer
  .cm-selectionBackground {
  background: rgb(255 255 255 / 0.2);
}

html.dark .cm-tooltip,
html.dark .cm-editor .cm-tooltip {
  background: rgb(23 23 23);
  border: 1px solid rgb(64 64 64);
  color: rgb(250 250 250);
}

html.dark .cm-tooltip.cm-tooltip-autocomplete ul,
html.dark .cm-editor .cm-tooltip.cm-tooltip-autocomplete ul {
  color: rgb(250 250 250);
}

html.dark .cm-tooltip-autocomplete ul li[aria-selected],
html.dark .cm-editor .cm-tooltip-autocomplete ul li[aria-selected] {
  background: rgb(64 64 64);
  color: rgb(250 250 250);
}

html.dark .cm-tooltip-autocomplete-disabled ul li[aria-selected],
html.dark .cm-editor .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
  background: rgb(38 38 38);
}

html.dark .cm-completionMatchedText {
  color: inherit;
}

html.dark .cm-completionDetail {
  color: rgb(163 163 163);
}

html.dark .cm-tooltip .cm-tooltip-arrow:before {
  border-top-color: rgb(64 64 64);
  border-bottom-color: rgb(64 64 64);
}

html.dark .cm-tooltip .cm-tooltip-arrow:after {
  border-top-color: rgb(23 23 23);
  border-bottom-color: rgb(23 23 23);
}
lexxy-toolbar .lexxy-giphy-dropdown {
  --lexxy-giphy-radius: 8px;
}

lexxy-toolbar .lexxy-giphy-dropdown [data-dropdown-panel] {
  background: #fff;
  border: 1px solid var(--lexxy-color-border);
  border-radius: var(--lexxy-giphy-radius);
  box-shadow:
    0 8px 20px rgba(15, 15, 15, 0.1),
    0 1px 3px rgba(15, 15, 15, 0.06);
  box-sizing: border-box;
  /* Reserve full picker height up front so open/search loading doesn't flip placement. */
  block-size: min(24rem, calc(100vh - 1rem));
  display: flex;
  flex-direction: column;
  inline-size: min(20rem, calc(100vw - 1rem));
  max-block-size: min(24rem, calc(100vh - 1rem));
  overflow: hidden;
  padding: 0.5rem;
}

lexxy-toolbar .lexxy-giphy-dropdown [data-dropdown-panel][hidden] {
  display: none !important;
}

.lexxy-giphy-search {
  align-items: center;
  border: 1px solid #d4d4d4;
  border-radius: 0.375rem;
  display: flex;
  flex: 0 0 auto;
  gap: 0.375rem;
  padding-inline: 0.5rem;
}

.lexxy-giphy-search:focus-within {
  border-color: #737373;
  box-shadow: 0 0 0 1px #737373;
}

.lexxy-giphy-search svg {
  color: #737373;
  flex: 0 0 auto;
}

.lexxy-giphy-search input[type="search"] {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #262626;
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.875rem;
  inline-size: 100%;
  min-block-size: 2rem;
  min-inline-size: 0;
  outline: 0;
  padding: 0;
}

.lexxy-giphy-results {
  align-items: start;
  display: grid;
  flex: 1 1 auto;
  gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 0.5rem;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
}

.lexxy-giphy-results::-webkit-scrollbar {
  inline-size: 12px;
}

.lexxy-giphy-results::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: rgba(55, 53, 47, 0.24);
  border: 3px solid transparent;
  border-radius: 999px;
}

.dark .lexxy-giphy-results::-webkit-scrollbar-thumb {
  background-color: rgba(229, 229, 229, 0.32);
}

.lexxy-giphy-column {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-inline-size: 0;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result {
  appearance: none;
  background: #f5f5f5;
  border: 0;
  border-radius: var(--lexxy-giphy-radius);
  break-inside: avoid;
  cursor: pointer;
  display: block;
  inline-size: 100%;
  line-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result::after {
  border: 3px solid transparent;
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result:hover::after,
lexxy-editor lexxy-toolbar .lexxy-giphy-result:focus-visible::after {
  border-color: #404040;
}

lexxy-editor
  lexxy-toolbar
  .lexxy-giphy-results[data-keyboard-nav]
  .lexxy-giphy-result:not([data-highlighted]):hover::after {
  border-color: transparent;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result[data-highlighted]::after {
  border-color: var(--color-primary-500, #404040);
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result:hover,
lexxy-editor lexxy-toolbar .lexxy-giphy-result:focus-visible,
lexxy-editor lexxy-toolbar .lexxy-giphy-result[data-highlighted] {
  outline: 0;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result img {
  block-size: auto;
  border-radius: var(--lexxy-giphy-radius);
  display: block;
  inline-size: 100%;
  transition: opacity 0.12s ease;
}

lexxy-editor lexxy-toolbar .lexxy-giphy-result:hover img,
lexxy-editor lexxy-toolbar .lexxy-giphy-result:focus-visible img,
lexxy-editor lexxy-toolbar .lexxy-giphy-result[data-highlighted] img {
  opacity: 0.72;
}

lexxy-editor
  lexxy-toolbar
  .lexxy-giphy-results[data-keyboard-nav]
  .lexxy-giphy-result:not([data-highlighted]):hover
  img {
  opacity: 1;
}

.lexxy-giphy-status {
  align-items: center;
  color: #737373;
  display: flex;
  font-size: 0.8125rem;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: absolute;
  text-align: center;
}

.lexxy-giphy-attribution {
  align-items: center;
  border-block-start: 1px solid #e5e5e5;
  color: #525252;
  display: flex;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 500;
  gap: 0.25rem;
  letter-spacing: 0.04em;
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.lexxy-giphy-attribution a {
  display: inline-flex;
  transition: opacity 0.12s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lexxy-giphy-attribution a:hover {
    opacity: 0.75;
  }
}

.dark lexxy-toolbar .lexxy-giphy-dropdown [data-dropdown-panel] {
  background: #262626;
  border-color: var(--lexxy-color-border);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    0 1px 3px rgba(0, 0, 0, 0.16);
  color: #e5e5e5;
}

.dark .lexxy-giphy-search {
  border-color: #525252;
}

.dark .lexxy-giphy-search:focus-within {
  border-color: #d4d4d4;
  box-shadow: 0 0 0 1px #d4d4d4;
}

.dark .lexxy-giphy-search svg {
  color: #a3a3a3;
}

.dark .lexxy-giphy-search input[type="search"] {
  color: #fafafa;
  color-scheme: dark;
}

.dark .lexxy-giphy-search input[type="search"]::placeholder {
  color: #a3a3a3;
}

.dark lexxy-editor lexxy-toolbar .lexxy-giphy-result {
  background: #404040;
}

.dark lexxy-editor lexxy-toolbar .lexxy-giphy-result:hover::after,
.dark lexxy-editor lexxy-toolbar .lexxy-giphy-result:focus-visible::after {
  border-color: #e5e5e5;
}

.dark lexxy-editor lexxy-toolbar .lexxy-giphy-result[data-highlighted]::after {
  border-color: var(--color-primary-400, #e5e5e5);
}

.dark .lexxy-giphy-status {
  color: #a3a3a3;
}

.dark .lexxy-giphy-attribution {
  border-block-start-color: #525252;
  color: #a3a3a3;
}

.dark .lexxy-giphy-attribution svg path[fill="#000"] {
  fill: #fafafa;
}

.dark .lexxy-giphy-attribution svg path[d="M4 4h20v27H4z"] {
  fill: #1e1e1e;
}
/*
 * Lexxy editor + rendered Action Text. Loaded on blog pages and the homepage preview.
 *
















 */