@layer components {
  /* Сообщество: shared feed, write form, drafts on the write page. */
  .community {
    display: grid;
    gap: var(--space-m);
  }

  .community-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);

    h1 { margin: 0; }
  }

  .community-search {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  nav.community-feed-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);

    a,
    .search-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: var(--touch);
      padding-inline: var(--space-s);
      border: thin solid var(--mist);
      border-radius: var(--radius-s);
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
    }

    .search-toggle {
      background: none;
      cursor: pointer;

      &[aria-expanded="true"] {
        background: var(--dusk);
        color: var(--cream);
        border-color: var(--dusk);
      }
    }

    a {
      &:visited { color: var(--muted); }

      &[aria-current="true"] {
        background: var(--dusk);
        color: var(--cream);
        border-color: var(--dusk);

        &:visited { color: var(--cream); }
      }
    }
  }

  .community .community-write,
  .community-comment-send,
  .community-form .community-publish,
  .community-form .community-draft-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch);
    padding-inline: var(--space-m);
    border: none;
    border-radius: var(--radius-s);
    background: var(--paprika);
    color: #fff;
    font-size: var(--step-0);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  .community-form .community-draft-save {
    background: transparent;
    color: inherit;
    border: var(--stroke) solid currentColor;
  }

  .community-form .community-publish:disabled,
  .community-form .community-draft-save:disabled {
    opacity: 0.65;
    cursor: wait;
  }

  .community-drafts summary {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch);
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
  }

  .community-draft-list {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .community-draft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
  }

  .community-draft-open {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: var(--touch);
    color: inherit;
    text-decoration: none;

    time {
      color: var(--muted);
      font-size: var(--step-00);
    }
  }

  .community-draft-delete {
    min-inline-size: var(--touch);
    min-block-size: var(--touch);
    border: none;
    background: none;
    color: var(--muted);
    font-size: var(--step-00);
    cursor: pointer;
  }

  .community-feed {
    display: grid;
    gap: var(--space-l);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .community-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-s);

    .btn { margin: 0; }

    .btn.ghost {
      padding-inline: var(--space-m);
      font-size: var(--step-0);
    }

    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      text-decoration: none;
    }
  }

  .community-post {
    --community-avatar: 2.75rem;
    display: grid;
    gap: var(--space-s);
  }

  /* Avatar | name+stamp | actions — three tracks so controls sit on the
     trailing edge of the column, even when the name is short. */
  .community-post-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-xs);
    inline-size: 100%;
    color: var(--muted);

    .avatar {
      --size: var(--community-avatar);
    }

    .community-post-actions {
      grid-column: 3;
      display: flex;
      align-items: start;
      justify-content: end;
      gap: 0;
      margin-inline-end: 0.125rem;
      margin-block-start: 0.125rem;

      .favorite-form { display: contents; }

      .favorite {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--touch);
        min-inline-size: var(--touch);
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        touch-action: manipulation;

        .glyph { inline-size: 1.15em; block-size: 1.15em; }

        &.is-on {
          color: var(--paprika);

          .glyph { fill: currentColor; stroke: currentColor; }
        }
      }

      .kill {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--touch);
        min-inline-size: var(--touch);
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--over);
        font: inherit;
        font-size: 1.35em;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        touch-action: manipulation;
      }
    }
  }

  .community-post-id {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-inline-size: 0;
    grid-column: 2;

    strong {
      color: var(--ink);
      font-size: var(--step-0);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    time {
      font-size: var(--step-00);
      line-height: 1.2;
    }
  }

  .community-body p {
    margin: 0 0 var(--space-2xs);
    line-height: 1.45;
    overflow-wrap: anywhere;

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

  .community-body .community-tag,
  .community-comment-body .community-tag {
    color: var(--paprika);
    text-decoration: none;
  }

  .community-empty {
    margin: 0;
    color: var(--muted);
  }

  .community-field {
    display: grid;
    gap: var(--space-2xs);
  }

  .community-field textarea {
    inline-size: 100%;
    min-block-size: calc(var(--touch) * 3);
    padding: var(--space-xs);
    border: thin solid color-mix(in oklch, var(--ink) 22%, var(--mist));
    border-radius: var(--radius-s);
    font: inherit;
  }

  .community-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .community-attach {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  /* Kept draft stills and fresh picks share one three-across grid. */
  .community-picks-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
  }

  .community-picks {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .community-pick {
    position: relative;
    min-inline-size: 0;
    aspect-ratio: 1;

    figure {
      margin: 0;
      block-size: 100%;
      border-radius: var(--radius-s);
      overflow: clip;
      background: color-mix(in oklch, var(--ink) 6%, var(--mist));
    }

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .community-pick-kill {
    appearance: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch);
    min-inline-size: var(--touch);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: color-mix(in oklch, var(--paper) 82%, transparent);
    color: var(--over);
    font: inherit;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }

  .community-add-photos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-block-size: var(--touch);
    padding-inline: var(--space-m);
    border: var(--stroke) solid currentColor;
    border-radius: var(--radius-s);
    background: transparent;
    color: inherit;
    font-size: var(--step-0);
    font-weight: 600;
    cursor: pointer;

    &.is-busy {
      opacity: 0.65;
      pointer-events: none;
    }
  }

  .community-hint {
    margin: 0;
    color: var(--muted);
    font-size: var(--step-00);
  }

  .community-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .community-back {
    margin: 0;

    a {
      color: var(--muted);
      min-block-size: var(--touch);
      display: inline-flex;
      align-items: center;
    }
  }

  .community-photos {
    display: grid;
    gap: var(--space-2xs);
    align-items: start;
  }

  .community-shot {
    appearance: none;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--paper);
    inline-size: 100%;
    cursor: zoom-in;
    overflow: clip;

    img {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }

  /* Fullscreen still: pinch to zoom; tap or swipe to step; empty space,
     last still, or Escape closes. Next still → forward arrow on the photo only.
     Fixed layer (not Popover API) so hide is reliable on iOS. */
  .community-view {
    position: fixed;
    inset: 0;
    z-index: 50;
    margin: 0;
    inline-size: 100%;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    padding:
      env(safe-area-inset-top, 0rem)
      env(safe-area-inset-right, 0rem)
      env(safe-area-inset-bottom, 0rem)
      env(safe-area-inset-left, 0rem);
    border: 0;
    background: oklch(0 0 0 / 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-out;
    overscroll-behavior: none;
    touch-action: none;

    img {
      max-inline-size: 100%;
      max-block-size: 100%;
      inline-size: auto;
      block-size: auto;
      object-fit: contain;
      border-radius: 0;
      cursor: zoom-out;
      transform-origin: center center;
    }

    &.is-more img {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 6l12 10-12 10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 6l12 10-12 10' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize;
    }
  }

  /* Brief full-viewport catcher after close so the same tap cannot reopen. */
  .community-view-shield {
    position: fixed;
    inset: 0;
    z-index: 60;
  }

  @media (min-width: 30rem) {
    .community-photos-1 { grid-template-columns: 1fr; }
    .community-photos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community-photos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Comments: thread oldest-first, then cream composer bar (no rule).
     Camera, field, and Send sit on one row. */
  .community-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .community-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Square chips across the thread. Avatar beside a main column so body
     and photo line up under the nick. × overlays the trailing corner so
     its 44pt hit box does not stretch the heading. A quiet paper surface
     keeps nested reply cards from competing with posts. */
  .community-comment {
    --community-avatar: 2rem;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-xs);
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--space-s);
    border: 0;
    border-radius: var(--radius-s);
    background: var(--paper);

    > .avatar {
      --size: var(--community-avatar);
      grid-column: 1;
      grid-row: 1;
    }

    > .kill {
      /* Overlay the trailing corner so the 44pt hit box cannot stretch
         the heading (that gap sat between stamp and body). */
      position: absolute;
      inset-block-start: 0.125rem;
      inset-inline-end: 0.125rem;
      justify-content: end;
      align-items: start;
    }
  }

  .community-comment-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-inline-size: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .community-comment:has(> .kill) .community-comment-head {
    padding-inline-end: var(--touch);
  }

  .community-comment-head {
    color: var(--muted);
  }

  .community-comment-id {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-inline-size: 0;

    strong {
      color: var(--ink);
      font-size: var(--step-0);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    time {
      font-size: var(--step-00);
      line-height: 1.2;
    }
  }

  .community-comment-body p {
    margin: 0 0 var(--space-2xs);
    font-size: var(--step-0);
    line-height: 1.45;
    overflow-wrap: anywhere;

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

  .community-comment-photo {
    max-inline-size: 100%;
  }

  .community-comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .community-comment-alert {
    margin: 0;
    color: var(--over);
    font-size: var(--step-00);
  }

  .community-comment-compose {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
    border-radius: var(--radius-s);
    background: var(--cream);

    &:focus-within {
      outline: var(--stroke) solid var(--paprika);
      outline-offset: 0.15em;
    }
  }

  .community-comment-compose textarea {
    flex: 1;
    min-inline-size: 0;
    min-block-size: var(--touch);
    max-block-size: calc(var(--touch) * 6);
    padding-block: 0.725em;
    padding-inline: var(--space-xs);
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    font: inherit;
    line-height: 1.3;
    resize: none;
    overflow-y: auto;
    field-sizing: content;

    &:focus-visible { outline: none; }
  }

  /* Preview sits above the one-line composer so the still stays readable
     and the 44pt × only claims a corner badge, not the whole thumb. */
  .community-comment-pick {
    position: relative;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    flex-shrink: 0;

    figure {
      margin: 0;
      block-size: 100%;
      border-radius: var(--radius-s);
      overflow: clip;
      background: color-mix(in oklch, var(--ink) 6%, var(--mist));
    }

    img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .community-pick-kill {
      inset-block-start: 0;
      inset-inline-end: 0;
      background: color-mix(in oklch, var(--cream) 88%, transparent);
      border-radius: 0 var(--radius-s) 0 var(--radius-s);
      font-size: 1.15em;
    }
  }

  .community-comment-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-inline-size: var(--touch);
    min-block-size: var(--touch);
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--muted);
    cursor: pointer;

    .glyph {
      inline-size: 1.4em;
      block-size: 1.4em;
    }

    &.is-busy {
      opacity: 0.65;
      pointer-events: none;
    }
  }

  .community-comment-send {
    flex-shrink: 0;
    padding-inline: var(--space-s);

    &:disabled {
      opacity: 0.65;
      cursor: wait;
    }
  }

  @media (max-width: 40rem) {
    .community-head {
      align-items: stretch;

      .community-write { flex: 1 1 100%; }
    }
  }
}