@layer app {
  /* ============================================================
     The post composer, on a location's feed and on the signed-in
     feed alike, and the button that brings it up on a phone.
     ============================================================ */

  /* There only to carry the raised class, so its card and button lay out
     as if it were not. */
  .feed-composer {
    display: contents;
  }

  .feed-composer__card {
    padding: 1rem 1.25rem 0.75rem;
    position: relative;
  }

  .feed-composer__dismiss {
    display: none;
  }

  .post-composer {
    align-items: flex-start;
    display: flex;
    gap: 0.9rem;

    > .avatar {
      --avatar-size: 44px;
      --avatar-font-size: 0.9rem;
    }
  }

  /* One box holds the text and the bar under it, on every screen. Only a
     wide one folds it away while nothing is being written. */
  .post-composer__body {
    background: var(--color-body-bg);
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: var(--radius-lg);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 0.8rem 0.6rem 0.5rem 1.1rem;

    &:focus-within {
      border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
  }

  /* The box draws the field. Its text is the size of the line about the
     place above it, not a heading's. */
  .post-composer lexxy-editor.post-composer__input {
    --lexxy-editor-padding: 0;
    --lexxy-editor-rows: 1lh;

    background: none;
    border: 0;
    border-radius: 0;
    font-size: 0.95rem;

    &:focus-within {
      box-shadow: none;
    }
  }

  .post-composer__tray {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Only a wide screen has the narrow closed composer to measure. */
  .post-composer__sizer {
    display: none;
  }

  .post-composer .media-preview:not(.d-none) {
    padding-top: 0.6rem;
  }

  /* Pulled back by the photo button's padding, so its icon lines up with
     the text above. */
  .post-composer__bar {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    margin-inline-start: -0.55rem;
    padding-top: 0.2rem;
  }

  /* Icon only, so a round target. The file field it stands for is hidden,
     so it wears that field's focus. */
  .post-composer__attach {
    align-items: center;
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0.55rem;

    .icon {
      font-size: 1.3rem;
    }

    &:hover {
      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    }

    &.is-invalid {
      color: var(--color-danger);
    }

    :focus-visible + & {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
  }

  /* Takes the room the bar has spare, and is the first to give it up. */
  .post-composer__hint {
    color: color-mix(in srgb, var(--color-dark) 45%, transparent);
    flex: 1 1 0;
    font-size: 0.82rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    b {
      color: color-mix(in srgb, var(--color-dark) 60%, transparent);
    }
  }

  /* Where the post goes, named by the place itself, beside Post. A long
     name is cut short rather than pushing Post out of the box. */
  .post-composer__location {
    --input-font-size: 0.875rem;
    --input-padding-x: 0.85rem;
    --input-padding-y: 0.3rem;
    --input-radius: var(--radius-pill);

    background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-body-bg));
    background-position: right 0.75rem center;
    background-size: 12px 9px;
    border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-dark);
    font-weight: 600;
    max-width: 14rem;
    min-width: 0;
    padding-inline-end: 2rem;
    text-overflow: ellipsis;
    width: auto;
  }

  .post-composer__submit {
    border-radius: var(--radius-pill);
    flex: none;
    font-size: 0.875rem;
    font-weight: 700;
    margin-inline-start: auto;
    padding: 0.3rem 1rem;
  }

  /* Pale until there is something to post: words, or a picked file. */
  .post-composer:not(:has(lexxy-editor:not(.lexxy-editor--empty), .media-preview:not(.d-none))) .post-composer__submit {
    --btn-bg: color-mix(in srgb, var(--color-primary) 35%, var(--color-body-bg));
    --btn-border: var(--btn-bg);
    --btn-bg-hover: var(--btn-bg);
    --btn-border-hover: var(--btn-bg);
  }

  /* On a wide screen the composer is always there, so the button is not. */
  .feed-composer__raise {
    display: none;
  }
}

