@import url("/assets/lexxy-content-0ff2f961.css") layer(vendor);
@import url("/assets/lexxy-editor-5b842411.css") layer(vendor);

@layer components {
  /* Lexxy editor styles */

  /* Map Lexxy gem variables to app color system for dark mode support.
     Set on elements (not :root) because the gem's unlayered :root wins by cascade. */
  lexxy-editor,
  .lexxy-content {
    --lexxy-color-ink: var(--color-ink);
    --lexxy-color-ink-medium: var(--color-ink-muted);
    --lexxy-color-ink-light: var(--color-ink-light);
    --lexxy-color-ink-lighter: var(--color-gray);
    --lexxy-color-ink-lightest: var(--color-gray-lightest);
    --lexxy-color-ink-inverted: var(--color-bg);
    --lexxy-color-canvas: var(--color-bg);
    --lexxy-color-text: var(--color-ink);
    --lexxy-color-text-subtle: var(--color-ink-muted);
    --lexxy-color-link: var(--color-blue);
    --lexxy-color-accent-dark: var(--color-blue);
    --lexxy-color-accent-medium: var(--color-blue-bright);
    --lexxy-color-accent-light: var(--color-blue-light);
    --lexxy-color-accent-lightest: var(--color-blue-light);
    --lexxy-color-selected: var(--color-blue-light);
    --lexxy-color-selected-hover: var(--color-blue-light);
    --lexxy-color-code-bg: var(--color-gray-lightest);
    --lexxy-color-table-header-bg: var(--color-gray-lightest);
    --lexxy-color-table-cell-border: var(--color-gray);
  }

  /* Enter moves one line, not one section. The gem hangs 1rem under every block,
     so a run of paragraphs reads as filed sections; closed up, a blank line is
     an empty paragraph you typed on purpose. Basecamp's own treatment (fizzy).

     `p:has(+ p)` and not `p + p`: the gem sets bottom margins only, so the gap
     between two paragraphs belongs to the first of them.

     .lexxy-content marks editor-authored markup on both sides — the editor
     carries the class and so does the rendered body — so the rhythm is one and
     the same while composing and while reading. Long-form pages (.prose) keep
     their own rhythm for hand-written markup only; prose.css steps aside for
     this content. */
  .lexxy-content {
    --lexxy-content-margin: 0.5lh;
  }

  .lexxy-content p:has(+ p) {
    margin: 0;
  }

  /* Search marks in rendered bodies: the gem resets mark to transparent, and
     text.css sits below it in the base layer. Same look as text.css. */
  div.lexxy-content mark {
    background-color: var(--color-orange);
    color: var(--color-ink);
    border-radius: 4px;
  }

  /* Compact toolbar (gem default is 2lh ≈ 3rem, gap 2px) */
  lexxy-editor {
    --lexxy-toolbar-button-size: 2rem;
    --lexxy-toolbar-gap: var(--space-xs);
  }

  /* One toolbar look everywhere (wizard, posts, comments): borderless icon
     buttons. Pressed/selected states and the link-dropdown's action buttons
     keep the gem's filled styling — their selectors are more specific. */
  lexxy-toolbar .lexxy-editor__toolbar-button {
    appearance: none;
    background-color: transparent;
    border: 0;
  }

  /* The editor's `toolbar` config lands as data attributes on lexxy-toolbar
     (same mechanism as the gem's own data-upload rules). Editors declare
     toolbar='{"table":false}' where tables are unwanted, e.g. because the
     content feeds prawn-html PDFs, which cannot render them. */
  lexxy-toolbar[data-table="false"] button[name="table"] {
    display: none;
  }

  body:has(lexxy-editor:not(.comment--new lexxy-editor)) {
    overflow-x: clip;
  }

  :where(lexxy-editor:not(.comment--new lexxy-editor)) {
    border: var(--border) !important;
    /* App form-input radius, not the gem's calc (--lexxy-radius + gap ≈ 12px) */
    border-radius: var(--border-radius) !important;
    outline: none;
    transition:
      box-shadow 250ms,
      border-color 250ms;
  }

  :where(lexxy-editor:not(.comment--new lexxy-editor)):focus-within {
    box-shadow: 0 0 0 2px var(--color-blue-bright);
    border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
  }

  /* All toolbars: sticky (override gem's position: relative). Editors in the
     page flow scroll under the fixed app header, so their toolbars clear it
     rather than sliding beneath. */
  lexxy-toolbar {
    background-color: var(--lexxy-bg-color, var(--color-bg));
    inset-block-start: var(--header-height, 0px);
    position: sticky !important;
    z-index: 1;
  }

  /* Editors inside their own scroll container have no fixed chrome above them,
     so their toolbars pin to that container's top edge instead. */
  :is(.dialog, .slide-over, #dock) lexxy-toolbar {
    inset-block-start: 0;
  }

  /* Top corners match the editor's radius (same token) so the toolbar's opaque
     background doesn't poke square corners past the editor's rounding. */
  :where(lexxy-toolbar:not(.comment--new lexxy-toolbar)) {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  .website-body lexxy-toolbar {
    inset-block-start: 2.7rem !important;
  }
}