/*
 * Composer — the borderless write/edit surface for a recordable (posts,
 * messages): big bare title input + frameless Lexxy editor whose toolbar
 * runs the full width under a hairline.
 *
 * Structure (BEM): form.composer > .composer__title [+ .composer__category]
 * + lexxy-editor
 */
@layer components {
  .composer {
    display: grid;
    gap: var(--u-pad);
  }

  /* Title: H1-scale, no chrome; the caret is the focus indicator. */
  .composer__title {
    background: none;
    border: none;
    color: var(--ink);
    font-size: var(--font-size-6);
    font-weight: var(--font-weight-8);
    inline-size: 100%;
    line-height: var(--font-lineheight-1);
    outline: none;
    padding: 0 var(--u-pad);
  }

  .composer__title::placeholder { color: var(--ink-muted); }

  /* Excerpt: a quiet, optional summary below the body — bordered so it reads as
     a distinct metadata field, not part of the prose. */
  .composer__excerpt {
    inline-size: 100%;
    padding: calc(var(--u-pad) / 1.5);
    color: var(--ink);
    font: inherit;
    resize: vertical;
  }
  .composer__excerpt::placeholder { color: var(--ink-muted); }

  .composer__field { display: grid; gap: calc(var(--u-pad) / 3); }
  .composer__hint { font-size: var(--font-size-0); padding-inline: var(--u-pad); }
  /* Below the 50-char floor: nudge, don't block. */
  .char-count--short .composer__hint { color: var(--warning-ink, var(--accent)); }

  /* Category picker (messages): a quarter of the composer, not a full-width
     bar; the floor keeps the prompt readable on narrow screens. */
  .composer__category { inline-size: clamp(13rem, 25%, 100%); }

  /* Editor: no frame; toolbar spans edge to edge with just the hairline. */
  .composer lexxy-editor {
    background: transparent;
    border: none;
    border-radius: 0;
    /* Keep the text off the edges now the border is gone; inline inset lines
       the body up with the title above. */
    --lexxy-editor-padding: var(--u-pad);
  }

  /* Optically align the first toolbar icon with the title/body text. */
  .composer lexxy-toolbar {
    padding-inline: calc(var(--u-pad) - 2px);
  }
}