/*
 * ACTION TEXT: THE LEXXY EDITOR'S THEME, AND HOW A RICH BODY RENDERS.
 *
 * The editor is Lexxy (owner, 2026-10-12: "switch back to having main general
 * comments as a Lexxy RTE and Action Text"), which replaced Trix app-wide --
 * the comment body was the only rich-text field. Lexxy's own stylesheet
 * (gem lexxy, linked from the staff layout BEFORE this file) draws every
 * colour from `--lexxy-*` custom properties, so theming it is pointing those
 * at the app's tokens. This file is UNLAYERED and loads after Lexxy's, so the
 * :root block below wins; the tokens it names are redefined under `.dark`
 * (on <html>, the same element as :root), so both themes follow with no
 * second block.
 *
 * THEME TOKENS, NOT LITERALS (stage, 2026-10-07, when this was Trix): a
 * literal colour here beats the editor's Tailwind classes and the `.dark`
 * block alike, and drew light toolbars on the dark composer.
*/

:root {
  --lexxy-color-ink: var(--color-fg-1);
  --lexxy-color-ink-medium: var(--color-fg-2);
  --lexxy-color-ink-light: var(--color-fg-3);
  --lexxy-color-ink-lighter: var(--color-border-2);
  --lexxy-color-ink-lightest: var(--color-bg-subtle);
  --lexxy-color-ink-inverted: var(--color-bg-surface);

  --lexxy-color-accent-dark: var(--color-fg-brand);
  --lexxy-color-accent-medium: var(--color-border-brand);
  --lexxy-color-accent-light: var(--color-bg-muted);
  --lexxy-color-accent-lightest: var(--color-bg-brand-soft);

  --lexxy-color-canvas: var(--color-bg-surface);
  --lexxy-color-text: var(--color-fg-1);
  --lexxy-color-text-subtle: var(--color-fg-3);
  --lexxy-color-link: var(--color-fg-link);
  --lexxy-color-selected: var(--color-bg-brand-soft);
  --lexxy-color-selected-hover: var(--color-bg-muted);
  --lexxy-color-code-bg: var(--color-bg-subtle);

  --lexxy-font-base: inherit;
  --lexxy-content-margin: 0.5rem;
  --lexxy-focus-ring-color: var(--color-fg-brand);
  --lexxy-shadow: var(--shadow-elev-2, 0 2px 8px rgb(0 0 0 / 0.1));
}

/* The comment composer's editor (comments/_form, comments/edit). Its border
   and surface come from the classes on the element; this is the typing area
   and the toolbar, kept to what a comment needs -- bold, italic, links,
   bullet and numbered lists, undo/redo. Lexxy's markdown shortcuts still work
   in the text ("- " starts a list, "1. " a numbered one, **bold**). The
   rest of its toolbar (uploads, headings, colour highlights, quote, code,
   tables, dividers) is hidden: highlights are inline `style`, and my_i, which
   is sent the body, keeps none of it. Hidden by attribute, so a button the
   toolbar moved into its overflow menu stays hidden there too. */
lexxy-editor.comment-editor {
  --lexxy-editor-rows: 6lh;
  color: var(--color-fg-1);
}

lexxy-editor.comment-editor lexxy-toolbar :is(
  [name="image"], [name="file"], [name="strikethrough"], [name="underline"],
  [name="quote"], [name="code"], [name="table"], [name="divider"]
),
lexxy-editor.comment-editor lexxy-toolbar :is(
  lexxy-toolbar-dropdown:not(.lexxy-editor__toolbar-overflow), lexxy-highlight-dropdown
) {
  display: none;
}

/* Lists while typing: Preflight's list-style: none reaches the editor too. */
lexxy-editor ul { list-style: disc; }
lexxy-editor ol { list-style: decimal; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid var(--color-border-2);
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: var(--color-bg-subtle);
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

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

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/*
 * LEXXY-AUTHORED BODIES render through the same wrapper
 * (layouts/action_text/contents/_content), so old Trix bodies and new ones
 * share these rules. Trix wrote <div>s and <br>s; Lexxy writes a real <p> per
 * paragraph and plain <ul>/<ol>/<li>, so paragraphs and lists get a little
 * space after them -- `.trix-content *` above zeroes every margin. A nested
 * list sits in an <li> of its own that must not draw a second marker.
*/
.trix-content :is(p, ul, ol, blockquote, pre):not(:last-child) {
  margin-bottom: 0.5rem; }
.trix-content p:empty {
  display: none; }
.trix-content li.lexxy-nested-listitem {
  list-style-type: none; }
.trix-content a {
  color: var(--color-fg-link);
  text-decoration: underline; }