@media (max-width: 767.98px) {
  @layer app {
    /* The feed comes first on a phone; the composer waits behind a floating
       button, the way the mock-up has it, and rises from the bottom edge when
       that button asks for it, wherever the reader has scrolled to. */
    .feed-composer:not(.feed-composer--raised) .feed-composer__card {
      display: none;
    }

    /* Doubled to outrank the lift rich-text.css gives a glass card while its
       mention prompt is open, which would drop the sheet back into the page. */
    .feed-composer.feed-composer--raised .feed-composer__card {
      background: var(--color-body-bg);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      bottom: 0;
      box-shadow: var(--shadow-lg);
      inset-inline: 0;
      padding: 2.5rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
      position: fixed;
      z-index: 1030;
    }

    .feed-composer__dismiss {
      align-items: center;
      background: none;
      border: 0;
      border-radius: 50%;
      color: color-mix(in srgb, var(--color-dark) 55%, transparent);
      display: inline-flex;
      height: 2rem;
      justify-content: center;
      position: absolute;
      right: 0.6rem;
      top: 0.4rem;
      width: 2rem;
    }

    .feed-composer:not(.feed-composer--raised) .feed-composer__raise {
      align-items: center;
      border-radius: var(--radius-pill);
      bottom: calc(1rem + env(safe-area-inset-bottom));
      box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 35%, transparent);
      display: inline-flex;
      font-weight: 600;
      gap: 0.4rem;
      padding: 0.7rem 1.2rem;
      position: fixed;
      right: 1rem;
      z-index: 1020;
    }

    .post-composer > .avatar {
      display: none;
    }

    /* Any smaller and iOS Safari zooms the page in when the field is focused. */
    .post-composer lexxy-editor.post-composer__input {
      --lexxy-editor-rows: 3lh;

      font-size: var(--input-font-size);
    }

    /* The place's line runs the width of the box, and its border shows up
       any difference between the sides, so the box keeps as much room at
       the end as at the start: the text, the place and Post stop as far in
       as the text, the place and the photo icon begin. */
    .post-composer__body {
      padding-inline-end: 1.1rem;
    }

    /* Too narrow to sit beside Post, the place gets a line of its own, under
       the text and over the photo button, its edge in line with the text.
       The same zoom sets its size. */
    .post-composer__bar {
      flex-wrap: wrap;
    }

    .post-composer__location {
      --input-font-size: 1rem;

      flex: 1 0 calc(100% - 0.55rem);
      margin-inline-start: 0.55rem;
      max-width: none;
      order: -1;
    }
  }
}

/* On a wide screen the composer rests as a pill only as wide as its
   placeholder. Focus anywhere in it, or a click anywhere on its card, opens
   it to the full width, and the photo button, a hint, the place and Post
   slide in under the field; leaving it empty folds it back. The open
   composer is the box every screen shows. composer_controller.js keeps the
   open class. */
@media (min-width: 768px) {
  @layer app {
    /* The form fills the card, so the blank stretch beside the pill is the
       form's to answer a click on. */
    .feed-composer__card {
      padding: 0;
    }

    .post-composer {
      --post-composer-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

      cursor: text;
      padding: 0.85rem 1.25rem;
    }

    .post-composer__body {
      transition:
        flex-grow 420ms var(--post-composer-ease),
        border-radius 300ms var(--post-composer-ease),
        padding 300ms var(--post-composer-ease),
        background-color 300ms ease,
        border-color 200ms ease,
        box-shadow 300ms ease;
    }

    /* Closed, the body is a tinted pill that does not grow, which leaves it
       as wide as the sizer; growing from there to the full row is what
       animates. */
    .post-composer:not(.post-composer--open) .post-composer__body {
      background: color-mix(in srgb, var(--color-primary) 4%, var(--color-body-bg));
      border-radius: 1.4rem;
      flex-grow: 0;
      padding: 0.6rem 1.1rem;
    }

    /* The editor's own width is contained, so it cannot size the closed
       pill; this copy of the placeholder does, at no height. */
    .post-composer__sizer {
      display: block;
      font-size: 0.95rem;
      height: 0;
      overflow: hidden;
      padding-inline-end: 0.1rem;
      visibility: hidden;
      white-space: nowrap;
    }

    /* Grows from no height. Containing its width keeps the bar out of the
       closed pill's measurement, and the tray's negative margin lets focus
       rings and the button's lift show past its clipping edge. */
    .post-composer__drawer {
      contain: inline-size;
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 340ms var(--post-composer-ease);
    }

    .post-composer--open .post-composer__drawer {
      grid-template-rows: 1fr;
    }

    .post-composer__tray {
      margin: -0.5rem;
      min-height: 0;
      overflow: hidden;
      padding: 0.5rem;
    }

    /* Slides up into place, one after another as it opens, and drops back
       out together as it folds. The button keeps its own hover lift, which
       is why this moves with translate rather than transform. */
    :is(.post-composer__attach, .post-composer__hint, .post-composer__location, .post-composer__submit) {
      opacity: 0;
      translate: 0 0.5rem;
      transition:
        all 0.2s ease,
        opacity 220ms ease var(--post-composer-delay, 0ms),
        translate 320ms var(--post-composer-ease) var(--post-composer-delay, 0ms);
    }

    .post-composer--open {
      :is(.post-composer__attach, .post-composer__hint, .post-composer__location, .post-composer__submit) {
        opacity: 1;
        translate: none;
      }

      .post-composer__attach { --post-composer-delay: 90ms; }
      .post-composer__hint { --post-composer-delay: 130ms; }
      .post-composer__location { --post-composer-delay: 150ms; }
      .post-composer__submit { --post-composer-delay: 170ms; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @layer app {
      .post-composer__body,
      .post-composer__drawer,
      :is(.post-composer__attach, .post-composer__hint, .post-composer__location, .post-composer__submit) {
        transition: none;
      }
    }
  }
}