@layer app {
  /* ============================================================
     Personal feed
     ============================================================ */

  /* The row never reshuffles: Around holds the left, Discussions and Mine hold
     the right, whoever is active. The active tab used to reorder itself to the
     front and push the rest across, so choosing a feed moved every link out
     from under the pointer that had just chosen it. The selected tab is still
     the larger one, but it grows in place — a transform, so the row around it
     does not have to make room. */
  .personal-feed__tabs {
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.25rem, 1.5vw, 0.5rem);

    .nav-item:first-child {
      margin-inline-end: auto;
    }

    .nav-link {
      border: 1px solid transparent;
      border-radius: 999px;
      color: color-mix(in srgb, var(--color-dark) 55%, transparent);
      font-size: clamp(0.8rem, 3.5vw, 0.9rem);
      font-weight: 600;
      padding: 0.4rem clamp(0.5rem, 2vw, 0.7rem);
      white-space: nowrap;

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

      &.active {
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
        color: var(--color-primary);
        transform: scale(1.1);
      }
    }
  }

  .personal-feed__description {
    line-height: 1.5;
  }

  /* Card and media sizing is shared with location feeds in feeds.css. Only
     what a location feed has no use for belongs here. */
  .personal-feed__stream .feed-post__location-context {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
  }
}